Simple and Usable Web, Mobile, and Interaction Design Giles Colborne New Riders 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax) Find us on the Web at: www.newriders.com To report errors, please send a note to errata@peachpit.com New Riders is an imprint of Peachpit, a division of Pearson Education Copyright © 2011 by Giles Colborne Project Editor: Michael J Nolan Development Editor: Margaret Anderson/Stellarvisions Production Editor: Becky Winter Copyeditor: Gretchen Dykstra Proofreader: Gretchen Dykstra Indexer: Joy Dean Lee Book Designer: Mimi Heft Notice of Rights All rights reserved No part of this book may be reproduced or transmitted in any form by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior written permission of the publisher For information on getting permission for reprints and excerpts, contact permissions@ peachpit.com Notice of Liability The information in this book is distributed on an “As Is” basis without warranty While every precaution has been taken in the preparation of the book, neither the author nor Peachpit shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the instructions contained in this book or by the computer software and hardware products described in it Trademarks Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks Where those designations appear in this book, and Peachpit was aware of a trademark claim, the designations appear as requested by the owner of the trademark All other product names and services identified throughout this book are used in editorial fashion only and for the benefit of such companies with no intention of infringement of the trademark No such use, or the use of any trade name, is intended to convey endorsement or other affiliation with this book ISBN 13: 978-0-321-70354-5 ISBN 10: 0-321-70354-5 987654321 Printed and bound in the United States of America Download from WoweBook.com For my wife and children, Pey, Leah and Bea Download from WoweBook.com Thanks Writing this book was anything but simple, an irony that has not been lost on me Many people have worked long, hard hours to bring it to life Firstly, I have to thank my family, Pey, Leah, Bea and my parents, for putting up with me while I was writing it, for the ideas they gave me, and for making room for this in our lives The team at Peachpit have been fantastic Thanks to the book’s editor Margaret Anderson, who gave sage advice and vital encouragement throughout; Michael Nolan who took on this project, editor-in-chief Nancy Davis; Gretchen Dykstra for her eagle eye and can-do enthusiasm; Mimi Heft for her lovely design; Becky Winter and Danielle Foster for such hard work on production and Glenn Bisignani for bringing it to people’s attention My colleagues at cxpartners made a huge contribution to the writing of this book, in particular in patiently bashing the ideas into shape: Richard Caddick, Joe Leech, Verity Whitmore, Anna Thompson, Danielle Gould, Chui Tan, Walt Buchan, Neil Schwarz, Anthony Mace, Jesmond Allen, Fiz Yazdi, James Rosenberg, and Nik Lazell— great people to work with Advice and support from other authors was invaluable as I stepped outside my comfort zone Thank you Steve Krug, Kevlin Henney, Yang-May Ooi, Jason Cranford Teague, Louis Rosenfeld, Caroline Jarrett, and Whitney Quesenbery Download from WoweBook.com Thanks to all those people who helped me with inspirational interviews Naomi Pearce, Ken Case of Omni Group, Rich Siegel of Bare Bones Software, Jürgen Schweizer, Keith Lang, Barney Kirby, Mariana Cavalcanti, Bill Schallenberg, Luis Babicek, Ken Kellogg, Fran Dattilo, and all the folks at Marriott, Alan Colville, David Jarvis, and Pete Greenwood Thanks also to the people who gave me feedback and ideas throughout: Tyler Tate, Bonny Colville-Hyde, Dot Pinkney, Jon Tan, Donna Spencer, Dave Ellender, Ian Fenn, Matthew Keeler and the folks at the University of Bath and Bristol Usability Group, Brenda Bazylewski, and the dozens of other people who’ve contributed, helped, and inspired me Download from WoweBook.com Contents Part Why are we here? A story about simplicity The power of simplicity Increasing complexity is unsustainable Not that kind of simple Character 10 Fake simplicity 12 Know yourself 14 Part Setting a vision Two ways to describe what’s core 18 Get out of your office 20 What to look for 22 Three types of user 24 Why you should ignore expert customers 26 Design for the mainstream 28 What mainstreamers want 30 Emotional needs 32 Simplicity is about control 34 Choosing the right “what” 36 Describing the user experience 38 Putting it all together 40 World, character, plot 42 Extreme usability 44 ontents Download from WoweBook.com The quick and dirty way 46 Insight 48 Getting the right vision 50 Share it 52 Part Four strategies for simplicity Simplify this 56 The remote control 58 The four strategies 60 Part Remove Remove 64 How not to it 66 Focus on what’s core 68 Kill lame features 70 What if the user…? 72 But our customers want it 74 Solutions, not processes 76 When features don’t matter 78 Will it hurt? 80 Prioritizing features 82 Load 84 Decisions 86 CO N T E N T S • vii Download from WoweBook.com Distractions 88 Smart defaults 90 Options and preferences 92 When one option is too many 94 Errors 96 Visual clutter 98 Removing words 100 Simplifying sentences 102 Removing too much 104 You can it 106 Focus 108 Part Organize Organize 112 Chunking 114 Organizing for behavior 116 Hard edges 118 Alphabets and formats 120 Search 122 Time and space 124 Grids 126 Size and location 128 Layers 130 Color coding 132 Desire paths 134 Part Hide Hide 138 Infrequent but necessary 140 Customizing 142 ontents Download from WoweBook.com Automatic customization 144 Progressive disclosure 146 Staged disclosure 148 X doesn’t mark the spot 150 Cues and clues 152 Making things easy to find 154 After you hide 156 Part Displace Displace 160 Displacing between devices 162 Mobile vs desktop 164 Displacing to the user 166 What users best 168 Creating open experiences 170 Kitchen knives and pianos 172 Unstructured data 174 Trust 176 Part Before we go Conservation of complexity 180 Details 182 Simplicity happens in the user’s head 184 Photo Credits 187 Index 191 CO N T E N T S • ix Download from WoweBook.com Details The last time I visited Paris, I loaded an app onto my mobile phone to help me navigate the Metro I typed in the start and finish of my journey and the app calculated the best route, telling me which lines to use, which connections to make, and how long it would take It seemed perfect until I descended into the subway Then I realized I was missing one piece of information The app didn’t tell me which direction the trains would be going, which, in the Paris Metro, is indicated by the station at the end of the line I found myself standing in a busy tunnel as people pushed by while I scrolled around the tiny on-screen version of the Metro map trying to locate the end station for the first leg of my journey Simplicity often depends on details Missing details can have a catastrophic effect or cause irritation that builds over time When you’re fixing small details, the question that often comes up is: why bother? Is it really worth spending half a day fixing these drop-down menus to save a customer a few seconds? For mass-market software, it’s never just one customer: it’s thousands, sometimes millions of customers using the software repeatedly The few seconds of customer time quickly adds up to years A tiny frustration becomes a frequent annoyance Finding an extra half-day to devise a solution is a small problem compared to creating an army of irritated customers go Download from WoweBook.com Take Line 9— but which direction? Download from WoweBook.com Simplicity happens in the user’s head If you overload any machine, it starts to creak and slow down under the stress The same is true for people Give us too many things to remember and we’ll forget, too many tasks to juggle and we’ll drop one, too many decisions to make and we’ll freeze Making software usable means not exceeding your users’ capacity However, users always demand more detailed information, more choices, more stuff—it’s human nature So the tendency is to design usable experiences right up to that maximum—stopping just short of overloading the user Simple experiences don’t that They leave the user with plenty to spare What happens to all that “unused” capacity? A travel firm once asked my company to compare customers’ experiences of researching holidays online and through brochures Watching customers plough through websites, reviewing detailed information and options, we were struck by how tense and irritable they were The brochures were far simpler: some large photos of a resort, a few icons highlighting key features, and a table of prices When they looked through the brochures, customers were relaxed, imagining what the holiday could be like They enjoyed themselves Simple experiences leave users with enough capacity to think about how what they’re doing fits in with their lives A simple camera like The Flip lets users concentrate on capturing the moment, a simple DVD remote control allows users to focus on the movie Don’t try to fill the user’s mind with your design Designing for simplicity leaves your user enough room to fill in details from his or her life and create a richer, more meaningful experience go Download from WoweBook.com Download from WoweBook.com This page intentionally left blank Download from WoweBook.com Photo Credits Part Why are we here? Page 3, Photo courtesy iStockphoto, © Patrick Herrera, Image 10735105 Page 5, Photo courtesy iStockphoto, © Robert Kirk, Image 8431387 Page 7, Photo courtesy iStockphoto, © Skip O’Donnell, Image 4361374 Page 9, Photo courtesy iStockphoto, © Arpad Nagy-Bagoly, Image 8480195 Page 11, Photo: Streetfly JZ (orange chair) Page 13, Photo courtesy iStockphoto, © Nuno Silva, Image 1147364 Part Setting a vision Page 19, Photo courtesy iStockphoto, © Nicolas Loran, Image 11122181 Page 21, Photo courtesy iStockphoto, © Bart Coenders, Image 6228113 Page 23, Photo courtesy iStockphoto, © Scott Hortop, Image 9697386 Page 27, Photo thanks to Johan Visschedijk, 1000aircraftphotos.com Page 29, Photo: Iain J Watson Page 35, Photo courtesy iStockphoto, © Matthew Porter, Image 3391573 Page 37, Photo courtesy iStockphoto, © Michael Lok, Image 527184 Page 39, Photo courtesy iStockphoto, © Ola Dusegård, Image 11068369 Page 41, Photo courtesy iStockphoto, © Narvikk, Image 5521746 Page 43, Photo courtesy iStockphoto, © Quavondo, Image 8223968 Page 45, Photo courtesy iStockphoto, © Andrew Johnson, Image 7315616 Page 47, Photo courtesy iStockphoto, © Muhammet Gưktas, Image 7038165 Page 49, Photo courtesy iStockphoto, © Joshua Hodge Photography, Image 12818260 Page 51, Photo courtesy Ben Stanfield Page 53, Photo courtesy iStockphoto, © Santa Maria Studio, Image 11326374 P H OTO C R E D I T S • 187 Download from WoweBook.com Part Remove Page 67, Photo courtesy iStockphoto, © Grigory Bibikov, Image 10362465 Page 69, Photo Copyright Virgin Media Page 71, Photo courtesy iStockphoto, © Jami Garrison, Image 2252631 Page 73, Photo courtesy iStockphoto, © MBPHOTO, INC., Image 918432 Page 79, Photo courtesy iStockphoto, © Mark Wragg, Image 13558859 Page 81, Photo courtesy iStockphoto, © tolgakolcak, Image 7265127 Page 83, Photo courtesy iStockphoto, © Peter Garbet, Image 5742149 Page 87, Photo courtesy iStockphoto, © Conrad Lottenbach, Image 3131848 Page 101, Photo courtesy iStockphoto, © mphotoi, Image 3431237 Page 103, Photo thanks to DDB UK; Illustrator: Pete Mould Page 105, Photo: Ray Yuen Page 109, Photo courtesy iStockphoto, © malerapaso, Image 12566021 (picture frame) Page 109, Photo courtesy iStockphoto, © wsfurlan, Image 8528913 (mobile phone) Part Organize Page 115, Photo courtesy iStockphoto, © PLAINVIEW, Image 13334346 Page 123, Photo courtesy iStockphoto, © Luis Santana, Image 2329511 Page 125, Photo courtesy iStockphoto, © Thomas Arbour, Image 12878280 Page 129, Photo courtesy iStockphoto, © Anna Yu, Image 8162485 (basketball) Page 129, Photo courtesy iStockphoto, © Matteo Rinaldi, Image 12117545 (golf ball) Page 129, Photo courtesy iStockphoto, © Tomasz Pietryszek, Image 12133382 (tennis ball) Page 129, Photo courtesy iStockphoto, © Chris Scredon, Image 7337356 (soccer ball) Page 131, Photo: Copyright Transport for London Page 133, Photo: Copyright Adam Wilson Page 135, Photo thanks to Andrew Skudder Part Hide Page 149, Photo courtesy iStockphoto, © James Pauls, Image 3098674 Page 155, Photo courtesy iStockphoto, © Steve Harmon, Image 1035401 Page 157, Photo courtesy iStockphoto, © Alina555, Image 4716967 redits Download from WoweBook.com Part Displace Page 165, Photo courtesy iStockphoto, © Matt Jeacock, Image 9316437 Page 169, Photo courtesy iStockphoto, © Neustockimages, Image 7418248 Page 171, Photo courtesy Honda PR Page 173, Photo courtesy iStockphoto, © Matt Jeacock, Image 13726223 Page 177, Photo courtesy iStockphoto, © René Mansi, Image 184532 Part Before we go Page 181, Photo © Ricky Leong Page 185, Photo courtesy iStockphoto, © Matt Jeacock, Image 12394740 P H OTO C R E D I T S • 189 Download from WoweBook.com This page intentionally left blank Download from WoweBook.com Index A C Adaptive Path, 14 Caddick, Richard, 84 Adobe Illustrator, 152–153 camcorders, Flip, 40 Amazon online checkout page, 94 shopping flexibility, 170 Apple autofocus feature, 180 focus capturing moments, 184 on most used features, 112 Apple Store, Tokyo, 104–105 recording and sharing, 36 data detectors, 175 simplicity of design, 4–5 HyperCard Stack Design Guidelines, 128 user experience description, 38 cameras, SLR digital cameras, 24 iPhone Cavalcanti, Mariana, 106 description, 46 character of simple products, 10 focusing camera, 180 Colville, Alan, 52, 68 original features, 64 Comic Life app, 154 RunKeeper app, 162–163, 176 complexity Things app, 32–34 conservation of, 180 iPod, 26, 180 versus effectiveness, 12–13 iTunes, 122 intranets, managers versus salespeople, Macintosh, 154, 180 Safari web browser, 88–89 website’s Tech Specs, 152 versus simplicity, installing printers, 2–3 unsustainability, B Basecamp (37signals), 64 usage instructions, 12 BBC, 144 constraints of simple product design, 18 Best Buy’s online checkout page, 94 control issues, 34 Bing versus Google searches, 10 The Co-operative Bank, 84–85 BlackBerry features, 64 Cultured Code, 50, 74 Blogger, 64 Braunstein, Ariel, INDEX • 191 Download from WoweBook.com D most frequently used, 112–113 Dattilo, Fran, 106 searching versus browsing, 122–123 DDB’s Volkswagen advertisement, 102–103 size, 128–129 design features, 56–59 See also simple products time and space, 124–125 displacing features, 60–61, 160–161 between devices/platforms, 162–165 multiple uses for features, 170–171 trust, 176–177 unstructured data, 174–175 use by mainstreamer or experts, 172–173 to users, 166–167 starting points, 112–113 users’ behaviors, 116–117 removing features, 64–65 compromising between customers’/designers’ needs, 74– 75 distractions, 88–89 extra text, 100–103 focusing on core experiences/ tasks, 68–69, 80–81 focusing on projects, 108–109 to users or devices, 168–169 focusing on solutions not processes, 76–77 hiding features, 60–61, 138–139 incorrect approaches, 66–67 core controls versus precision controls, 146–147 lightening users’ load, 84–85 criteria for hiding, 156 overburdening users’ decisionmaking, 86–87, 94–95 cues and clues, 152–153 poorly implemented features, 70–71 customizing automatically, 144–145 prioritizing features, 82–83 customizing to hide infrequently used features, 142–143 disclosure, progressive, 146–147 providing options and preferences, 92–93 providing smart defaults, 90–91 disclosure, staged, 148–149 versus removing too many features, 104–105 ease of finding, 154–155 versus satisfied users, 106–107 infrequently used but necessary, 140–141 simplifying sentences, 102–103 revealing when needed, 150–151 sources of errors, 96–97 insights, 48 testing with “what if the user wants to…?”, 72–73 organizing features, 60–61 versus usability, 78–79 alphabets versus formats, 120–121 visual clutter, 98–99 chunks, 114–115 sharing with stakeholders, 52 color coding, 132–133 usability versus simplicity, 44 desire paths, 134–135 users’ locations grids, 126–127 hard-edged categories, 118–119 believable worlds with plot and characters, 42–43 layers, 130–131 for homes, 22 locations, 128 for offices, 22 ndex Download from WoweBook.com for outdoors, 22 autofocus feature, 180 world/natural environment, 18–21 focus visions, 40, 52 capturing moments, 184 dictionary feature, 150–151 displacing design features, 60–61, 160–161 between devices/platforms, 162–165 multiple uses for features, 170–171 trust, 176–177 unstructured data, 174–175 use by mainstreamer or experts, 172–173 to users, 166–167 to users or devices, 168–169 Don’t Make Me Think! A Common Sense Approach to Web Usability, 100 DVD remote controls, 56–59 displacing features, 60–61, 160–161 hiding features, 60–61, 138–139 organizing features, 60–61 chunking features, 114–115 most frequently used, 112–113 starting points, 112–113 removing features, 60–61 on most used features, 112 recording and sharing, 36 simplicity of design, 4–5 user experience description, 38 Ford, Henry, 28 Form, Function and Design, 10 G goals of simple product design, 18 Google Advanced Search, 146–147, 152 versus Bing searches, 10 complex technology for simple use, search simplicity, 122 Grillo, Paul Jacques, 10 Guardian online magazine, 126 H Hamilton, Rebecca W., 78 hiding design features, 60–61, 138–139 focusing on necessities, 64–65, 108 core controls versus precision controls, 146–147 prioritizing features, 82 criteria for hiding, 156 cues and clues, 152–153 E customizing Elise (Lotus), 64 automatically, 144–145 emotional needs, 32–34 hiding infrequently used features, 142–143 expert users, 24 core controls versus precision controls, 146–147 versus mainstream users, 30 versus other users, 26–27 F Facebook, 142, 180 fake simplicity, 12–13 disclosure progressive, 146–147 staged, 148–149 ease of finding, 154–155 infrequently used but necessary, 140–141 revealing when needed, 150–151 Hilton, Paris, 38, 40 Flip camcorders, 40 INDEX • 193 Download from WoweBook.com The Human Interface, 154 versus expert users, 30 HyperCard Stack Design Guidelines, 128 versus other users, 28–29 setting options and preferences, 93 I iGoogle, 142 Marriott website’s home page, 106–107 Illustrator (Adobe), 152–153 Merholz, Peter, 14 Insanely Great: The Life and Times of Macintosh, the Computer that Changed Everything, 50 Microsoft iPhone (Apple) focusing camera, 180 original features, 64 RunKeeper app, 162–163, 176 iPod (Apple), 26, 180 iTunes (Apple), 122 Iyengar, Dr Sheena S., 86 Office 2000, 144–145 SharePoint, 64 Word, 142–143 Model T Ford, 28 Moffett, Jack, 70 N navigation bars, 127 New York Times, 150–151, 154 Nokia, 64 J Jarvis, David, 70 Jobs, Steve, 46, 50–51 K Kaplan, Jonathan, Krug, Steve, 100 O Office 2000 (Microsoft), 144–145 On Writing Well, 40 organizing design features, 60–61 alphabets versus formats, 120–121 chunks, 114–115 color coding, 132–133 L Lang, Keith, 154 desire paths, 134–135 Lanham, Richard, 102 grids, 126–127 Law of Conservation of Complexity, 180 hard-edged categories, 118–119 Lepper, Dr Mark R., 86 layers, 130–131 Levy, Steven, 50 locations, 128 Lexus website, 90–91 most frequently used, 112–113 London Tube map, 130–132, 180 searching versus browsing, 122–123 Lotus Elise, 64 size, 128–129 starting points, 112–113 M time and space, 124–125 Macintosh (Apple), 154, 180 users’ behaviors, 116–117 MacRumors blog commenters, iPod, 26 mainstream users, 8, 24 core controls versus precision controls, 146–147 P Paris Metro navigation, 182–183 Personal Video Recorder (PVR), 68–69 ndex Download from WoweBook.com personality of simple products, 10 simplifying sentences, 102–103 Peugeot’s website, 118 sources of errors, 96–97 Pogue, David, testing with “what if the user wants to…?”, 72–73 PVR (Personal Video Recorder), 68–69 versus usability, 78–79 R visual clutter, 98–99 Raskin, Jef, 154 Revising Prose, 102 remote DVD controls, 56–59 RIM, 64 displacing features, 60–61, 160–161 RunKeeper app, 162–163, 176 hiding features, 60–61, 138–139 Rust, Roland T., 78 organizing features, 60–61 chunking features, 114–115 S most frequently used, 112–113 Safari web browser (Apple), 88–89 starting points, 112–113 Schweizer, Jürgen, 50, 74 removing features, 60–61 Things app, 32 focusing on necessities, 64–65, 108 Shaker versus Panton chairs, 10 prioritizing features, 82 SharePoint (Microsoft), 64 removing design features, 64–65 compromising between customers’/ designers’ needs, 74–75 distractions, 88–89 extra text, 100–103 focusing on core experiences/tasks, 68–69, 80–81 on projects, 108–109 on solutions not processes, 76–77 simple products See also design features changes, importance versus feasibility, 14–15 character and personality, 10 descriptions concise, clear, and complete, 46 experiences, 44 one-line, 18 dissatisfaction with complexity, incorrect approaches, 66–67 fake simplicity of interfaces, 12–13 lightening users’ load, 84–85 guidelines, 18 overburdening users’ decisionmaking, 86–87, 94–95 needs poorly implemented features, 70–71 prioritizing features, 82–83 providing options and preferences, 92–93 smart defaults, 90–91 versus removing too many features, 104–105 control issues, 34 emotional, 32–33 of self and customers, 14–15, 36 strategies for achieving, Skitch app, 154 Slashdot blog commenters on iPods, 26 Sless, David, 108 Standish Group poll, 64 versus satisfied users, 106–107 INDEX • 195 Download from WoweBook.com strategies for simplicity, needs DVD remote controls, 56–59 for details, 182 displacing buttons, 60–61 emotional, 32–34 hiding buttons, 60–61 for simplicity, 184 organizing buttons, 60–61 self-knowledge, 14–15 removing buttons, 60–61 willing adopters, 24 SUV principle, versus other users, 28 world/natural environment, 18–21 T homes, 22 Ta-da List (37signals), 174 interruptions, 22–23 Telewest, 52, 68–69 offices, 22 Tesler, Larry, 180 outdoors, 22 Things app, 32–34 37signals V Basecamp, 64 Volkswagen advertisement, 102–103 Ta-da List app, 174 VW Beetle (original), Thompson, Debora Viana, 78 to-do list apps, 32–34, 174 touch interfaces, 127 travel planning software, 166–169 Tufte, Edward, 98 TUI Ski, 70 Tumblr’s blog service, 64, 180 W Whac-A-Mole game, 180–181 Which? magazine, 68 willing adopter users, 24, 28 Wired website, 126 wizards, fake simplicity, 12 Twitter, Word (Microsoft), 142–143 U Wroblewski, Luke, 50 unsustainable complexity, users experts, 24 core versus precision controls, 146 versus mainstreamers, 30 versus other users, 26–27 goals and constraints, 18 mainstreamers, 24 WordPress, 64 Y Yahoo, 50 YouTube movie clips, versus movies (feature films), Z Zhu, Erping, 88 Zinsser, William, 40 core versus precision controls, 146 versus expert users, 30 versus other users, 28 setting options and preferences, 93 ndex Download from WoweBook.com ... Simple and Usable Web, Mobile, and Interaction Design Giles Colborne New Riders 1249 Eighth Street Berkeley, CA 94710 510/524-2178 510/524-2221 (fax) Find us on the Web at: www.newriders.com... WoweBook.com Download from WoweBook.com Character Simple doesn’t mean minimal Stripped-down designs can still have their own character and personality Take two simple chairs: a Shaker chair and. .. feel simple to use Sometimes you can create simple user experiences with simple technology, or simple management, but that’s not a certainty Google deploys complex technology and employs thousands