GUI Bloopers 2.0: Common User Interface Design DON’Ts and DO’sBy Jeff Johnson
Reviewed by David Dick, Washington D.C. Chapter/Usability SIG Member
Once upon a time, graphical user interfaces (GUI) were found only in operating systems for PCs. Today, we are confronted with a GUI when we use self-service checkout counters, when we pay bills online, and when we use our mobile phones, to name a few examples. Whether we can complete our transactions or accomplish our tasks depends on having a GUI that is easy to use and easy to understand. No doubt you have seen people confused with the touch-screen menu at the self-service checkout counter, or abandon their online shopping cart because the form is confusing. You may well have chosen a competitor’s brand of income tax preparation software because it is easier to use. Frustrated users mean lost income and products that fail in the market place. When GUIs fail, that’s when companies call a user interface designer like Jeff Johnson to change poor design into great design.
The first edition of GUI Bloopers heralded Johnson’s first work as an author. GUI Bloopers was intended for software developers who often work double as user interface designers, development managers, and new user interface designers. But GUI Bloopers also gained popularity among teachers and technical writers who wanted to understand the rules of good user interface design. Readers’ feedback, new software products and Web applications on the market inspired Johnson to write an updated version—GUI Bloopers 2.0.
GUI Bloopers 2.0 describes common user-interface mistakes found in today’s software products and services, and provides design rules and guidelines to avoid them.
GUI Bloopers 2.0 describes common user-interface mistakes found in today’s software products and services, and provides design rules and guidelines to avoid them. Johnson describes the design decisions that lead to misuse of controls, poor navigation, prose-riddled labels, bad design and layout, faulty interaction, and poor responsiveness. GUI Bloopers 2.0 is well illustrated with hundreds of examples from real products and online services, and stories from his own experience. To compare and contrast good and bad design, Johnson gives a “thumbs up” for good design and a “thumbs down” for a blooper.
The book contains the following chapters:
Chapter 1, First Principles, describes nine principles of product design: focus on the users and their tasks, not on the technology; consider function first and presentation later; conform to the users’ view of the task; design for the common case; don’t complicate the users’ task; facilitate learning; deliver information and not just data; design for responsiveness; and try it out on users and then fix it. Too often, the rush to deliver products means ignoring one or more of these principles. Johnson could have omitted this chapter and jumped right into describing GUI bloopers, but it provides an informational foundation for the discussion of bloopers.
Chapter 2, GUI Control Bloopers, is the first of six chapters dedicated to GUI design details. It describes the most common misuses of controls (i.e. checkboxes, tabs, input fields and buttons) and how to avoid them.
Chapter 3, Navigation Bloopers, emphasizes the importance of cues to let people know where they are, where they have been, and where they can go. This chapter describes the most common navigation mistakes and how to design effective navigation cues.
Chapter 4, Textual Bloopers, describes how inconsistent and unclear terminology, poor writing, jargon, and misleading text can confuse users. The typical GUI contains a lot of text, and if it’s poorly written, users can easily get lost. Peer reviews of the user interface by developers do not uncover these errors if they cannot recognize them as confusing. For example, an error message that describes a script error is informative to a developer but meaningless to a user. Johnson offers suggestions for educating development teams about good writing and acceptable terminology, and how to conduct reviews to identify textual bloopers.
Once the GUI controls have been added, properly labeled and any supplemental text has been written, it is time to decide on presentation: layout, colors, and text fonts. Chapter 5, Graphic Design and Layout Bloopers, presents guidelines on layout and window placement, colors, and text fonts. You will learn valuable presentation guidelines that will make user interface easier to read and understand. Unfortunately, Johnson was unable to provide examples of bloopers showing poor use of color because the book is printed in black and white. However, he covers color bloopers in a Web Appendix at http://www.gui-bloopers.com.
Chapter 6, Interaction Bloopers, is the first of two chapters that describe the mechanics that underlie the user interface. In this chapter, Johnson presents the user interface design principles that affect human perception, reading, information processing, and problem solving. The chapter clarifies why violating these principles results in a software product that is hard to learn and frustrating to use. Some of the design mistakes covered in this chapter are driven by business rules and processes mandated by clients and corporate policy. If those business rules and processes do not contribute to usability, this chapter will educate you on how to make an argument for improving interaction.
GUI Bloopers was intended for software developers who often work double as user interface designers, development managers, and new user interface designers.
Chapter 7, Responsiveness Bloopers, is the second chapter that deals with the mechanics that underlie the user interface design. In this chapter, Johnson describes the reasons for poor responsiveness and the design principles for improving responsiveness. Before I read this chapter, I assumed that sticky buttons, frozen cursors, and lagging scrollbars (to name a few) meant that my PC was too slow. After reading this chapter, I learned not to confuse responsiveness with performance.
Chapter 8, Management Bloopers, describes management misconceptions and mistakes that lead to poor product usability. Other authors have dedicated whole books to management-level problems that affect usability. Johnson could have easily omitted this chapter and listed those books as references. However, he does not just rant about why poor management leads to poor usability; he provides strategies and suggestions to educate management about usability.
GUI Bloopers 2.0 is supplemented by a Web site, http://www.gui-bloopers.com, which provides the following information:
- GUI Bloopers checklist: a check list of all of the types of bloopers in the book to facilitate checking software before release.
- Web Appendix: Color Bloopers: two bloopers about poor use of color that could not be included in the book because the book is not printed in color.
- More bloopers: additional bloopers not included in the book, starting with bloopers that did not make the “final cut”.
David can be reached at davidjdick2000 at yahoo dot com.