1Fall 2004 6.831 UI Design and Implementation 1 2Fall 2004 6.831 UI Design and Implementation 2 For today’s UI Hall of Fame and Shame, we’ll focus on the Rotate commands in photo browsers and drawing editors. These commands rotate an image by 90 degree increments, either clockwise or counterclockwise.In the Windows XP Image Viewer, the rotation commands are represented by toolbar buttons. Unfortunately, the icons on these buttons don’t work well. They’re very similar to each other, and the arrow doesn’t stand out (poor contrast). The icon tells a little story, showing before and after representations of a simplified abstract object. That’s not such a bad thing in general, but it obscures the important differences between the two icons and forces you to study them carefully to figure out what they mean. Worse, the mapping is backwards: the Rotate Right button (with the right-pointing arrow) actually appears on the left.The Snapfish web site (for storing and printing digital photo albums) has a neat solution to this problem. It does away with the notion of rotating entirely; instead, you just click on the side of the photo that you want to be on top. A little head-and-shoulders icon provides an affordance for clicking, while reminding about the heads-up orientation. This interface is neat because the controls are directly mapped to their effect (the side of the image that becomes the top). There’s no need to mention right or left, clockwise or counterclockwise, or 90 or 180 degrees. The rotation is done by direct manipulation of the image itself. The labels are unfortunate – particularly the unreadable upside-down label! -- but new idioms often need extra help at first.3Fall 2004 6.831 UI Design and Implementation 3 Meet expectations1. Match the real world2. Consistency & standards3. Help & documentation User is boss4. User control & freedom5. Visibility of system status6. Flexibility & efficiency Errors7. Error prevention8. Recognition, not recall9. Error reporting, diagnosis, and recovery Keep it simple10. Aesthetic & minimalist designRecall these 10 heuristics we discussed in an earlier lecture.4Fall 2004 6.831 UI Design and Implementation 4 Performed by an expert Steps Inspect UI thoroughly Compare UI against heuristics List usability problems Explain & justify each problem with heuristicsOne application of these 10 heuristics is a usability inspection process called heuristic evaluation. Heuristic evaluation was originally invented by Jakob Nielsen, and you can learn more about it on his web site. Nielsen has done a number of studies to evaluate the effectiveness of heuristic evaluation. Those studies have shown that heuristic evaluation’s cost-benefit ratio is quite favorable; the cost per problem of finding usability problems in an interface is generally cheaper than alternative methods.Heuristic evaluation is an inspection method. It is performed by a usability expert – someone who knows and understands the heuristics we’ve just discussed, and has used and thought about lots of interfaces. The basic steps are simple: the evaluator inspects the user interface thoroughly, judges the interface on the basis of the heuristics we’ve just discussed, and makes a list of the usability problems found – the ways in which individual elements of the interface deviate from the usability heuristics.The Hall of Fame and Hall of Shame discussions we have at the beginning of each class are informal heuristic evaluations. In particular, if you look back at previous lecture notes, you’ll see that most of the usability problems are justified by appealing to a heuristic.5Fall 2004 6.831 UI Design and Implementation 5 Justify every problem with a heuristic Too many choices on the home page (Aesthetic & Minimalist Design) Cant just say I dont like the colors List every problem Even if an interface element has multiple problems Go through the interface at least twice Once to get the feel of the system Again to focus on particular interface elements Dont limit yourself to the 10 heuristics Weve seen others: affordances, visibility, Fittss Law, perceptual fusion, color principles But the 10 heuristics are easier to compare againstLet’s look at heuristic evaluation from the evaluator’s perspective. That’s the role you’ll be adopting in the next homework, when you’ll serve as heuristic evaluators for each others’ computer prototypes.Here are some tips for doing a good heuristic evaluation. First, your evaluation should be grounded in known usability guidelines. You should justify each problem you list by appealing to a heuristic, and explaining how the heuristic is violated. This practice helps remove most of the (inevitable) subjectivity involved in inspections: You can’t just say “that’s an ugly yellow color.” (If it’s really yucky, you should pass that subjective opinion back to the design team, but you’ll be forced to identify it as subjective if you can’t find a heuristic to justify it.)List every problem you find. If a button has several problems with it – inconsistent placement, bad color combination, confusing label – then each of those problems should be listed separately. Some of the problems may be more severe than others, and some may be easier to fix than others. It’s best to get all the problems on the table in order to make these tradeoffs.Inspect the interface at least twice. The first time you’ll get an overview and a feel for the system. The second time, you should focus carefully on individual elements of the interface, one at a time.Finally, although you have to justify every problem with a guideline, you don’t have to limit yourself to the Nielsen 10. We’ve seen a number of specific usability principles that can serve equally well: affordances, visibility, Fitts’s Law, perceptual fusion, color guidelines, graphic design rules are a few. The Nielsen 10 are helpful in that they’re a short list that covers a wide spectrum of usability
View Full Document
Unlocking...