1Fall 2003 6.893 UI Design and Implementation 1Lecture 1: Introduction to UsabilityProf. Rob MillerMIT EECS2Fall 2003 6.893 UI Design and Implementation 2User Interface Hall of ShameSource: Interface Hall of ShameUsability is about creating effective user interfaces (UIs). Slapping a pretty window interface on a program does not automatically confer usability on it. This example shows why. This dialog box, which appeared in a program that prints custom award certificates, presents the task of selecting a template for the certificate. This interface is clearly graphical. It’s mouse-driven – no memorizing or typing complicated commands. It’s even what-you-see-is-what-you-get (WYSIWYG) – the user gets a preview of the award that will be created. So why isn’t it usable?The first clue that there might be a problem here is the long help message on the left side. Why so much help for a simple selection task? Because the interface is bizarre! The scrollbar is used to select an award template. Each position on the scrollbar represents a template, and moving the scrollbar back and forth changes the template shown.This is a cute but bad use of a scrollbar. Notice that the scrollbar doesn’t have any marks on it. How many templates are there? How are they sorted? How far do you have to move the scrollbar to select the next one? You can’t even guess from this interface.3Fall 2003 6.893 UI Design and Implementation 3User Interface Hall of ShameSource: Interface Hall of ShameNormally, a horizontal scrollbar underneath an image (or document, or some other content) is designed for scrolling the content horizontally. A new or infrequent user looking at the window sees the scrollbar, assumes it serves that function, and ignores it. Inconsistency with prior experience and other applications tends to trip up new or infrequent users.Another way to put it is that the horizontal scrollbar is an affordance for continuous scrolling, not for discrete selection. We see affordances out in the real world, too; a door knob says “turn me”, a handle says “pull me”. We’ve all seen those apparently-pullable door handles with a little sign that says “Push”; and many of us have had the embarrassing experience of trying to pull on the door before we notice the sign. The help text on this dialog box is filling the same role here.But the dialog doesn’t get any better for frequent users, either. If a frequent user wants a template they’ve used before, how can they find it? Surely they’ll remember that it’s 56% of the way along the scrollbar? This interface provides no shortcuts for frequent users. In fact, this interface takes what should be a random access process and transforms it into a linear process. Every user has to look through all the choices, even if they already know which one they want. The computer scientist in you should cringe at that algorithm.Even the help text has usability problems. “Press OKAY”? Where is that? And why does the message have a ragged left margin? You don’t see ragged left too often in newspapers and magazine layout, and there’s a good reason.On the plus side, the designer of this dialog box at least recognized that there was a problem – hence the help message. But the help message is indicative of a flawed approach to usability. Usability can’t be left until the end of software development, like package artwork or an installer. It can’t be patched here and there with extra messages or more documentation. It must be part of the process, so that usability bugs can be fixed, instead of merely patched.How could this dialog box be redesigned to solve some of these problems?4Fall 2003 6.893 UI Design and Implementation 4The Example, RedesignedSource: Interface Hall of ShameHere’s one way it might be redesigned. The templates now fill a list box on the left; selecting a template shows its preview on the right. This interface suffers from none of the problems of its predecessor: list boxes clearly afford selection to new or infrequent users; random access is trivial for frequent users. And no help message is needed.5Fall 2003 6.893 UI Design and Implementation 5More UI Hall of ShameSource: Interface Hall of ShameHere’s another bizarre interface, taken from a program that launches housekeeping tasks at scheduled intervals. The date and time look like editable fields (affordance!), but you can’t edit them with the keyboard. Instead, if you want to change the time, you have to click on the Set Time button to bring up a dialog box.This dialog box displays time differently, using 12-hour time (7:17 pm) where the original dialog used 24-hour time (consistency!). Just to increase the confusion, it also adds a third representation, an analog clock face.So how is the time actually changed? By clicking mouse buttons: clicking the left mouse button increases the minute by 1 (wrapping around from 59 to 0), and clicking the right mouse button increases the hour. Sound familiar? This designer has managed to turn a sophisticated graphical user interface, full of windows, buttons, and widgets, and controlled by a hundred-key keyboard and two-button mouse, into a clock radio!Perhaps the worst part of this example is that it’s not a result of laziness. Somebody went to a lot of effort to draw that clock face with hands. If only they’d spent some of that time thinking about usability instead.6Fall 2003 6.893 UI Design and Implementation 6Hall of Shame or Hall of Fame?Gimp is an open-source image editing program, comparable to Adobe Photoshop. Gimp’s designers made a strange choice for its menus. Gimp windows have no menu bar. Instead, all Gimp menus are accessed from a context menu, which pops up on right-click.This is certainly inconsistent with other applications, and new users are likely to stumble trying to find, for example, the File menu, which never appears on a context menu in other applications. (I certainly stumbled as a new user of Gimp.) But Gimp’s designers were probably thinking about expert users when they made this decision. A context menu should be faster to invoke, since you don’t have to move the mouse up to the menu bar. A context menu can be popped up anywhere. So it should be faster. Right?Wrong. With Gimp’s design, as soon as the mouse hovers over a choice on the context menu (like File or Edit), the submenu immediately pops up to the right. That means, if I want to reach an
View Full Document
Unlocking...