Preface
What Happened
My (Bill’s) first personal computer was a Radio Shack Color Computer (circa 1981)—complete with a chiclet-style keyboard. The first few months the main user interface was the command line, typing in COLOR BASIC code.
Later, an upgrade to an Apple IIe brought a nicer keyboard with lots of games. But the interface was basically the same. The command-line and text-driven menu systems ruled the day. When the IBM PC came on the scene it brought more of the same. Lotus 123, which was the state-of-the-art spreadsheet application at the time, was controlled by a set of cryptic keystrokes. Not much of a user experience.
Then an interface revolution started. The Macintosh arrived in 1984, and shortly after its introduction, I brought one home. The mouse opened the door to a brand-new world of interaction. Instead of having to learn archaic commands to navigate through text-based menus, interaction in this new environment happened naturally in a direct, intuitive manner.
OK, you are probably thinking, so what? That was 1984. This is now. What does this have to do with a book about designing web interfaces?
Everything.
For most of the history of the Web, sites and applications were marked by primitive interfaces—just like the early desktop era. Most sites were built from two events:
Clicking hyperlinks
Submitting forms
Try to create an interesting user experience from just those two events. And, to add insult to injury, every click and every submit was punctuated with a page refresh. Creating a seamless user experience was next to impossible.
Interestingly, the technologies have existed for many years to get around these limitations. But it was only after they became widely available across the most common browsers that developers could count on them in their everyday development. In 2004, Google launched Gmail and Google Maps using a set of techniques later dubbed Ajax by Jesse James Garrett.
The difference was dramatic. The Ajax-enabled Google Maps now interacted more like a desktop application with real-time pan-and-zoom—all with no page refresh. Mapquest, on the other hand, behaved like most other web applications at the time, refreshing the page each time the map was repositioned or zoomed. The contrast was clear between the old world of the Web and the new world as enabled by Ajax.
Why We Wrote This Book
While I got the chance to live through the first interface revolution for the desktop (even writing one of the first games for the Macintosh[2]), my coauthor Theresa Neil lived through the second revolution on the Web.
A few years ago our paths crossed at Sabre (parent company of Travelocity). Together we founded a user experience design team and worked to improve dozens of products, performing heuristic evaluations and participating in full web application redesigns. From that work, we distilled a number of user interface design patterns as well as anti-patterns (common mistakes to avoid).
From there I went to Yahoo! and got to play an active role in defining the Ajax interface revolution on the Web. One of my contributions at Yahoo! was to publicly launch the Yahoo! Design Pattern Library. As Yahoo!’s Ajax Evangelist, I met and brainstormed with many of Yahoo!’s best minds on what it means to take these new interactions and apply them to the unique context of the Web. As a result, over the last few years, I have given countless talks on this subject, sharing best practices with web developers and designers from around the world.
At the same time Theresa struck out as an interface designer in her own consultancy. In her work she has continued to refine the initial set of design patterns and principles while leading the design for 30+ live rich internet applications—enterprise applications as well as public-facing websites. These patterns have given Theresa and her clients a common vocabulary and a set of standards to work with for new application design and existing system redesign.
This book is an outgrowth of our experience—a distillation of the combined 30+ years that Theresa and I share. After repeated requests, we decided the best way to share this with a larger audience was to put the material into book form.
What This Book Is About
This book is not about information architecture, although you will find information architecture principles alluded to throughout it. And this book is also not about visual design, although you will find that the backdrop of good visual design is assumed throughout.
This book is about interaction design: specifically, interaction design on the Web. And even more specifically, about rich interaction design on the Web. It is a distillation of best practices, patterns, and principles for creating a rich experience unique to the Web.
By unique I mean that the Web comes with its own context. It is not the desktop. And while over time the lines between desktop and Web blur more and more, there is still a unique aspect to creating rich interactions on the Web. Editing content directly on the page (e.g., In-Page Editing, as we discuss in Chapter 1) borrows heavily from the desktop—but has its own unique flavor when applied to a web page. This book explores these unique rich interactions as set of design patterns in the context of a few key design principles.
Design Patterns
What do we mean by design patterns?
Christopher Alexander coined the term “patterns” in his seminal work A Pattern Language: Towns, Buildings, Construction (Oxford University Press) to catalog common architectural solutions to human activities. He described a pattern as:
...a problem which occurs over and over again in our environment, and then describes the core of the solution to that problem...
Patterns were later applied to software in the book Design Patterns: Elements of Reusable Object-Oriented Software (Addison-Wesley), by the Gang of Four (Erich Gamma, Richard Helm, Ralph Johnson, and John M. Vlissides). A few years later design patterns were extended to the realm of user interface design.[3]
It is the latter form of patterns that we present in this book: interaction design patterns. You will find 75+ patterns illustrating the most common techniques used for rich web interaction. Each design pattern is illustrated by examples from various websites. Since the patterns described are interactive, we use a generous amount of figures to explain the concept. We tease out the nuances for a given solution as well as identify patterns to be avoided (anti-patterns). Best practice sections call out suggestions along the way.
The patterns are presented in the context of six design principles, which form the framework for the book:
- Part I
As Alan Cooper states: “Where there is output, let there be input.” This is the principle of direct manipulation. For example, instead of editing content on a separate page, do it directly in context. Chapters 1–3 in this principle include patterns for In-Page Editing, Drag and Drop, and Direct Selection.
- Part II
While working on a redesign of Yahoo! 360 the designer, Ericson deJesus, used the phrase “light footprint” to describe the need to reduce the effort required to interact with the site. A primary way to create a light footprint is through the use of Contextual Tools. This principle explores the various patterns for these in Chapter 4, Contextual Tools.
- Part III
The page refresh is disruptive to the user’s mental flow. Instead of assuming a page refresh for every action, we can get back to modeling the user’s process. We can decide intelligently when to keep the user on the page. Ways to overlay information or provide the information in the page flow are discussed in Chapters 5 and 6, Overlays and Inlays, respectively. Revealing dynamic content is discussed in Chapter 7, Virtual Pages. In the last chapter of this section, Chapter 8, we discuss Process Flow, where instead of moving from page to page, we can create in-page flows.
- Part IV
Discoverability is one of the primary challenges for rich interaction on the Web. A feature is useless if users don’t discover it. A key way to improve discoverability is to provide invitations. Invitations cue the user to the next level of interaction. This section, including Chapters 9 and 10, looks at Static Invitations, those offered statically on the page, and Dynamic Invitations, those that come into play in response to the user.
- Part V
Animations, cinematic effects, and various other types of visual transitions can be powerful techniques. We explore engagement and communication in Chapter 11, looking at a set of the most common Transitional Patterns, and Chapter 12 is devoted to the Purpose of Transitions. A number of anti-patterns are explored as well.
- Part VI
A responsive interface is an intelligent interface. This principle explores how to make a rich experience by using lively responses. In Chapter 13, a set of Lookup Patterns is explored, including Live Search, Live Suggest, Refining Search, and Auto Complete. In Chapter 14, we look at a set of Feedback Patterns, including Live Previews, Progressive Disclosure, Progress Indication, and Periodic Refresh.
Who Should Read This Book
Designing Web Interfaces is for anyone who specifies, designs, or builds web interfaces.
Web designers will find the principles especially helpful as they form a mental framework, defining a philosophy of designing nuanced rich interactions. They will also find the patterns a welcome addition to their design toolbox, as well as find the hundreds of provided examples a useful reference. And of course the best practices should provide a nice checklist reminder for various interaction idioms.
Product managers will find the patterns and examples to be excellent idea starters as they think through a new business problem. Though this book does not provide programming solutions, web developers will nevertheless appreciate the patterns, as they can be mapped directly into specific code solutions. For everyone involved, the patterns form a vocabulary that can span product management, design, and engineering, which in the end forms the basis for clearer cross-team communication.
You’ll also find that whether you are just starting out or you are a grizzled veteran, the wealth of real-world examples in the context of design principles and patterns will be a benefit to your daily work.
What Comes with This Book
This book has a companion website (http://designingwebinterfaces.com) that serves as an addendum containing updated examples; additional thoughts on the principles, patterns, and best practices; and helpful links to articles and resources on designing web interfaces.
All of the book’s diagrams and figures are available under a Creative Commons license for you to download and use in your own presentations. You’ll find them at Flickr (http://www.flickr.com/photos/designingwebinterfaces/).
Conventions Used in This Book
This book uses the following typographic conventions:
- Italic
Used for example URLs, names of directories and files, options, and occasionally for emphasis.
- Bold text
Indicates pattern names.
Tip
This indicates a tip, suggestion, or general note.
Using Examples
You can find all of the figure examples on our companion Flickr site (http://flickr.com/photos/designingwebinterfaces). The figures are available for use in presentations or other derivative works provided you respect the Creative Commons license and provide attribution to this work. An attribution usually includes the title, author, publisher, and ISBN. For example: "Designing Web Interfaces, by Bill Scott and Theresa Neil, Copyright 2009 Bill Scott and Theresa Neil, 978-0-596-51625-3.”
If you feel your use of examples falls outside fair use or the permission given above, feel free to contact us at [email protected].
We’d Like to Hear from You
We have tested and verified the information in this book to the best of our ability, but you may find that features have changed or that we may have made a mistake or two (shocking and hard to believe). Please let us know about any errors you find, as well as your suggestions for future editions by writing to:
| O’Reilly Media, Inc. |
| 1005 Gravenstein Highway North |
| Sebastopol, CA 95472 |
| 800-998-9938 (in the United States or Canada) |
| 707-829-0515 (international or local) |
| 707-829-0104 (fax) |
We have a web page for this book where we list examples and any plans for future editions. You can access this information at:
| http://www.oreilly.com/catalog/9780596516253 |
You can also send messages electronically. To be put on the mailing list or request a catalog, send an email to:
| [email protected] |
To comment on the book, send an email to:
| [email protected] |
For more information about our books, conferences, Resource Centers, and the O’Reilly Network, see our website at:
| http://www.oreilly.com |
Safari Books Online
When you see a Safari® Books Online icon on the cover of your favorite technology book, that means the book is available online through the O’Reilly Network Safari Bookshelf.
Safari offers a solution that’s better than e-books. It’s a virtual library that lets you easily search thousands of top tech books, cut and paste code samples, download chapters, and find quick answers when you need the most accurate, current information. Try it for free at http://safari.oreilly.com.
Acknowledgments
Bill’s Acknowledgments
Writing this book was not just the effort of Theresa Neil and myself. There are many direct contributors but even more that indirectly inspired us.
Most importantly I wish to thank Ruth. You are my wonderful wife of 30 years, my friend, and an amazing mother. Without your patience and support I could not have gotten this book finished.
I am deeply indebted to my editors at O’Reilly. Double kudos go to Mary Treseler, who patiently cajoled Theresa and I to complete this work. You provided valuable feedback early in the process. Thanks to the rest of the team that brought this book to life: Rachel Monaghan, Marlowe Shaeffer, Ron Bilodeau, Colleen Gorman, Adam Witwer, and Robert Romano, to name a few.
Anyone who has written a book also knows that the technical reviewers are your critical test market. Thanks for the helpful praise and constructive criticism from Christian Crumlish, Dan Saffer, Luke Wroblewski, Juhan Sonin, Kevin Arthur, and Alan Baumgarten. Though I could not address every issue, I took each comment seriously and they had a significant impact on the finished product.
I owe a lot to my time at Yahoo!. Thanks to Erin Malone for sending me an email out of the blue, which eventually led to her hiring me at Yahoo!. There I was surrounded by brilliant people and given the opportunity to succeed. To Erin, Matt Leacock, and Chanel Wheeler for founding the Yahoo! Design Pattern Library. Thanks to Larry Tesler and Erin, who gave me the opportunity to lead and evangelize the launch of the public Yahoo! Design Pattern Library. It was in my role as pattern curator that I crystallized much of the thinking contained in this book. A special thanks to the many talented designers and developers who gave me continual feedback and inspired me with their craftsmanship. The YUI team, and in particular Nate Koechley and Eric Miraglia, for the formulation of “Interesting Moments” grids and for the opportunity to tie the patterns to real-world code. My co-evangelists: Douglas Crockford, Iain Lamb, Julien Lecomte, and Adam Platti. My good friend, Darren James, who encouraged me along the way. Thanks to the many talented designers that I got the chance to collaborate with and whose thoughts are found sprinkled throughout this text: Karon Weber, Samantha Tripodi, Ericson deJesus, Micah Laaker, Luke Wroblewski, Tom Chi, Lucas Pettinati, Kevin Cheng, Kathleen Watkins, Kiersten Lammerding, Annette Leong, Lance Nishihira, and many others.
Outside of Yahoo!, my thinking was encouraged and matured by knowing/learning from Dan Saffer (Adaptive Path), Ryan Freitas (Adaptive Path), Aza Raskin (Humanized), Scott Robbins (Humanized), Peter Moerholz (Adaptive Path), and David Verba (Adaptive Path). A special debt of gratitude to those in the pattern community. Jenifer Tidwell for pointing the way to patterns. For Martijn van Welie for his excellent pattern library. For James Refell and Luke Wroblewski and their work on patterns at eBay. For Christian Crumlish, the current pattern curator at Yahoo! and his clear thinking. Jesse James Garrett, for not only giving Ajax a name, but inviting me to the first Ajax Summit and then taking me on tour with him. Teaching in the Designing for Ajax Workshops gave me the confidence to write this book and tested the material in front of a live audience.
And thanks to the many companies and conference coordinators that invited me to speak. Sharing this material with thousands of listeners was invaluable in determining what resonates with most designers and developers. In no particular order (listed with the company that they invited me to speak at): Jared Spool (UIE), Ben Galbraith and Dion Almer (Ajaxian/Ajax Experience), Kathryn McKinnon (Adobe), Jeremy Geelan (SysCon), Rashmi Sinha (BayCHI/Slideshare), Aaron Newton (CNET), Brian Kromrey (Yahoo! UED courses), Luke Kowalski (Oracle), Sean Kane (Netflix), Reshma Kumar (Silicon Valley Web Guild), Emmanuel Levi-Valensi (People in Action), Bruno Figueiredo (SHiFT), Matthew Moroz (Avenue A Razorfish), Peter Boersma (SIGCHI.NL), Kit Seeborg (WebVisions), Will Tschumy (Microsoft), Bob Baxley (Yahoo!), Jay Zimmerman (Rich Web Experience), Dave Verba (UX Week). Other conferences and companies that I must thank: Web Builder 2.0, eBig, PayPal, eBay, CSU Hayward, City College San Francisco, Apple, and many others.
My deep appreciation goes to Sabre Airline Solutions, and especially Brad Jensen, who bet on me and gave me a great opportunity to build a UX practice in his organization; and to David Endicott and Damon Hougland, who encouraged me to bring these ideas to the public. And to my whole team there for helping Theresa and I vet these ideas in the wild. Many patterns in this book were born out of designing products there.
Finally, I want to thank Netflix, where I am now happily engaged in one of the best places to work in the world. Thanks for supporting me in this endeavor and for teaching me how to design and build great user experiences.
Theresa’s Acknowledgments
I would like to gratefully acknowledge the following folks:
Aaron Arlof, who provided the illustrations for this book. They are the perfect representation of the six principles.
Brad Jensen, my vice president at Sabre Airline solutions, who had me interview Bill in the first place. Without Bill’s mentoring and training I would not be in this field.
Damon Hougland, who helped Bill and I build out the User Experience team at Sabre.
Jo Balderas, who made me learn to code.
Darren James, who taught me how to code.
All of my clients who have participated in many a white board session, enthusiastically learning and exploring the patterns and principles of UI design, especially Steven Smith, Dave Wilby, Suri Bala, Jeff Como, and Seth Alsbury, who allowed me to design their enterprise applications at the beginning of the RIA revolution. A special thanks to my current colleagues: Scott Boms of Wishingline, Paulo Viera, Jessica Douglas, Alan Baumgarten, and Rob Jones.
Most importantly, I wish to thank my husband for his unwavering support, and my parents for their encouragement. And my son, Aaron, for letting me spend so many hours in front of the computer.
[2] GATO was published by Spectrum Holobyte in 1985.
[3] See works such as Jenifer Tidwell’s Designing Interfaces: Patterns for Effective Interaction Design (O’Reilly) and the pattern library of Martijn van Welie (http://www.welie.com/).