Designing Web Interfaces pdf

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 corporate@oreilly.com. Editor: Mary Treseler Production Editor: Rachel Monaghan Copyeditor: Colleen Gorman Proofreader: Rachel Monaghan Indexer: Julie Hawks Cover Designer: Karen Montgomery Interior Designer: Ron Bilodeau 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 Make It DirecPrinciple One: t In-Page Editing1. 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 Drag and Drop2. 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 Direct Selection3. 61 Toggle Selection 62 Collected Selection 67 Object Selection 70 Hybrid Selection 72 Keep It LightweighPrinciple Two: t Contextual Tools4. 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 Stay on the PagPrinciple Three: e Overlays5. 105 Dialog Overlay 107 Detail Overlay 112 Input Overlay 119 Inlays6. 123 Dialog Inlay 123 List Inlay 127 Detail Inlay 132 Tabs 134 Inlay Versus Overlay? 136 Virtual Pages7. 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 Process Flow8. 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 Provide an InvitatioPrinciple Four: n Static Invitations9. 181 Call to Action Invitation 181 Tour Invitation 185 Dynamic Invitations10. 191 Hover Invitation 191 Affordance Invitation 196 Drag and Drop Invitation 200 Inference Invitation 209 More Content Invitation 210 The Advantage of Invitations 213 Use TransitionPrinciple Five: s Transitional Patterns11. 217 Brighten and Dim 217 Expand/Collapse 222 Self-Healing Fade 227 Animation 228 Spotlight 231 Download at WoweBook.Com viii Contents Purpose of Transitions12. 233 Engagement 233 Communication 234 React ImmediatelPrinciple Six: y Lookup Patterns13. 253 Auto Complete 253 Live Suggest 257 Live Search 262 Refining Search 268 Feedback Patterns14. 275 Live Preview 275 Progressive Disclosure 284 Progress Indicator 286 Periodic Refresh 292 Principles and Patterns for Rich InteractionEpilogue: 295 Index 297 Download at WoweBook.Com [...]... Progressive Disclosure, Progress Indication, and Periodic Refresh Download at WoweBook.Com Preface  xv  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... 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... 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... 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... 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... 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 Download at WoweBook.Com xvi  Preface Using Examples You can... (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... it to be edited inline Download at WoweBook.Com Make It Direct The very first websites were focused on displaying content and making it easy to navigate to more content There wasn’t much in the way of interactivity Early versions of HTML didn’t include input forms for users to submit information Even after both input and output were standard in websites, the early Web was still primarily a read-only... (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... 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 . Download at WoweBook.Com Designing Web Interfaces Download at WoweBook.Com Download at WoweBook.Com Designing Web Interfaces Bill Scott and. Download at WoweBook.Com Preface xv Who Should Read This Book Designing Web Interfaces is for anyone who specifies, designs, or builds web interfaces. Web designers