Download at WoweBook.Com Designing Web Interfaces Download at WoweBook.Com Download at WoweBook.Com Designing Web Interfaces Bill Scott and Theresa Neil Beijing · Cambridge · Farnham · Köln · Sebastopol · Taipei · Tokyo Download at WoweBook.Com Designing Web Interfaces by Bill Scott and Theresa Neil Copyright © 2009 Bill Scott and Theresa Neil. 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 (safari.oreilly.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or [email protected]. Editor: Mary Treseler Indexer: Julie Hawks Production Editor: Rachel Monaghan Cover Designer: Karen Montgomery Copyeditor: Colleen Gorman Interior Designer: Ron Bilodeau Proofreader: Rachel Monaghan Illustrator: Robert Romano Printing History: January 2009: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Designing Web Interfaces, the image of a Guianan cock-of-the-rock, and related trade dress are trademarks of O’Reilly Media, Inc. 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 O’Reilly Media, Inc. was aware of a trade- mark claim, the designations have been printed in caps or initial caps. While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibility for errors or omissions, or for damages resulting from the use of the information con- tained herein. This book uses Repkover,™ a durable and flexible lay-flat binding. ISBN: 978-0-596-51625-3 [V] [6/09] Download at WoweBook.Com Contents Foreword .............................................................. ix Preface ................................................................ xi Principle One: Make It Direct 1. In-Page Editing .................................................... 3 Single-Field Inline Edit 4 Multi-Field Inline Edit 8 Overlay Edit 11 Table Edit 15 Group Edit 18 Module Configuration 21 Guidelines for Choosing Specific Editing Patterns 23 2. Drag and Drop ................................................... 25 Interesting Moments 26 Purpose of Drag and Drop 29 Drag and Drop Module 30 Drag and Drop List 40 Drag and Drop Object 46 Drag and Drop Action 52 Drag and Drop Collection 57 The Challenges of Drag and Drop 59 Download at WoweBook.Com vi Contents 3. Direct Selection .................................................. 61 Toggle Selection 62 Collected Selection 67 Object Selection 70 Hybrid Selection 72 Principle Two: Keep It Lightweight 4. Contextual Tools .................................................. 79 Interaction in Context 79 Fitts’s Law 80 Contextual Tools 81 Always-Visible Tools 81 Hover-Reveal Tools 85 Toggle-Reveal Tools 91 Multi-Level Tools 93 Secondary Menu 98 Principle Three: Stay on the Page 5. Overlays ........................................................ 105 Dialog Overlay 107 Detail Overlay 112 Input Overlay 119 6. Inlays .......................................................... 123 Dialog Inlay 123 List Inlay 127 Detail Inlay 132 Tabs 134 Inlay Versus Overlay? 136 7. Virtual Pages ................................................... 137 Virtual Scrolling 137 Inline Paging 142 Download at WoweBook.Com Contents vii Scrolled Paging: Carousel 147 Virtual Panning 149 Zoomable User Interface 151 Paging Versus Scrolling 155 8. Process Flow .................................................... 157 Google Blogger 157 The Magic Principle 158 Interactive Single-Page Process 160 Inline Assistant Process 164 Dialog Overlay Process 168 Configurator Process 171 Static Single-Page Process 174 Principle Four: Provide an Invitation 9. Static Invitations ................................................ 181 Call to Action Invitation 181 Tour Invitation 185 10. Dynamic Invitations .............................................. 191 Hover Invitation 191 Affordance Invitation 196 Drag and Drop Invitation 200 Inference Invitation 209 More Content Invitation 210 The Advantage of Invitations 213 Principle Five: Use Transitions 11. Transitional Patterns ............................................. 217 Brighten and Dim 217 Expand/Collapse 222 Self-Healing Fade 227 Animation 228 Spotlight 231 Download at WoweBook.Com viii Contents 12. Purpose of Transitions ............................................ 233 Engagement 233 Communication 234 Principle Six: React Immediately 13. Lookup Patterns ................................................. 253 Auto Complete 253 Live Suggest 257 Live Search 262 Refining Search 268 14. Feedback Patterns ............................................... 275 Live Preview 275 Progressive Disclosure 284 Progress Indicator 286 Periodic Refresh 292 Epilogue: Principles and Patterns for Rich Interaction ...................... 295 Index ................................................................ 297 Download at WoweBook.Com Chapter 1 Foreword In architecture, parti refers to the underlying concept of a building.* Will it be an aca- demic structure aimed at increasing cross-disciplinary collaboration or a theater flexible enough to support quick set changes? To bring a specific parti to life, architects must not only define its essence but also know how to manage the huge number of considerations that ultimately impact its construction. Design principles are the guiding light for any architect’s parti. They define and commu- nicate the key characteristics of a building to a wide variety of stakeholders, including cli- ents, builders, city planners, and engineers. Design principles articulate the fundamental goals that all decisions can be measured against and thereby keep the pieces of a project moving toward an integrated whole. But design principles are not enough. Every aspect of a building from an attic to a Zen garden has a set of opportunities and limitations that can either add to or detract from the main concept or parti. These include standard dimensions, spacing requirements, aesthetics, physical limitations, and more. Architects who want to bring coherent visions to life need to learn the detailed ins and outs of these design considerations so they can select the best solutions from the options available. This combination of design principles at the top and design considerations at the bottom is what allows architects to fill in the middle with meaningful buildings that enable people and organizations to interact, communicate, and get things done. Those of us whose parti is bringing rich web applications to life can also benefit from a framework of design principles and considerations to guide us. In these pages, Bill Scott and Theresa Neil give us just that. Through 30 years of designing and developing soft- ware, Bill and Theresa have been the consummate taxonomists—naming, documenting, and sharing in loving detail what makes rich interactions succeed and fail. * The term parti comes from Matthew Frederick’s book 101 Things I Learned in Architecture School (MIT Press). Download at WoweBook.Com x Foreword The breadth of solutions they have encountered has given them a unique perspective on the design principles behind the most successful rich interactions on the Web. From “make it direct” to “react immediately,” the principles he outlines in this book are your yardstick for measuring the value that rich interactions bring to your web application. Through in-depth descriptions of context and trade-offs, Bill and Theresa support each principle with the design considerations and best practices you need to make informed decisions. Engineers, product managers, marketers, and designers can rally around and continually return to these principles and considerations to ensure that everyone is evalu- ating the impact of design decisions the same way. This combination of rich web interaction design principles at the top and design consider- ations at the bottom allows web designers to fill in the middle with meaningful structures that enable people and organizations to interact, communicate, and get things done. Just like our friends, the architects. So, dive in and immerse yourself in the direction and details you need to bring your rich web application partis to life! —Luke Wroblewski October 2008 Senior Director, Product Ideation and Design, Yahoo! Inc. Author, Web Form Design: Filling in the Blanks (Rosenfeld Media) Author, Site-Seeing: A Visual Approach to Web Usability (Wiley) Download at WoweBook.Com Chapter 1 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 inter- face 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