03 morgan kaufmann GUI bloopers 2 0 sep 2007 tủ tài liệu bách khoa

“GUI Bloopers 2.0 is an extremely useful book for any software developer or interaction designer If you have never made any of these mistakes, it’s because you have never designed a UI If anything, these bloopers are even more common now than when version 1.0 was published, so the need for the book has only increased.” —Jakob Nielsen Principal Nielsen Norman Group (www.nngroup.com) “This is the most entertaining design book I’ve read Jeff Johnson has once again done a fabulous job of reminding us about all the silly design mistakes we can make and giving us great advice on how to avoid them in our own designs.” —Jared M Spool Founding Principal, User Interface Engineering (www.uie.com) “The second edition of GUI Bloopers is that true rarity: a sequel to something great that’s even better than the original (Think Godfather II.) While Jeff could have settled for just updating the examples, as near as I can tell he’s rewritten nearly the entire book, and it shows The organization is terrific, the insights are easier to grasp, and above all, the writing is leaner If you ever picked it up in the past and ended up not plunking down your money, definitely take another look It’s gone from a great book to an excellent one.” —Steve Krug Advanced Common Sense (www.sensible.com) This page intentionally left blank GUI Bloopers 2.0 Common User Interface Design Don’ts and Dos The Morgan Kaufmann Series in Interactive Technologies Series Editors: ■ ■ ■ Stuart Card, PARC Jonathan Grudin, Microsoft Jakob Nielsen, Nielsen Norman Group GUI Bloopers 2.0: Common User Interface Design Don’ts and Dos Jeff Johnson Visual Thinking: Design for the Brain Colin Ware Moderating Usability Tests: Principles and Practice for Interacting Joseph Dumas and Beth Loring User-Centered Design Stories: Real-World UCD Case Studies Carol Righi and Janice James Sketching User Experience: Getting the Design Right and the Right Design Bill Buxton Text Entry Systems: Mobility, Accessibility, Universality Scott MacKenzie and Kumiko Tanaka-ishi Letting Go of the Words: Writing Web Content that Works Janice “Ginny” Redish Personas and User Archetypes: A Field Guide for Interaction Designers Jonathan Pruitt and Tamara Adlin Cost-Justifying Usability Edited by Randolph Bias and Deborah Mayhew User Interface Design and Evaluation Debbie Stone, Caroline Jarrett, Mark Woodroffe, and Shailey Minocha Rapid Contextual Design Karen Holtzblatt, Jessamyn Burns Wendell, and Shelley Wood Voice Interaction Design: Crafting the New Conversational Speech Systems Randy Allen Harris Understanding Users: A Practical Guide to User Requirements: Methods, Tools, and Techniques Catherine Courage and Kathy Baxter The Web Application Design Handbook: Best Practices for Web-Based Software Susan Fowler and Victor Stanwick The Mobile Connection: The Cell Phone’s Impact on Society Richard Ling Information Visualization: Perception for Design, 2nd Edition Colin Ware Interaction Design for Complex Problem Solving: Developing Useful and Usable Software Barbara Mirel The Craft of Information Visualization: Readings and Reflections Written and edited by Ben Bederson and Ben Shneiderman HCI Models, Theories, and Frameworks: Towards a Multidisciplinary Science Edited by John M Carroll Web Bloopers: 60 Common Web Design Mistakes, and How to Avoid Them Jeff Johnson Observing the User Experience: A Practitioner’s Guide to User Research Mike Kuniavsky Paper Prototyping: The Fast and Easy Way to Design and Refine User Interfaces Carolyn Snyder GUI Bloopers 2.0 Common User Interface Design Don’ts and Dos Jeff Johnson UI Wizards, Inc AMSTERDAM • BOSTON • HEIDELBERG • LONDON NEW YORK • OXFORD • PARIS • SAN DIEGO SAN FRANCISCO • SINGAPORE • SYDNEY • TOKYO Morgan Kaufmann Publishers is an imprint of Elsevier Publisher Executive Editor Publishing Services Manager Senior Production Editor Assistant Editor Production Assistant Cover Design Cover Illustration Composition Copyeditor Proofreader Indexer Interior printer Cover printer Denise E.M Penrose Diane Cerra George Morrison Dawnmarie Simpson Mary E James Lianne Hong Dennis Schaefer Melissa Walters SPi Valerie Koval Phyllis Coyne et al Proofreading Service Broccoli Information Management Sheridan Books Phoenix Color, Inc Morgan Kaufmann Publishers is an imprint of Elsevier 30 Corporate Drive, Suite 400, Burlington, MA 01803, USA This book is printed on acid-free paper © 2008 by Elsevier Inc All rights reserved Designations used by companies to distinguish their products are often claimed as trademarks or registered trademarks In all instances in which Morgan Kaufmann Publishers is aware of a claim, the product names appear in initial capital or all capital letters Readers, however, should contact the appropriate companies for more complete information regarding trademarks and registration No part of this publication may be reproduced, stored in a retrieval system, or transmitted in any form or by any means—electronic, mechanical, photocopying, scanning, or otherwise—without prior written permission of the publisher Permissions may be sought directly from Elsevier’s Science & Technology Rights Department in Oxford, UK: phone: (+44) 1865 843830, fax: (+44) 1865 853333, E-mail: permissions@elsevier.com You may also complete your request online via the Elsevier homepage (http://elsevier.com), by selecting “Support & Contact” then “Copyright and Permission” and then “Obtaining Permissions.” Library of Congress Cataloging-in-Publication Data Johnson, Jeff, Ph D GUI bloopers 2.0 : common user interface design don’ts and dos / Jeff Johnson p cm Originally published: San Francisco : Morgan Kaufmann Publishers, under title: GUI bloopers, 2000 Includes bibliographical references and index ISBN 978-0-12-370643-0 (pbk : alk paper) Graphical user interfaces (Computer systems) I Title QA76.9.U83J63 2007 005.4'37–dc22 2007012860 ISBN: 978-0-12-370643-0 For information on all Morgan Kaufmann publications, visit our Web site at www.mkp.com or www.books.elsevier.com Printed in the United States of America 07 08 09 10 Contents Acknowledgments Introduction Chapter Chapter xiii First Principles Introduction Basic Principle 1: Focus on the users and their tasks, not on the technology Basic Principle 2: Consider function first, presentation later Basic Principle 3: Conform to the users’ view of the task Basic Principle 4: Design for the common case Basic Principle 5: Don’t distract users from their goals Basic Principle 6: Facilitate learning Basic Principle 7: Deliver information, not just data Basic Principle 8: Design for responsiveness Basic Principle 9: Try it out on users, then fix it! 8 18 26 32 35 37 41 45 48 GUI Control Bloopers 51 Introduction Using the wrong control Blooper 1: Confusing checkboxes and radio buttons Blooper 2: Using a checkbox for a non-ON/OFF setting Blooper 3: Using command buttons as toggles Blooper 4: Using tabs as radio buttons Blooper 5: Too many tabs Blooper 6: Using input controls for display-only data Blooper 7: Overusing text fields for constrained input Using controls wrongly Blooper 8: Dynamic menus Blooper 9: Intolerant data fields 52 53 53 62 65 67 70 77 84 88 89 94 vii viii Contents Blooper 10: Input fields and controls with no default Blooper 11: Poor defaults Blooper 12: Negative checkboxes Chapter Navigation Bloopers Introduction Not showing users where they are Blooper 13: Window or page not identified Blooper 14: Same title on different windows Blooper 15: Window title doesn’t match command or link Leading users astray and not showing the way Blooper 16: Distracting off-path buttons and links Blooper 17: Self-links Blooper 18: Too many levels of dialog boxes Poor search navigation Blooper 19: Competing search boxes Blooper 20: Poor search results browsing Blooper 21: Noisy search results Chapter Textual Bloopers Introduction Uncommunicative text Blooper 22: Inconsistent terminology Blooper 23: Unclear terminology Blooper 24: Bad writing Blooper 25: Too much text Developer-centric text Blooper 26: Speaking Geek Blooper 27: Calling users “user” to their face Blooper 28: Vague error messages Misleading text Blooper 29: Erroneous messages Blooper 30: Text makes sense in isolation but is misleading in the GUI Blooper 31: Misuse (or nonuse) of “…” on command labels 96 103 105 107 108 108 108 112 117 122 122 126 131 138 139 143 145 151 152 152 153 161 165 169 173 173 181 184 189 189 193 193 Contents Chapter Graphic Design and Layout Bloopers Introduction Bad layout and window placement Blooper 32: Easily missed information Blooper 33: Mixing dialog box control buttons with content control buttons Blooper 34: Misusing group boxes Blooper 35: Radio buttons too far apart Blooper 36: Labels too far from data fields Blooper 37: Inconsistent label alignment Blooper 38: Bad initial window location Troublesome typography Blooper 39: Tiny fonts Chapter Interaction Bloopers Introduction Deviating from task focus Blooper 40: Exposing the implementation to users Blooper 41: Needless restrictions Blooper 42: Confusable concepts Requiring unnecessary steps Blooper 43: Asking users for unneeded data Blooper 44: Asking users for random seeds Blooper 45: Pointless choice Burdening users’ memory Blooper 46: Hard to remember ID Blooper 47: Long instructions that go away too soon Blooper 48: Unnecessary or poorly marked modes Taking control away from users Blooper 49: Automatic rearrangement of display Blooper 50: Dialog boxes that trap users Blooper 51: “Cancel” doesn’t cancel Chapter Responsiveness Bloopers Introduction Common responsiveness bloopers ix 197 198 198 198 208 212 217 220 226 228 232 232 239 240 241 241 242 246 250 250 256 258 264 264 267 269 277 277 281 288 293 294 294 Index misleading, 189–196 erroneous messages, 189–192 misuse/nonuse of … (ellipsis), 193–196 misuse/nonuse of … (ellipsis), 184–189 text makes sense in isolation but not in GUI, 193 nontabular, 207 overview, 152 size of, 235 strings, duplicated, 161 uncommunicative text, 152–173 bad writing, 165–169 inconsistent terminology, 153–161 too much text, 169–173 unclear terminology, 161–165 text boxes, scrolling, 82–84 text fields See also input fields/controls with no default, 97–98, 101 text fields (continued) noneditable, 78 overusing for constrained input, 84–88 alternatives, 86–88 excuse, 84–85 TTY-to-GUI conversions, 85–86 text insertion point, 157 “thumbs down”/“thumbs up” symbol, time compliance monitoring, 321–322 predicting, 324–325 time constants, 304–306 time management, dynamic, 320–325 monitoring event queues, 321 monitoring time compliance, 321–322 predicting completion time, 322–324 predicting time compliance, 324–325 timely feedback, 326 titles not matching commands/ links, 117–121 allowing commands to set titles, 121 common cause, 118 in desktop applications, 117–118 on Web, 118–120 when appropriate, 120–121 same on different windows, 112–117 ignorance of duplicate titles, 114–115 message files, 116 only application name shown, 112–113 special cases, 116–117 title uniqueness, 116 unedited titles on copied code, 113–114 when same title fits both, 115 toaster modes, 273 toggles, 54, 65–67 type hierarchy, 23 typography, 232–238 U Ullman, Ellen, 335–336 uncommunicative text, 152–173 bad writing, 165–169 inconsistent terminology, 153–161 too much text, 169–173 unclear terminology, 161–165 usability testing, 48–50, 341–347, 368–369, 383–388 Agile/XP methods, 341–342 allowing time for, 49, 345–346 budgets, 346, 387–388 development stages, 346 formality of, 50, 384–385 goals, 49–50 grading designers, 347 ignoring results, 347 implementation stages, 50, 383–384 as luxury, 344–345 need for, 342–344 participants, 346–347 predevelopment, 385–387 on slow Internet connections, 372 on slower computers, 372 405 surprises, 48–49 usage policies, 83 user analysis, 375 user-centered design (UCD), 354–355 users, 9–12, 198–199 adaptability, 334 asking for unnecessary seed values, 256–258 games, 257–258 giving only control, 257 variable intervals, 257 asking for unneeded data, 250–256 optional data, 253 repeated entry, 250 repeated logins, 253–254 unnecessary questions, 250–252 burdening memory of, 264–277 authorization identification, 264–267 long instructions, 267–269 modes, 269–277 changing modes, 272–273 characteristics of, 10 consistency, 41 control of screen, 43–44, 281 deciding who they are, 10 distraction of, 35–37 extra problems, 36 process of elimination, 36–37 experience, 10–11, 362–364 exposing implementation to, 241–242 convenience, 242 focusing user interfaces on tasks, 242 focusing attention of, 199–200 font size letting adjust, 235–236 testing on, 236–238 getting to know, 179 input acknowledging, 310–311 treating like machine input, 301, 309 leading astray, 122–138 distracting off-path buttons, 122–126 406 Index users (continued) distracting off-path links, 122–126 self-links, 126–131 too many levels of dialog boxes, 131–138 learning about, 11 not showing where they are, 108–121 pages not identified, 108–112 same title on different windows, 112–117 window title doesn't match command or link, 117–121 windows not identified, 108–112 number of, 33–34 personas, 12 point of view of, 26–32 naturalness, 27–29 power versus complexity, 30–32 program internals, 30 vocabulary, 29 profiles of, 12 referring to customers as, 181–183 taking control from, 277–291 automatic rearrangement of display, 277–281 Cancel buttons, 288–291 dialog boxes, 281–287 testing lexicons on, 160 testing terminology on, 164–165 translating error messages for, 189 V verbs, turning into nouns, 178–179 vibration, using as prompts, 207 visual hierarchies, 204, 376 vocabulary, 29, 375 W Web companion site to book, 5–6 control of font size on, 236 providing timely feedback on, 316 responsiveness on, 47 titles don't match commands/ links, 118–120 unidentified pages, 108–112 widgets, 52, 373 windows child, 230 group boxes around, 214–215 hierarchy, 137 not identified, 108–112 parent, 230 placement, 228–232 consideration of type of window, 231 deciding locations, 231 displaying all at same coordinates, 228–229 displaying subordinates in middle of parents, 229–230 displaying subordinates off-screen, 230–231 general heuristics, 232 primary, 375 rules, 232 same title on different, 112–117 ignorance of duplicate titles, 114–115 message files, 116 only application name shown, 112–113 special cases, 116–117 title uniqueness, 116 unedited titles on copied code, 113–114 when same title fits both, 115 secondary, 375 titles don't match commands/ links, 117–121 allowing commands to set titles, 121 common cause, 118 in desktop applications, 117–118 on Web, 118–120 when appropriate, 120–121 titles, duplicate, 115–116 Windows Media Player for Mac, error messages, 187 wizards, 289, 376 work-ahead, 318 writing, 165–169 diction, 166–168 grammar, 166–168 inconsistent style, 165–166 punctuation, 166–168 skilled writers, 168 spell-checking, 169 spelling, 166–168 too much text, 169–173 cutting needless, 172 goals, 173 lengthy links, 170–171 verbosity, 169–170 X XP (Extreme Programming) methods, 341–342, 354–355 About the Author Jeff Johnson is President and Principal Consultant at UI Wizards, Inc., a product usability consulting firm that offers UI design, usability reviews, usability testing, and training He has worked in the field of Human-Computer Interaction since 1978 After earning B.A and Ph.D degrees from Yale and Stanford Universities, he worked as a user-interface designer and implementer, engineer manager, usability tester, and researcher at Cromemco, Xerox, US West, Hewlett-Packard Labs, and Sun Microsystems He has published numerous articles and book chapters on a variety of topics in Human-Computer Interaction and the impact of technology on society He frequently gives talks and tutorials at conferences and companies on usability and user-interface design He assisted in the design and evaluation of the Election Incident Reporting System, a Web-based system for reporting and voting problems, which was used to monitor the 2004 and 2005 U.S elections In addition to authoring GUI Bloopers and GUI Bloopers 2.0, he wrote Web Bloopers: 60 Common Design Mistakes and How to Avoid Them (2003) 407 This page intentionally left blank Web Appendix: Color Bloopers Blooper 71: Text hard to read on background Even large-font text is hard to read against a background that is patterned and/ or that contrasts poorly with the text color This blooper occurs mainly on the Web, but sometimes occurs in desktop applications and consumer appliances It has three common variations Variation A: Text on textured background The first variation is displaying text against a background pattern Content text at TugPegasis.org is displayed on a patterned background, making it hard to read (Figure 1) The Web site of the Association of International Glaucoma Societies, GlobalAIGS.org, also has text on a patterned background (Figure 2) This is ironic for an organization that focuses on a disease that impairs vision Figure TugPegasis.org: patterned background makes text hard to read Web Appendix: Color Bloopers Figure GlobalAIGS.org: patterned background makes text hard to read Variation B: Low contrast between text and background No one would expect users to be able to read text that is the same color as the background,1 but some designers expect users to read text that is almost the same color as the background The Hunt Museum’s Web site displays some pages in white text on a light tan background (Figure 3) Worse, links on this page are yellow—almost impossible to read Another example comes from Flashlight.com, the Web site of Koehler– Brightstar, an industrial flashlight and lamp company The site’s navigation menus use white text on light gray (Figure 4) Web designers sometimes make text the same color as the background Most users won’t see it, but search engines will find and use it to index the site, and blind users find it with screen readers and use it to navigate the page efficiently Blooper 71: Text hard to read on background Figure HuntMuseum.com: poor contrast between text and background makes the text difficult to read Figure Flashlight.com: insufficient contrast between text and background Variation C: Clashing colors Some pairs of colors clash Even if the contrast between colors is high, the legibility of the text is reduced when text and background colors clash FEGS.org’s navigation bar uses bright blue text on a bright red background, making it very hard to read (Figure 5) or even to look at for very long Web Appendix: Color Bloopers Figure FEGS.org: text and background colors clash badly, making the text hard to read Figure Lebeda.com: low-contrast text over patterned background All of the above Some Web sites and applications combine the variations of this blooper Lebeda Mattress Factory places white and blue text over a watery blue background pattern (Figure 6) Keller Williams Montana Realty’s Web site has text over a photograph, low contrast, and clashing colors (Figure 7) Blooper 71: Text hard to read on background Figure bozeman.yourkwoffice.com: hard to read text (A) Home page (B) Expanded subnavigation links Avoiding Blooper 71 To ensure that text is legible against its background, designers need only follow these guidelines: ● ● ● ● Use solid backgrounds: Don’t use patterned or textured backgrounds If you do, make them faint, like watermarks, and put unpatterned areas behind text Dark on light beats light on dark: Dark text on a light background is more legible than light text on a dark background due to perceptual “bleeding” from the background into the text Light text on a dark background works only if the contrast is great and the text is bold enough to withstand the “bleeding.” Avoid colors that clash: Don’t use red against blue, blue against yellow, green against magenta, or vice versa Black on white is ideal: For legibility, nothing beats black text on a white background Of course, legibility is not the only concern: GUIs— especially Web sites—would be too bland if all text were black on white Nonetheless, keep the ideal in mind when choosing text and background colors For text, darker is better; for backgrounds, lighter is better A mortgage calculator from the U.S Federal Reserve Bank formerly had a patterned background (Figure 8A) They recently replaced it with one having a white background (Figure 8B) Web Appendix: Color Bloopers Figure Federal Reserve Bank mortgage calculator (A) 2002 (B) 2007 Blooper 72: Relying on subtle color differences Blooper 72: Relying on subtle color differences Many applications and Web sites rely on subtle color differences to convey important information This causes problems for many users, for eight different reasons: Color blindness: Approximately 8% of men and slightly under 0.5% of women have a color perception deficit:2 difficulty discriminating certain pairs of colors [Wolfmaier, 1999] The most common form is red/green (Figure 9); other forms are much rarer Poor distinguishability of pale colors: For all people, the paler (less saturated) two colors are, the harder it is to tell them apart (Figure 10A) Reduced distinguishability of small color patches: The smaller or thinner objects are, the harder it is to distinguish their colors (Figure 10B) Text is often thin, so the exact color of text is often hard to determine The rise in popularity of small-screen handheld devices means smaller areas of color Diminished distinguishability of separated patches: The more separated color patches are, the more difficult it is to distinguish their colors (Figure 10C) Variation between color displays: Computer displays vary in how they display colors, due to different technologies, different driver software, or different color settings Something that looks yellow on one display may look beige on another Colors that are different on one may look the same on another Gray-scale displays: Although most displays these days are color, there are devices, especially small handheld ones, with gray-scale displays Figure These colors are difficult for red/green-colorblind people to distinguish (A) Dark red vs black (B) Blue vs purple (C) Light green vs white Figure 10 Factors affecting distinguishability of colors (A) Paleness (B) Size (C) Separation The common term is color “blindness,” but color “vision deficit,” “vision deficiency,” “vision defect,” “confusion,” and “weakness” are more accurate Color “challenged” is also used A total inability to see color is very rare Web Appendix: Color Bloopers Display angle: Some computer displays, particularly LCD ones, work much better when viewed straight on than when viewed from an angle When LCD displays are viewed at an angle, colors—and color differences—often are altered Ambient illumination: Strong light on a display washes out colors before it washes out light/dark areas, reducing color displays to gray scale, as anyone who has tried to use a bank ATM in direct sunlight knows In offices, glare and venetian-blind shadows can mask color differences Color as a navigation aid On the Web, the most common navigational use of color is to distinguish unfollowed links from already-followed ones In many Web sites, the “followed” and “unfollowed” colors are too similar The Federal Reserve Bank of Minneapolis (Figure 11) has this blooper Can you spot the two followed links?3 A few years ago, the online travel Web site ITN.net used color differences that were too subtle As customers traversed the steps of making a reservation, the site showed the current step in a very pale yellow (Figure 12) For any of the eight reasons described above, many users couldn’t see which step they were on ITN’s new site corrects the blooper (see Avoiding Blooper 72, below) Figure 11 MinneapolisFed.org: the difference in color between visited and unvisited links is too subtle Figure 12 ITN.net (2003): current step in airline reservation process marked using a subtle color Step is the current step Housing Units Authorized and House Price Index Blooper 72: Relying on subtle color differences Color in content The preceding examples of relying on subtle color differences were concerned with navigation in Web sites Color is also often used—and abused—to convey information in content The software product MoneyDance provides a graphical breakdown of household finances (Figure 13A) Red/green colorblind users cannot distinguish the blue from the purple or the green from the khaki This can be approximated by reducing the graph to gray scale (Figure 13B) Figure 13 MoneyDance (A) Graph uses colors some users can’t distinguish (B) Gray-scale version 10 Web Appendix: Color Bloopers Avoiding Blooper 72 To avoid UI designs that rely on subtle color differences, follow one or more of these rules: Don’t rely solely on color Use color redundantly with other cues If you use color to mark something, mark it another way as well Apple’s iPhoto uses both color and a symbol to distinguish “smart” photo albums from regular ones (Figure 14) Avoid subtle color differences Make sure the contrast between colors is high (as long as the colors don’t clash) Colors should differ in saturation and brightness as well as in hue One way to test whether colors are different enough is to view them in gray scale [Hoffman, 1999] If you can’t distinguish the colors when they are rendered in grays, they aren’t different enough Don’t use color pairs that give colorblind people trouble That would be dark red vs black, dark red vs dark green, blue vs purple, light green vs white Don’t use dark reds, blues, or violets against any dark colors Instead, use dark reds, blues, and violets against light yellows and greens As mentioned above, ITN.net recently improved how it marks the current reservation step It uses color redundantly with shape (Figure 15) Another graph from the Federal Reserve Bank uses white and shades of green (Figure 16) This is a well-designed graph Any sighted person could read it, even with a gray-scale display Figure 14 Apple Computer iPhoto: uses color and a symbol redundantly to distinguish two types of albums Figure 15 Correction of blooper at ITN.net: current step highlighted in two ways, color and shape Blooper 72: Relying on subtle color differences 11 Figure 16 MinneapolisFed.org: graph uses color differences that are visible to all sighted people, on any display References Hoffman, P 1999 “Accommodating Color Blindness.” Usability Interface 6(2) (Also available at http://www.stcsig.org/usability/newsletter/9910color-blindness.html.) Wolfmaier, T 1999 “Designing for the Color-Challenged: A Challenge.” ITG Publication 2.1 (http://www.internettg.org/newsletter/mar99/accessibility_color_challenged.html.)