--------------------------------------------------------------------------- 8. User Interface Design -- Notes from UI Hall of Shame --------------------------------------------------------------------------- Is there progress? John Winters sent along a series of screen prints illustrating the useless progress meters implemented in Microsoft's Outlook . When dealing with a single message, the application displays a 2-state progress bar: the program is either busy, or it's not. Retrieving a message with a 340KB attachment over a modem connection typically takes 1 minute and 45 seconds. During that time, the progress meter is shown at its maximum value, rather than displaying the relative progress of the retrieval (something progress meters are supposed to do). The likely result of this misimplementation is that the user will conclude the computer has yet again locked-up, and will perform a three-finger salute to get back to work. --------------------------------------------------------------------------- Now, that’s progress! This example was taken from the installation of Drawing Board LT , a shareware CAD program. During the course of the installation, several hundred files are copied to your hard drive. Rather than indicate the progress of the entire installation, the authors decided that it was more important to indicate the installation progress of each file. The end result of this design descision is that the user has absolutely no idea as to the state of the installation. Most of the files are small (less than 10KB), causing the filename to be overwritten with such rapidity that it is impossible to read the name of the file. That's not too much of a problem, since ... well, "Who cares about the names of the files as they are installed?! "The more shameful aspect of the installation is that the fluorescent green progress meter becomes a completely useless distraction. It flickers with such rapidity that you are forced to turn your eyes away, or better yet, leave the room before installing the software. --------------------------------------------------------------------------- I want them all! In the Font dialog box for Word 97 the user can set text attributes using an array of checkboxes; no problem there. However, there a 4 pairs of mutually exclusive options listed: strikethrough/double strikethrough, subscript/superscript, emboss/engrave, and all caps/small caps. the controls look like checkboxes but behave like option buttons. Obviously, using option buttons would have spoiled the aesthetics of the control group. --------------------------------------------------------------------------- Yes, I want that print thing too While checkboxes typically provide the means by which to specify options, Click & Print uses checkboxes as indicators and as command buttons. When the user clicks on a checkbox in Click & Print , a dialog box is opened into which he or she enters information to be printed on a certificate. The checkbox only becomes checked if the user clicks the OK button on the related dialog box. Setting the date is particularly unusual. The program defaults to the current date, but the only way to get the date checkbox checked is to click it, then click the OK button in the Date dialog. The most problematic aspect of the design is evident when the user attempts to check the Print checkbox before he or she has checked all of the checkboxes above it: An error message is displayed, stating "The checklist is not complete. Are you sure you want to print?" Here's a lesson from GUI 101: Checkboxes are used to toggle an option on or off Command buttons are used to initiate actions. Don't let your confusion confuse the user. --------------------------------------------------------------------------- In Excel, “cut” doesn’t mean cut Select Cut from the Edit menu of just about any application and what happens? The selected text or object is removed (and a copy is placed in the clipboard for later use). This rule is so ingrained that the phrase "Cut and Paste" could be considered a cultural archetype: almost everyone over the age of four knows what it means. Unfortunately, the designers of Microsoft's Excel weren't familiar with the phrase. To them, "Cut" means "Leave it there", or at least, "Leave it there until I Paste it somewhere else." Upon selecting Cut, a moving border is drawn around the selection, which indicates, intuitively speaking, Nothing! Cut will not remove the selection until the user selects Paste at some later time. In Excel, "Cut" really means "Indicate the selection you might want to Move at some later time". In fact, after performing the Paste operation of the complete Cut and Paste sequence, the Undo command is labeled "Undo Move". By changing the rules, every new or occasional user of Excel is instantly perplexed when performing the Cut operation. The typical user will Cut, and Cut again, and perhaps Cut again in an attempt to understand what he or she has done wrong. They've just got to be chuckling about this one in Redmond. (Thanks to Steve Bliss for reminding us of this Excel feature) --------------------------------------------------------------------------- Fun with scrolling! Occasionally you'll come across an application that shows such complete disregard for established design principles and industry standards that you have to wonder if the developers have ever used a graphical user interface. This image illustrates a central design idiom used in PeopleSoft applications. A proper critique of PeopleSoft applications would require megabytes of storage, so for the time being we will simply focus on their novel use of scrollbars. Scrollbars in PeopleSoft applications are used as database navigation controls. In the illustration, clicking on the outer scrollbar would display the next category of awards, and clicking on the inner scroll bar would display the next award in the current category. Keep in mind, the frames do not scroll up and down; the information in each is simply replaced. PeopleSoft often nests scrollbars 3 or 4 deep, such that the user becomes absolutely dumbfounded not only as to how the information is arranged, but also as to how to navigate within a window. Scrollable forms are a sure sign of inexperience in graphical user interface design. These often result from the conversion of legacy applications to the Windows platform, or in the development of applications based on paper forms. Scrolling forms hide important information from the user, hide navigational aids and controls, and require more user inputs to get to the desired information. Unfortunately, visit any programming support forum, and you'll see an ever-increasing number of new programmers asking how to create scrollable forms. The only appropriate answer is, "You don't." --------------------------------------------------------------------------- More tabs please! To date, we consider this the definitive example of how not to design a tabbed dialog. The sheer number of tabs, combined with the use of iconic labels and the gratuitous use of graphics on the tabs themselves results in a veritable visual assault. Once your eyes recover from the initial assault, you may be able to spot another problem: the use of nested tabs (note that two separate tabs on the dialog are highlighted). MultiEdit's creator, Todd Johnson, wrote to us to state that the design of the options dialog was dictated by the complexity of the program: We have a complex product with a LOT of configurablity, so we end up with a complex configuration dialog, there really isn't anyway around that. --------------------------------------------------------------------------- Without tabs Actually there is. We've put together the following animation to illustrate one alternative design: The alternative offers a number of important advantages over the existing design: Option categories are presented in a consistent order The selection of one category does not alter the order of the others User has keyboard access to switch categories The use of distracting colors has been eliminated The use of distrating images on the tab headings and on the tabs themselves have been eliminated The use of embedded tabs has been eliminated While it is our belief that the proliferation of configuration options in MultiEdit has far exceeded the point of diminishing returns, the alternative design offers one important additional benefit: Additional categories can be added without impacting the design of the form or the user's ability to locate a category The result is a cleaner, more parsimonious dialog in which the user can much more rapidly locate and navigate to the information of interest. --------------------------------------------------------------------------- Helpful tips Tooltips were intended to provide descriptive information to help new users learn the functions of graphical toolbar buttons. When they are used for standard command buttons, they invariably elicit the following response from users: Duh! As shown in this image from Mindspring's Pipeline+ internet access application, rather than providing useful information to the user, the tooltips merely convey that the designer is, well...let's just say, intellectually challenged .Here's a rule that developers should keep in mind: People generally don't like to use stupid applications --------------------------------------------------------------------------- Stop, please One of our visitors send us a collection of images illustrating the use of a Stoplight Metaphor as it was being used in an application at his company. He wanted to know if we considered it material for the Interface Hall of Fame or the Interface Hall of Shame. Well, here we are. The "stoplights" are displayed in the lower right corner of the window. Their purpose is to indicate the user's progress while entering information in a complicated tabbed dialog box. Stoplight 1 relates to the first tab, Stoplight 2 relates to the second tab, and so on (anyone see a problem here?). The stoplight can be any of three colors: Yellow Some information has been entered on the tab Red Not all required information has been entered Green All required information has been entered While we found a number of problems with the general design of the form, there are some significant problems specifically related to the stoplight metaphor. Too much information . The stoplight metaphor requires the user to learn the meanings of three states, when only one is necessary. The only important indication to the user is that required information on a particular tab is missing. Thus, the interface is unnecessarily cluttered with three distracting colors, when only one is necessary. Conflicting messages . Notice in the image above that the "Post and Send" button is currently enabled, even though the stoplights indicate that required information has not been entered. Our guess is that the stoplight metaphor was developed to provide additional information above that provided by simply disabling the button; specifically, to indicate which tab required completion before the information could be sent. In the current implementation, the user is being simultaneously told that the form can and cannot be submitted. Labeling and Placement of the stoplights . The stoplights are labeled 1 through 6, yet the tabs are not numerically labeled. This will require the user to either physically or mentally determine the tab indicated by the number. Furthermore, the stoplights are located distant from the tabs they represent (the form is much larger than the image shown here), thereby increasing the cognitive burden on the user. We would suggest the following as an alternative, which provides a single "Required Information Needed" indicator, physically proximate to the tab requiring information: --------------------------------------------------------------------------- I can’t make up my mind Microsoft's WordPad can be infuriatingly stupid. This message was presented after the user has opened an existing text-only document, made some changes (none of which involved formatting changes), and attempted to save it. The user's first response to the message is one of alarm ('REMOVE ALL FORMATTING'?!), but after seeing it the first several hundred times, the response becomes one of anger: 'If I wanted to save it as a different file type, I would have selected Save As , and specified a different file type!' This occurs each time you save the document even if you haven't closed it between changes. --------------------------------------------------------------------------- Look at your designs We've come up with a new rule for program developers: You must at least LOOK at your designs before inflicting them onto your users. This image was taken from a tutorial released to members of a very large organization to instruct them in the use of a new software management system. As is clearly evident in the image, the choice of font, color, and background have made the tutorial almost completely unreadable, and therefore, absolutely useless. Try to read the text in the image, and note the intense effort required. The only excuse for such a pitiful combination of screen characteristics is that the developer never looked at his or her creation; as such, there is no excuse. --------------------------------------------------------------------------- Green good — red bad Sometimes the best intentions of the developer go unrealized. This image was borrowed from one particular application that hard-coded the colors of the text in the command buttons such that all affirmative buttons (OK, Yes, Open) have green-colored text and all negative buttons (Cancel, No, Close) have red-colored text. Unfortunately, doing so can cause a number of problems. In the first place, the background color of the button is determined by the Windows color preferences. As shown above, hard-coding the color of the text can make it difficult, and in some cases, impossible to read. Secondly, as shown in this example, Green/Red-Affirmative/Negative distinction may be inconsistent with a particular task. In western society, users may interpret the green label as indicating the "good" or proper response. As shown in this example however, deleting all records is more than likely not a good thing to do. Additionally, enforcing your particular color associations on your users may create some incompatibilities with cultural interpretations of color. In certain eastern societies, for example, red is considered an affirmative, or positive color. Subjecting these users to your color associations is an indication of cultural arrogance. Finally, a significant percentage of the population has some degree of color vision deficiency; the most prevalent of which, is the diminished ability to distinguish between red and green. Your attempts to provide unnecessary additional information will be lost on a significant portion of your users, and may become a source of their resentment. To be on the safe side, avoid using color as a means of interpretation, and be certain to avail yourself of the user's color preferences. These preferences are not merely the means by which the user "personalizes" his or her PC, but in many instances are selected to maximize the readability of the applications under specific lighting and display conditions. When you avail yourself of these settings, you can be certain that you will not risk the resentment of the user. --------------------------------------------------------------------------- Was that an error? Joost Vunderink sent along a couple of images illustrating a fundamental design problem with Easy CD Creator , a program used to write CD-ROMS. At the end of creating a CD, there are two possible outcomes: the process was successful, or 'some error occured' (a not infrequent result when writing CD-ROMS). The error message is displayed above. The successful message is displayed below. So what's is the problem? The dialogs are far too similar, and both utilize a red-heavy icon to represent success or failure. As Joost indicates: Each time I've finished a CD I see something red and I panic... but then it's alright after all. --------------------------------------------------------------------------- Uh … ok We came across this confidence-inspiring message in several areas of Microsoft's Visual Basic 5.0 . The first time it appeared, we took a chance and hit the OK button, which only had the effect of displaying the same message again. Clicking the Cancel button cleared the message and the program proceeded apparently as it should. --------------------------------------------------------------------------- Yes — I mean, no At the risk of offending our many Linux visitors, we have included this example of geekspeak sent to us by visitor Paul Winkler . The message is displayed when the user attempts to exit XFM , the "X-windows File Manager". The hapless user is faced with three rather ambiguous options, leading to such questions as: does "Continue" mean "continue using XFM" or "continue to exit"? Is "Cancel" somehow different from "Abort"? Isn't it about time someone complained about this? Actually, "Continue" means "continue to exit"; if you would rather not exit XFM , then you are expected to select either "Cancel" or "Abort". What's the difference? Apparently nothing. --------------------------------------------------------------------------- No, I don’t want to trash my disk! As a means of deleting files and documents, the Macintosh trashcan is a perfectly intuitive metaphor. Unfortunately, the designers decided to extend the trashcan metaphor to include the completely counterintuitive function of ejecting diskettes: drag an image of the diskette to the trashcan to eject it from the computer. The Macintosh simply took the trashcan metaphor too far. They imbued the trashcan with magical powers that are completely incompatible with the established metaphorical association of deleting files. As a result, new users express anxiety and dismay at the metaphor, and even experienced users express reluctance to use the metaphor: "I don't want to delete the files on the diskette, I just want the computer to spit it out." ---------------------------------------------------------------------------