Tragic Design THE IMPACT OF BAD DESIGN AND HOW TO FIX IT Jonathan Shariat & Cynthia Savard Saucier Foreword by John Maeda Tragic Design The Impact of Bad Product Design and How to Fix It Jonathan Shariat and Cynthia Savard Saucier Beijing · Boston · Farnham · Sebastopol · Tokyo Tragic Design by Jonathan Shariat and Cynthia Savard Saucier Copyright © 2017 Jonathan Shariat, Cynthia Savard Saucier. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (http:// oreilly.com/safari). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Acquisitions Editor: Mary Treseler Indexer: Lucie Haskins Editor: Angela Rufino Cover Designer: Randy Comer Production Editor: Nicholas Adams Interior Designers: Ron Bilodeau and Monica Copyeditor: Rachel Head Kamsvaag Proofreader: Molly Ives Brower Illustrator: Rebecca Demarest Compositor: Nicholas Adams April 2017: First Edition. Revision History for the First Edition: 2017-04-07 First release See http://oreilly.com/catalog/errata.csp?isbn=0636920038887 for release details. The O’Reilly logo is registered trademarks of O’Reilly Media, Inc. Tragic Design and related trade dress are trademarks of O’Reilly Media, Inc. Many of the designations used by manufacturers and sellers to distin- guish their products are claimed as trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim, the designations have been printed in caps or initial caps. Although the publisher and author have used reasonable care in preparing this book, the information it contains is distributed “as is” and without warran- ties of any kind. This book is not intended as legal or financial advice, and not all of the recommendations may be suitable for your situation. Professional legal and financial advisors should be consulted, as needed. Neither the pub- lisher nor the author shall be liable for any costs, expenses, or damages result- ing from use of or reliance on the information contained in this book. 978-1-491-92361-0 [LSI] [ contents ] Foreword . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . v Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii Chapter 1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 The Interface that Killed Jenny . . . . . . . . . . . . . . . . . . . . . . . . . 1 The Role and Responsibilities of Designers . . . . . . . . . . . . 5 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9 Key Takeaways . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Chapter 2 Design Can Kill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Stupid Errors Versus Stupid Users . . . . . . . . . . . . . . . . . . . . 18 Case Study 1: Therac-25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Case Study 2: Ferry Crash in New York City . . . . . . . . . . . 27 Case Study 3: Ford Pinto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Case Study 4: Flight 148 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Alternatives to Modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Fault Tree Analysis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .48 Key Takeaways . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 Chapter 3 Design Can Anger . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Why Should You Care About Emotions? . . . . . . . . . . . . . . . 54 Characteristics of Impolite Technologies . . . . . . . . . . . . . . 55 Dark Patterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Key Takeaways . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Chapter 4 Design Can Sadden . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 The “Dribbblelisation” of Our Users . . . . . . . . . . . . . . . . . . 85 iii Inadvertent Cruelty . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 86 Self-Blame and Humiliation . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 “Power User” Features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90 Allowing for Abuse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 How to Prevent Causing Sadness . . . . . . . . . . . . . . . . . . . . . . 95 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 Key Takeaways . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Chapter 5 Design Can Exclude . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Accessibility . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Diversity, Inclusive Design, Design for All . . . . . . . . . . . 128 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .148 Key Takeaways . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Chapter 6 Tools and Techniques . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Gather as Much Data as You Can . . . . . . . . . . . . . . . . . . . . 153 Learn to Recognize Emotions . . . . . . . . . . . . . . . . . . . . . . . . 157 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163 Key Takeaways . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 164 Chapter 7 What We Can Do . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 What We All Can Do . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 What Designers Can Do . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 173 Chapter 8 They Are Doing Good . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Physical Good . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183 Emotional Good . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184 Inclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 Justice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 What Will You Do? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 Appendix A: Companies, Products, and Links . . . . . . . .189 Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 iv  |   CONTENTS Foreword Much of what Shariat and Savard Saucier write in this book, I might not have fully understood at all if I’d never left the academy . Leaving wonderful places like MIT and RISD to join the world of industry isn’t what good, pure “thought leaders” normally do, but all of my inter- actions with the new kinds of designers emerging in the technology industry made me think my thoughts weren’t really good enough any- more . So I’ve been busy filling up my brain with the many new expe- riences that I’ve gained by working in Silicon Valley at a thankfully late stage in my career . I say this with gratitude because I would have hated to have lived my entire life in the untouchable Ivory Tower with- out knowing what I do today . What have I learned about the future in Silicon Valley working in venture capital and advising technology com- panies? That the impact of Moore’s Law—the doubling of computing power every 18 months—is still making its way to people around the world . But the mitigating factor for technology’s real impact in people’s lives isn’t a technical one of speed, scale, or power . It isn’t a matter mea- sured in gigahertz, terabytes, or nanopixels—it is instead the pursuit of satisfying human needs for comprehensibility, ease of use, and emo- tional fit in our digital experiences today . It is a matter of purposefully designing superior solutions with technology that can empower and support humans . Where are the designers for these new directions to be found? I find that a lot of them are in the startup community—specifically, in com- panies whose CEOs and cofounders lead their ventures with a design- er’s penchant for disrupting the status quo while centering their busi- nesses’ objectives around what people want and need, rather than solely what new technologies can make possible . They are people like design- ers Brian Chesky and Joe Gebbia, who reframed the hospitality indus- try (https://www .airbnb .com) as a distributed network of bedrooms in people’s own houses to rent like hotel rooms . Or the nondesigner v CEOs of public companies like John Donahoe, who formerly led eBay Inc . to adopt design thinking at the executive level across his compa- nies . Or people like Marissa Vosper and Lauren Schwab, cofounders of tiny New York–based apparel startup Negative Underwear (https:// negativeunderwear .com), where technical fabrics are used to achieve fit and aesthetic needs that male lingerie designers have long overlooked . If you would like to learn more about this phenomenon, just look at the Design in Tech Reports (http://DesignIn .Tech) from the past three years; you’ll see that the impact of design in the technology industry is truly growing . But with great impact comes great failures too . The many tragedies described in this book are evident throughout the technology indus- try, and to see them summarized in the way that Shariat and Savard Saucier present them is truly disheartening . And unfortunately, because of the way that the design profession is taught in the academy today, driven primarily by aesthetics and in the absence of testing or other data gathering, we’ll likely see even more tragedies introduced through our apps, screens, and assorted IoT devices . For that reason, this book appears at an opportune time to encourage designers of all skill levels to break their honed Bauhausian biases, abandon their fine- tuned taste-o-meters, and bridge a path to the kind of vital, tragedy-pre- venting design that Shariat and Savard Saucier propose . I feel lucky that I get to put many of these principles into practice at Automattic (https://automattic .com) . What does design have to do with “inclusion”? I think that will become fully evident as you read through this book . Digital technology used to be available only to “computer nerds”—but now, because of smart- phones, digital technology is accessible to everyone . So it now needs to be considered from an inclusive viewpoint, encompassing the full vari- ety of human beings that live on this planet, and not just highly skilled computer types . This revolution is just beginning, and it’s exciting to have Shariat and Savard Saucier’s book to ground the growing move- ment of achieving truly inclusive design in the digital era . John Maeda is Global Head of Computational Design and Inclusion at Automattic Inc. He is a Strategic Advisor to venture capital firm Kleiner Perkins Caufield & Byers, has led research teams at the MIT Media Lab, and was the 16th president of the Rhode Island School of Design. His work is represented in the permanent collection of the Museum of Modern Art. vi  | Preface Bad design decisions can harm . However, the designers making these decisions aren’t always aware of the responsibilities that come with their profession . In medical school, the first fundamental principle that students are taught is Primum non nocere, or in plain English, “First, do no harm .” This immediately reinforces the concept that physicians have a lot of power over a person’s life . In contrast, the first thing we were taught in design school was how to draw well in 3D perspective . Our teachers were obsessed with timeless and beautiful designs . We would strive for polished design and were greatly concerned by aesthetic qualities . Accordingly, we were rewarded for following trends and using appeal- ing color palettes . Very rarely were we reminded that we have respon- sibilities and that what we design has a real impact on people’s lives . If we were lucky, we had a single three-hour-long class on user expe- rience…and the teacher probably called this a “Human–Computer Interaction” class . For example, in four years at university, neither Cynthia nor Jonathan was required to observe a single user interacting with a product they had designed! After school, new designers carefully select the best projects they’ve realized and put them into a portfolio . The rest, the bad and poten- tially dangerous projects, are dumped in an “archive” folder with the hope that no one will ever find it . If you’re like us, you are so ashamed by some of these solutions that you might even rename this folder to something completely unrelated, to make sure that no one ever sees it, even by mistake . Fortunately, this bad design work is forgotten and for- given! Not a single user will ever have to deal with the consequences of the questionable design decisions that we made as students . vii But by focusing on the beauty scale, and allowing for any mistakes to blissfully disappear into an archive folder, our teachers and mentors neglect to address what’s worse than getting a C– in a class . What actu- ally happens with failing projects in the real world? What can we learn from our mistakes, while the consequences of our inexperience are still trivial? We should be taught that, as designers, we have a lot of power to influence the way users interact with our products . And, to quote Spider-Man’s uncle: with great power comes great responsibility . Our teachers are not the only ones to blame . When is the last time you wondered if your work might have killed someone? This book wants to make sure no designer ever signs off on work without considering the consequences of their decisions . We want to give you tools and tech- niques, applicable in a real-life context, that will enable you to make fair decisions in difficult situations . Humans are complex beings with the capability of feeling a huge range of emotions . “Designing with empathy” is a trendy concept . There are a multitude of books, articles, and even design firms focused on this sub- ject . But what does that even mean? What emotions are we really design- ing for? As designers, developers, and product creators, we selectively choose which emotions to design for and which to ignore . We may say that we apply a user-centered design methodology, but often we don’t even get to talk with a single user before launching our product . The experiences we create affect real people in real situations . Unfortunately, it is not as popular to discuss and debate the responsibilities that come with the great power that we are entrusted with . We should learn from disciplines outside of our own . For example, in Canada and some places in the US, graduating engineers have a ritual of receiving an iron ring during their graduation ceremony . But what’s the story behind this ring? In the 1900s, during the construction of the Quebec Bridge, it col- lapsed, killing 75 people . The collapse was due to an error in judgment by the engineers who designed the bridge . There’s a myth that says the first rings were made from the iron of the collapsed bridge to symbol- ize humility and to serve as a reminder of their obligation, ethic, and responsibility to the public . viii  |