DOC PREVIEW
MIT 6 893 - Lecture Notes

This preview shows page 1-2-24-25 out of 25 pages.

Save
View full document
View full document
Premium Document
Do you want full access? Go Premium and unlock all 25 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 25 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 25 pages.
Access to all documents
Download any document
Ad free experience
View full document
Premium Document
Do you want full access? Go Premium and unlock all 25 pages.
Access to all documents
Download any document
Ad free experience
Premium Document
Do you want full access? Go Premium and unlock all 25 pages.
Access to all documents
Download any document
Ad free experience

Unformatted text preview:

1Fall 2003 6.893 UI Design and Implementation 1Lecture 4: Models, Modes, & Metaphors2Fall 2003 6.893 UI Design and Implementation 2UI Hall of Fame or Shame?Source: Interface Hall of ShameIBM’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 “intuitive,” 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 RealCDlogo 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 “intuitive?” Learnability comes from more than just metaphor.3Fall 2003 6.893 UI Design and Implementation 3UI Hall of Shame!Source: Interface Hall of ShameBut 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?4Fall 2003 6.893 UI Design and Implementation 4UI Hall of Shamemouse overSource: Interface Hall of ShameWe’re not done yet. Where is the online help for this interface? Pressing F1 doesn’t work, and there’s no obvious Help or “?” button. So you might just give up. But it turns out that there is online help, and its method of activation is again dictated by the metaphor.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.5Fall 2003 6.893 UI Design and Implementation 5Today’s Topics• Conceptual models• Communication techniques– Affordance– Mapping– Visibility–Feedback•Errors– Modes• MetaphorsToday’s lecture concerns the conceptual models of user interfaces. A metaphor, like the CD case, is an example of a conceptual model. In a sense, your job as a user interface designer boils down to (1) choosing the right conceptual model and (2) teaching it successfully to the user.We’ll discuss some techniques for successful communication, among them affordances, mapping, visibility, and feedback. We already encountered affordances in the first lecture, when we discussed the Hall of Shame award-certificate printing program, which used a scrollbar in a way contrary to its affordance.We’ll also discuss what causes users to make errors, even after all the UI tries to tell them, and how we can design our systems to prevent or mitigate these errors. An important kind of error is caused by modes. We’ll see what modes are and how to avoid them.Finally, we’ll come back to metaphors again, and try to understand when they might help, and when not.6Fall 2003 6.893 UI Design and Implementation 6Models• 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 notesA 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


View Full Document

MIT 6 893 - Lecture Notes

Documents in this Course
Toolkits

Toolkits

16 pages

Cricket

Cricket

29 pages

Quiz 1

Quiz 1

8 pages

Security

Security

28 pages

Load more
Download Lecture Notes
Our administrator received your request to download this document. We will send you the file to your email shortly.
Loading Unlocking...
Login

Join to view Lecture Notes and access 3M+ class-specific study document.

or
We will never post anything without your permission.
Don't have an account?
Sign Up

Join to view Lecture Notes 2 2 and access 3M+ class-specific study document.

or

By creating an account you agree to our Privacy Policy and Terms Of Use

Already a member?