• Summary
• Part 2 : Findings
• Part 3: Redesigns
• Part 4: Other design ideas

Organization of this report

Redesign provides graphics and detailed descriptions of the new controls we suggest.  It does not cover the prototype we developed for usability testing of the ideas.  That prototype is described in Appendix 5, Visual Basic Prototype and Usability Tests.  

Part 2. Findings

In general, our heuristic evaluation revealed that

·         Controls were too close together.  It was easy to select the wrong control with a careless click.  The controls and associated values also obscured nearby graphemes.

·         Controls provided limited feedback.  If a user accidentally selected a control, this would not be obvious until the grapheme’s value started to change.  One of the papers [1] implies this is an artifact of the current network setup, though, and not by design.  The current design changes the data first and then the graphical display automatically updates; unfortunately, we did not observe updates to the controls on the day we explored the interface with Mark.

·         The saturation control in particular was misleading, its three colors implying it only allowed discrete values of hue rather than continuous values of saturation.

The current Visage editing controls are shown in Figure 1 at the end of this section, near the figures of some of our proposed redesign.

Our client informed us that direct manipulation of information was the guiding theme of Visage’s design.  From papers [1,2] we also found that though Visage was designed with data exploration in mind, data editing was a secondary function and could not change any of the current action vocabulary.  (Many of our originally suggested design changes inadvertently did that.)

We decided to increase efficiency and the feeling of direct manipulation by providing shortcuts to each of the controls, and having the control appear just under the mouse.  In some ways this violated our client’s conscious decision to not have a special editing mode.[1]  However, we felt the current stateless way it was being handled a user might easily change permanent data and not realize it. 

In response to the first issue, we reorganized the layout.  The controls were made stateful: most of the time only one control would be active.  Further, the data represented by the grapheme was moved to one side in a callout, where it would not obscure other graphemes.  Also, we mandated immediate feedback via the controls and grapheme of the new values (issue 2).  For the third issue, the saturation control, we suggest an entirely different appearance.

We also strongly recommend adding online help, both of the task-oriented type and the one-line status type that informs users what operations are available in the current location.  Although Visage users will be trained, it is common for advanced users to mix systems and briefly forget how to achieve their goals in the current system.

Our heuristic evaluation also looked at the initial Sagebrush screen, but we decided that because it was not a part of Visage we did not have license to make suggestions to it.

On the next page are some of the more important pictures from our redesign.  Figure 2 shows a selected grapheme, with some of the visible feedback.  Also notice the one-line help in the status bar at bottom.  As explained in Redesign, this help can be turned off.

Figure 3 demonstrates the new saturation control.  To summon this control, after selecting the grapheme as in Figure 2, hold down the shift key and click the mouse button.  A slider appears over the grapheme, and the mouse movement moves the slider (direct manipulation) changing both the grapheme’s color and the value in the data callout.  This also minimizes movement, because the user does not need to carefully select an icon out of a cluster.  Both pictures indirectly display the less cluttered look mandated by issue 1

[1] Derthick, Mark, and Steven F. Roth, “Direct Manipulation Input to Data Visualizations,” awaiting publication.  Available from Mark Derthick, mad+@cs.cmu.edu.

[2] Roth, Steven F. et al., “Visage: A User Interface Environment for Exploring Information,”  available at http://www.cs.cmu.edu/~sage/PDF/Visage.pdf  

Figure 4 shows all the new interface elements.  The top section is different pointers to provide feedback on the control in current use.  The standard pointer is the second from left on the top row.  The first one only appears when editing data values in the callout.   The ones that are a combination arrowhead and symbols are used when a certain control has been activated but no grapheme is selected .
The yellow box displays data values of a grapheme to one side of the picture.  Because Visage is based on expert systems, we posited “smart” placement of it where it does not obstruct data but is as near the grapheme as possible.
The triangles, circles, and squares show different states of the graphemes.  The top of each cluster is the icon selected for movement.  Moving clockwise, the next is the grapheme in its unselected state.  At bottom is the grapheme waiting for resize, and at left is a selected grapheme.

Figure 5.  Online help

We also strongly recommend that Visage incorporate some form of online help.  Not only is this one of the top ten heuristics, but users expect applications to have help now.  This figure shows  the help button being pressed.  The help button is in the Sage Picture screen, just above the blue line.  We made it small in keeping with Visage’s minimalist esthetic, and because it does not need to be so prominent for expert users.

Figure 7.  Changing the saturation, shape, and size

Figure 8 shows the generic case of  the user has selected a grapheme, but not yet decided to edit it.  Notice that once the grapheme is selected, the data callout appears and the cursor changes shape.  The one-line help at the bottom of the window prompts the user with what actions are possible.

The first common thread we noticed in the contextual inquiries was that nobody is satisfied with current file sharing mechanisms. Because of this, we suggested to our clients they make that a higher priority for study.  On October 30^th, Stavros was informed during a meeting with the clients that another group was already working on file sharing.  

We spent the next week working on ideas specifically related to graphical editing.  We assumed our clients would be interested in making a profit, and thus a prime focus of our design ideas was making the interface behave more like typical PC applications, particularly InfoMap.  We also thought that with a wider market share, there would be more need for user support.

The specific ideas we started prototyping on November 4^th  were:

1. Add a toolbar with tools for moving windows or moving graphemes.  In particular, we imagined something like the tool palette used by graphics packages.  Had we known of Xerox’s Magic Lens and Tool Palette ™  ideas, we would have copied those, because that was what we were working towards in making a palette that was more like Visage.

2. Give smarts to the user’s desktop so that it organizes data automatically.  This was in response to another common user problem: too many similar files when trying to locate just one.  We did not flesh this out very far, primarily because of disagreement between members as to how it should behave.

3. A context-sensitive help system.  This was directly based off our experience as software consumers, where only freeware is considered inexpensive enough to escape with no help system.  Given how much of the system work in Visage is invisible to the user, we felt that context-sensitivity was a must.

4 Standardized windows look and feel.  This suggestion was based on our assumption that our clients wanted to make money.  During the contextual inquiries, U1 and U3 commented in frustration on applications that did not behave like the majority of their other tools.  Although we understood that long term, Visage was meant to be the next generation, we felt that in the short term they could win users by copying Microsoft standards.

home  |  projects  |  hobbies  | resume  |  links  |  contact