Spring 2008 6.831 User Interface Design and Implementation 1Lecture 4: Learnability To print these slides, use the PDF version. UI Hall of Fame or Shame?Spring 2008 6.831 User Interface Design and Implementation 2Source: Interface Hall of Shame IBM’s RealCD is CD player software, which allows you to play an audio CD in your CD-ROM drive. Why is it called “Real”? Because its designers based it on a real-world object: a plastic CD case. This interface has a metaphor, an analogue in the real world. Metaphors are one way to make an interface more learnable, since users can make guesses about how it will work based on what they already know about the interface’s metaphor. Unfortunately, the designers’ careful adherence to this metaphor produced some remarkable effects, none of them good. Here’s how RealCD looks when it first starts up. Notice that the UI is dominated by artwork, just like the outside of a CD case is dominated by the cover art. That big RealCD logo is just that – static artwork. Clicking on it does nothing. There’s an obvious problem with the choice of metaphor, of course: a CD case doesn’t actually play CDs. The designers had to find a place for the player controls – which, remember, serve the primary task of the interface – so they arrayed them vertically along the case hinge. The metaphor is dictating control layout, against all other considerations. Slavish adherence to the metaphor also drove the designers to disregard all consistency with other desktop applications. Where is this window’s close box? How do I shut it down? You might be able to guess, but is it obvious? Learnability comes frommore than just metaphor. UI Hall of Shame!Spring 2008 6.831 User Interface Design and Implementation 3Source: Interface Hall of Shame But it gets worse. It turns out, like a CD case, this interface can also be opened. Oddly, the designers failed to sensibly implement their metaphor here. Clicking on the cover art would be a perfectly sensible way to open the case, and not hard to discover once you get frustrated and start clicking everywhere. Instead, it turns out the only way to open the case is by a toggle button control (the button with two little gray squares on it). Opening the case reveals some important controls, including the list of tracks on the CD, a volume control, and buttons for random or looping play. Evidently the metaphor dictated that the track list belongs on the “back” of the case. But why is the cover art more important than these controls? A task analysis would clearly show that adjusting the volume or picking a particular track matters more than viewing the cover art. And again, the designers ignore consistency with other desktop applications. It turns out that not all the tracks on the CD are visible in the list. Could you tell right away? Where is its scrollbar?UI Hall of ShameSpring 2008 6.831 User Interface Design and Implementation 4mouse overSource: Interface Hall of Shame We’re not done yet. Where is the online help for this interface? First, the CD case must be open. You had to figure out how to do that yourself, without help. With the case open, if you move the mouse over the lower right corner of the cover art, around the IBM logo, you’ll see some feedback. The corner of the page will seem to peel back. Clicking on that corner will open the Help Browser. The aspect of the metaphor in play here is the liner notes included in a CD case. Removing the liner notes booklet from a physical CD case is indeed a fiddly operation, and alas, the designers of RealCD have managed to replicate that part of the experience pretty accurately. But in a physical CD case, the liner notes usually contain lyrics or credits or goofy pictures of the band, which aren’t at all important to the primary task of playing the music. RealCD puts the instructions in this invisible, nearly unreachable, and probably undiscoverable booklet. This example has several lessons: first, that interface metaphors can be horribly misused; and second, that the presence of a metaphor does not at all guarantee an “intuitive”, or easy-to-learn, user interface. (There’s a third lesson too, unrelated to metaphor – that beautiful graphic design doesn’t equal usability, and that graphic designers can be just as blind to usability problems as programmers can.) Fortunately, metaphor is not the only way to achieve learnability. In fact, it’s probably the hardest way, fraught with the most pitfalls for the designer. In this lecture, we’ll look at some other ways.Today’s Topics• User model vs. system model• Interaction styles• Learnability principles & design patterns– Affordances– Natural mapping– Consistency– Speak the user’s language– MetaphorsSpring 2008 6.831 User Interface Design and Implementation 5 Today’s lecture is about learnability and memorability – making interfaces easier for new users to learn, and for casual users to remember. We’ll talk about how users learn about an interface by forming a mental model of its parts and their behaviors. We’ll look at the evolution of graphical user interfaces from a learnability point of view, surveying three interface styles that have been (and still are) used. We’ll also talk about some design principles that you can apply if learnability is an important criterion for your interface. Models• Model of a system = how it works– its constituent parts and how they work together to do what the system does• Implementation models– Pixel editing vs. structured graphics– Text file as single string vs. list of lines• Interface models– RealCD’s online help as liner notesSpring 2008 6.831 User Interface Design and Implementation 6 A model of a system is a way of describing how the system works. A model specifies what the parts of the system are, and how those parts interact to make the system do what it’s supposed to do. Consider image editing software. Programs like Photoshop and Gimp use a pixel editing model, in which an image is represented by an array of pixels (plus a stack of layers). Programs like Visio and Illustrator, on the other hand, use a structured graphics model, in which an image is represented by a collection of graphical objects, like lines, rectangles, circles, and text. In this case, the choice of model strongly constrains the kinds of operations available to a user. You can easily tweak individual pixels
View Full Document
Unlocking...