Spring 2008 6.831 User Interface Design and Implementation 1Lecture 9: Visibility UI Hall of Fame or Shame?Spring 2008 6.831 User Interface Design and Implementation 2Suggested by Vishy Venugopalan This Flash-driven web site is the Museum of Modern Art’s Workspheres exhibition (http://www.moma.org/exhibitions/2001/workspheres/), a collection of objects related to the modern workplace. This is its main menu: an array of identical icons. Mousing over any icon makes its label appear (the yellow note shown), and clicking brings up a picture of the object. Think about this site with respect to: - metaphor - simplicity - visibility More “Mystery Navigation”Spring 2008 6.831 User Interface Design and Implementation 3Suggested by Adam Champy This was once the home page for Movado, a company that makes expensive, stylish watches. (They’ve since changed their design.) The little white dots at the top of the window are menu options. If you watched the opening animation that precedes this screen, you’d see each menu label appear briefly over each dot. But if you skipped over the intro, you wouldn’t see that, and you may not even realize that a menu is hiding up there under those stylish white dots. When you mouse over a dot, you actually have to wait for a cute little animation (a watch hand sweeping around the dot) before the menu label appears. Each little animation takes 2 seconds. Moving the mouse off the dot makes the label disappear again.How does this interface fare in terms of: - simplicity - visibility - efficiency Today’s Topics• Visible actions– Information scent• Visible state– Locus of attention• Visible feedback– Perceptual fusion– Response timeSpring 2008 6.831 User Interface Design and Implementation 4 Today’s lecture is about visibility – making the invisible state and behavior of software perceivable by the user. We’ll look at three kinds of things to make visible. Actions are the things the user can do in the interface, like commands that can be issued or places that can be visited. State is the current configuration of the interface and its backend, like which objects are selected or what data is in the model. Feedback is the result of a user’s action, which might be a change in visible state or might simply be an acknowledgement that the action took effect. Along the way, we’ll mention several phenomena related to human cognition and perception, such as the spotlight model of attention, and the notion of perceptual fusion and its practical implications for system response time. We’ll do this in future design-principles lectures as well, because understanding the properties and limitations of the human beings on one side of a user interface is as important as understanding how to program the computer on the other side. We don’t have time in this course to cover human cognition in depth, however, so we’ll pick and choose as necessary to support the design topics we’re discussing. If you’re interested in learning more, you should check out courses in Course 9 (Brain & Cognitive Sciences).Visibility• Relevant parts of system should be visible– Not usually a problem in the real world– But takes extra effort in computer interfacesSpring 2008 6.831 User Interface Design and Implementation 5mouse over Visibility is an essential principle of graphical user interface design. If the user can’t see an important control, they would have to (1) guess that it exists, and (2) guess where it is. Recall that this was exactly the problem with RealCD’s online help facility. There was no visible clue that the help system existed in the first place, and no perceivable affordance for getting into it. Visibility is not usually a problem with physical objects, because you can usually tell its parts just by looking at it. Look at a bicycle, or a pair of scissors, and you can readily identify the pieces that make it work. Although parts of physical objects can be made hidden or invisible – for example, a door with no obvious latch or handle – in most cases it takes more design work to hide the parts than just to leave them visible. The opposite is true in computer interfaces. A window can interpret mouse clicks anywhere in its boundaries in arbitrary ways. The input need not be related at all to what is being displayed. In fact, it takes more effort to make the parts of a computer interface visible than to leave them invisible. So you have to guard carefully against invisibility in computer interfaces. Actions: Use Appropriate Affordances• Buttons & links• Drop-down arrows•Texture• Mouse cursor• Highlight on mouseoverSpring 2008 6.831 User Interface Design and Implementation 6 The first kind of visibility is for actions: what can the user do? (Or where can the user go, if we’re talking about an information-rich web site?) We’ve already talked about affordances, which are the actual and perceived properties of an object that indicate how it should be operated. Note the word perceived – if the user can’t perceive affordances, then they won’t effectively communicate. Here are some more examples of commonly-seen affordances in graphical user interfaces. Buttons and hyperlinks are the simplest form of affordance for actions. Buttons are typically metaphorical of real-world buttons, but the underlined hyperlink has become an affordance all on its own, without reference to any physical metaphor. Downward-pointing arrows, for example, indicate that you can see more choices if you click on thearrow. The arrow actually does double-duty – it makes visible the fact that more choices are available, and it serves as a hotspot for clicking to actually make it happen. Texture suggests that something can be clicked and dragged – relying on the physical metaphor, that physical switches and handles often have a ridged or bumpy surface for fingers to more easily grasp or push. Mouse cursor changes are another kind of affordance – a visible property of a graphical object that suggests how you operate it. When you move the mouse over a hyperlink, for example, you get a finger cursor. When you move over the corner of a window, you often get a resize cursor; when you move over a textbox, you get a text cursor (the “I-bar”). Finally, the visible highlighting that you get when you move the mouse over a menu item or a button is another kind of affordance. Because the object visibly responds to the
View Full Document
Unlocking...