1Fall 2005 6.831 UI Design and Implementation 1 2Fall 2005 6.831 UI Design and Implementation 2 Suggested by Vishy VenugopalanThis Flash-driven web site is the Museum of Modern Art’s Workspheres exhibition, 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.Clearly there’s a metaphor in play here: the interface represents a wall covered with Post-it notes, and you can zoom in on any one of them.We can praise this site for at least one reason: incredible simplicity. The designer of this site was clearly striving for aesthetic appeal. Nothing unnecessary was included. Note the use of whitespace to group the list of categories on the right, and the simple heading highlight that gives a clue to the function of the list (clicking on a category name highlights all the icons in that category).Unfortunately, too much that was necessary was left out. Without any visible differentiation between the icons, finding something requires a lot of mouse waving. “Mystery navigation” was the term used by Vishy Venugopalan, who nominated this candidate for the UI Hall of Shame several years ago. It’s hard enough to skim the display for interesting objects to look at. But imagine trying to find an object you’ve seen before. It’s like that old card game Concentration, demanding too much recall from the user, rather than offering easy opportunities to recognize what you’re looking for.Frankly, if real Post-it notes were arranged on a wall like this, you’d probably have just as much trouble navigating it. So the choice of metaphor may be the essence of the problem.3Fall 2005 6.831 UI Design and Implementation 3 !"Suggested by Adam ChampyThis is the home page for Movado, a company that makes expensive, stylish watches. 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. So scanning the entire menu to look at all the options takes 16 seconds!Clearly this is even worse than MOMA’s approach, since it starts with an invisible menu interface and makes it inefficient to boot. More tellingly, MOMA only cares about your eyeballs, but Movado actually wants to sell you a watch. If you can’t figure out their menu, or lose patience with it, you may be headed elsewhere.One lesson you might draw from these examples is that Flash animation is bad, but that’s too simplistic. Flash is a powerful tool that can be used for good or ill.A better lesson might be that aesthetic appeal does not automatically confer usability. Effective graphic design is an important element of usability, but it isn’t the whole story by any means.4Fall 2005 6.831 UI Design and Implementation 4## Simplicity Contrast White space Balance AlignmentToday, we’re going to look at some specific guidelines for graphic design. These guidelines are drawn from the excellent book Designing Visual Interfaces by Kevin Mullet and Darrell Sano (Prentice-Hall, 1995). Mullet & Sano’s book predates the Web, but the principles it describes are timeless and relevant to any visual medium.Another excellent book is Edward Tufte’s The Visual Display of Quantitative Information. Some of the examples in this lecture are inspired by Tufte.5Fall 2005 6.831 UI Design and Implementation 5 Perfection is achieved not when there is nothing more to add, but when there is nothing left to take away. (Antoine de St-Exupery) Simplicity does not mean the absence of any decor It only means that the decor should belong intimately to the design proper, and that anything foreign to it should be taken away. (Paul Jacques Grillo) Keep it simple, stupid. (KISS) Less is more. When in doubt, leave it out. Okay, we’ll shout some slogans at you now. You’ve probably heard some of these before. What you should take from these slogans is that designing for simplicity is a process of elimination, not accretion. Simplicity is in constant tension with task analysis, information preconditions, and other design guidelines, which might otherwise encourage you to pile more and more elements into a design, “just in case.” Simplicity forces you to have a good reason for everything you add, and to take away anything that can’t survive hard scrutiny.6Fall 2005 6.831 UI Design and Implementation 6$ % &# Remove inessential elementsHere are three ways to make a design simpler.Reduction means that you eliminate whatever isn’t necessary. This technique has three steps: (1) decide what essentially needs to be conveyed by the design; (2) critically examine every element (label, control, color, font, line weight) to decide whether it serves an essential purpose; (3) remove it if it isn’t essential. Even if it seems essential, try removing it anyway, to see if the design falls apart.Icons demonstrate the principle of reduction well. A photograph of a pair of scissors can’t possibly work as a 32x32 pixel icon; instead, it has to be a carefully-drawn picture which includes the bare minimum of details that are essential to scissors: two lines for the blades, two loops for the handles. The standard US Department of Transportation symbol for handicapped access is likewise a marvel of reduction. No element remains that can be removed from it without destroying its meaning.We’ve already discussed the minimalism of Google and the Tivo remote in earlier classes. Here, the question is about functionality. Both Google and Tivo
View Full Document
Unlocking...