Designing Interfaces By Jenifer Tidwell Publisher: O'Reilly Pub Date: November 2005 Print ISBN-10: 0-596-00803-1 Print ISBN-13: 978-0-59-600803-1 Pages: 352 Table of Contents | Index Designing a good interface isn't easy Users demand software that is well-behaved, goodlooking, and easy to use Your clients or managers demand originality and a short time to market Your UI technology Web applications, desktop software, even mobile devices -may give you the tools you need, but little guidance on how to use them well UI designers over the years have refined the art of interface design, evolving many best practices and reusable ideas If you learn these, and understand why the best user interfaces work so well, you too can design engaging and usable interfaces with less guesswork and more confidence Designing Interfaces captures those best practices as design patterns solutions to common design problems, tailored to the situation at hand Each pattern contains practical advice that you can put to use immediately, plus a variety of examples illustrated in full color You'll get recommendations, design alternatives, and warnings on when not to use them Each chapter's introduction describes key design concepts that are often misunderstood, such as affordances, visual hierarchy, navigational distance, and the use of color These give you a deeper understanding of why the patterns work, and how to apply them with more insight A book can't design an interface for you no foolproof design process is given here but Designing Interfaces does give you concrete ideas that you can mix and recombine as you see fit Experienced designers can use it as a sourcebook of ideas Novice designers will find a roadmap to the world of interface and interaction design, with enough guidance to start using these patterns immediately Designing Interfaces By Jenifer Tidwell Publisher: O'Reilly Pub Date: November 2005 Print ISBN-10: 0-596-00803-1 Print ISBN-13: 978-0-59-600803-1 Pages: 352 Table of Contents | Index Copyright Preface SMALL INTERFACE PIECES, LOOSELY JOINED ABOUT PATTERNS IN GENERAL OTHER PATTERN COLLECTIONS ABOUT THE PATTERNS IN THIS BOOK AUDIENCE HOW THIS BOOK IS ORGANIZED COMMENTS AND QUESTIONS ACKNOWLEDGMENTS Chapter 1 What Users Do Section 1.1 A MEANS TO AN END Section 1.2 THE BASICS OF USER RESEARCH Section 1.3 USERS' MOTIVATION TO LEARN Section 1.4 THE PATTERNS Chapter 2 Organizing the Content:Information Architecture and Application Structure Section 2.1 THE BASICS OF INFORMATION ARCHITECTURE: DIVIDING STUFF UP Section 2.2 PHYSICAL STRUCTURE Section 2.3 THE PATTERNS Chapter 3 Getting Around:Navigation, Signposts, and Wayfinding Section 3.1 STAYING FOUND Section 3.2 THE COST OF NAVIGATION Section 3.3 THE PATTERNS Chapter 4 Organizing the Page:Layout of Page Elements Section 4.1 THE BASICS OF PAGE LAYOUT Section 4.2 THE PATTERNS Chapter 5 Doing Things:Actions and Commands Section 5.1 PUSHING THE BOUNDARIES Section 5.2 THE PATTERNS Chapter 6 Showing Complex Data:Trees, Tables, and Other Information Graphics Section 6.1 THE BASICS OF INFORMATION GRAPHICS Section 6.2 THE PATTERNS Chapter 7 Getting Input from Users:Forms and Controls Section 7.1 THE BASICS OF FORM DESIGN Section 7.2 CONTROL CHOICE Section 7.3 THE PATTERNS Chapter 8 Builders and Editors Section 8.1 THE BASICS OF EDITOR DESIGN Section 8.2 THE PATTERNS Chapter 9 Making It Look Good:Visual Style and Aesthetics Section 9.1 SAME CONTENT, DIFFERENT STYLES Section 9.2 THE BASICS OF VISUAL DESIGN Section 9.3 WHAT THIS MEANS FOR DESKTOP APPLICATIONS Section 9.4 THE PATTERNS About the Author Colophon Index Copyright © 2006 O'Reilly Media, Inc 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 Editors: Andrew Odewahn and Mary O'Brien Production Editor: Genevieve d'Entremont Cover Designer: Mike Kohnke Interior Designer: NOON Printing History: November 2005: First Edition Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of O'Reilly Media, Inc Designing Interfaces 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 trademark 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 author assume no responsibility for errors or omissions, or for damages resulting from the use of the information contained herein This book uses RepKover, a durable and flexible lay-flat binding ISBN: 0-596-00803-1 [C] Preface Once upon a time, interface designers worked with a woefully small toolbox We had a handful of simple controls: text fields, buttons, menus, tiny icons, and modal dialogs We carefully put them together according to the Windows Style Guide or the Macintosh Human Interface Guidelines, and we hoped that users would understand the resulting interfaceand too often, they didn't We designed for small screens, few colors, slow CPUs, and slow networks (if the user was connected at all) We made them gray Things have changed If you design interfaces today, you work with a much bigger palette of components and ideas You have a choice of many more user interface toolkits than before, such as Java™ Swing, Qt, HTML and Javascript, Flash, and numerous open-source options Apple's and Microsoft's native UI toolkits are richer and nicer-looking than they used to be Display technology is better Web applications often look as professionally designed as the web sites they're embedded in, and while desktop-UI ideas like drag-and-drop are integrated into web applications slowly, some of those web sensibilities are migrating back into desktop applications in the form of blue underlined links, Back/Next buttons, daring fonts and background images, and nice, non-gray color schemes But it's still not easy to design good interfaces Let's say you're not a trained or self-taught interface designer If you just use the UI toolkits the way they should be used, and if you follow the various style guides or imitate existing applications, you can probably create a mediocre but passable interface Alas, that may not be enough anymore Users' expectations are higher than they used to beif your interface isn't easy to use "out of the box," users will not think well of it Even if the interface obeys all the standards, you may have misunderstood users' preferred workflow, used the wrong vocabulary, or made it too hard to figure out what the software even does Impatient users often won't give you the benefit of the doubt Worse, if you've built an unusable web site or web application, frustrated users can give up and switch to your competitor with just the click of a button So the cost of building a mediocre interface is higher than it used to be, too It's even tougher if you design products outside of the desktop and web worlds, because there's very little good design advice out there Palmtops, cell phones, car navigation systems, digital TV recordersdesigners are still figuring out what works and what doesn't, often from basic principles (And their users often tolerate difficult interfacesbut that won't last long.) Devices like phones, TVs, and car dashboards once were the exclusive domain of industrial designers But now those devices have become smart Increasingly powerful computers drive them, and software-based features and applications are multiplying in response to market demands They're here to stay, whether or not they are easy to use At this rate, good interface and interaction design may be the only hope for our collective sanity in 10 years SMALL INTERFACE PIECES, LOOSELY JOINED As an interface designer trying to make sense of all the technology changes in the last few years, I see two big effects on the craft of interface design One is the proliferation of interface idioms: recognizable types or styles of interfaces, each with its own vocabulary of objects, actions, and visuals You probably recognize all the ones shown in the figure on the next page, and more are being invented all the time Figure I-1 A sampler of interface idioms The second effect is a loosening of the rules for putting together interfaces from these idioms It no longer surprises anyone to see several of these idioms mixed up in one interface, for instance, or to see parts of some controls mixed up with parts of other controls Online help pages, which have long been formatted in hypertext anyway, might now have interactive applets in them, animations, or links to a web-based bulletin board Interfaces themselves might have help texts on them, interleaved with forms or editors; this used to be rare Combo boxes' dropdown menus might have funky layouts, like color grids or sliders, instead of the standard column of text items You might see web applications that look like documentcentered paint programs, but have no menu bars, and save the finished work only to a database somewhere The freeform-ness of web pages seems to have taught users to relax their expectations with respect to graphics and interactivity It's okay now to break the old Windows styleguide strictures, as long as users can figure out what you're doing And that's the hard part Some applications, devices, and web applications are easy to use Many aren't Following style guides never guaranteed usability anyhow, but now designers have even more choices than before (which, paradoxically, can make design a lot harder) What characterizes interfaces that are easy to use? One could say, "The applications that are easy to use are designed to be intuitive." Well, yes That's almost a tautology Except that the word "intuitive" is a little bit deceptive Jef Raskin once pointed out that when we say "intuitive" in the context of software, we really mean "familiar." Computer mice aren't intuitive to someone who's never seen one (though a growling grizzly bear would be) There's nothing innate or Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [R] [S] [T] [U] [V] [W] [Y] [Z] page layout 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd 23rd 24th 25th 26th 27th 28th 29th 30th 31st 32nd 33rd 34th 35th palette (Canvas Plus Palette) 2nd 3rd palmtops panes/panels/windows Action Panels Movable Panels multiple windows 2nd panning (information graphics) 2nd 3rd 4th Paste Variations (editors) 2nd patterns controls overview how to use navigation overview user behavior satisficing spatial memory PDAs 2nd 3rd 4th personas (user research) physical structure (information architecture) Alternative Views 2nd multiple windows One-Window Drilldown See One-Window Drilldown onewindow paging plots 2nd 3rd 4th Trellis plot pop-up menus (actions/commands) postures (programs) preattentive variables (information graphics) 2nd 3rd 4th 5th Preview (actions/commands) 2nd 3rd 4th 5th principles controls 2nd forms 2nd Print preview professive disclosure 2nd program structure Progress Indicator (actions/commands) 2nd 3rd 4th 5th Prominent Done Button (actions/commands) 2nd Property Sheet editors layout 2nd 3rd prospective memory (user behavior) proximity 2nd Datatips Pyramid (navigation) 2nd 3rd 4th Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [R] [S] [T] [U] [V] [W] [Y] [Z] Radio buttons 2nd 3rd 4th Raymond red/green colors Reimann repeated visual motifs 2nd repetition (user behavior) repetitive strain injury research 2nd 3rd resizing objects on canvas 2nd 3rd 4th Responsive Disclosure users Responsive Enabling (layout) 2nd 3rd 4th 5th 6th 7th restricting navigation Revert to Default rhythm (visual design) 2nd Right/Left Alignment 2nd 3rd 4th 5th root cause analysis (users) rulers (information graphics) Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [R] [S] [T] [U] [V] [W] [Y] [Z] safe exploration (user behavior) Same-Page Error Messages Sano sans-serif fonts 2nd 3rd 4th 5th satisficing (user behavior) 2nd scales (information graphics) scrollbars information graphics searching See also filtering information graphics information graphics Local Zooming Sortable Table security selection builders and composites editors and 2nd lasso 2nd 3rd 4th multiple 2nd of list items of text rubber band 2nd single self-describing 2nd Sequence Maps 2nd 3rd 4th Breadcrumbs maps Breadcrumbs navigation Breadcrumbs signposts (navigation) Breadcrumbs wayfinding (navigation) Breadcrumbs signposts (navigation) 2nd Breadcrumbs 2nd similarity 2nd Skins (styles) 2nd 3rd 4th sliders Small Multiples (information graphics) 2nd 3rd 4th Smart Menu Items (actions/commands) 2nd 3rd 4th 5th Smart Selection (editors) 2nd 3rd 4th snap to grid softkeys 2nd Sortable Table (information graphics) 2nd 3rd 4th 5th sorting 2nd sorting (information graphics) Tree Table sovereign structure programs spaciousness and crowding 2nd spatial memory (user behavior) 2nd spatial relationships visual hierarchy (layout) 2nd spin box 2nd spinners Spring-Loaded Mode (editors) 2nd 3rd 4th 5th 6th streamlined repetition (user behavior) strong titles (Titled Sections) information graphics Structured Format (controls) 2nd 3rd 4th 5th 6th 7th styles accessibility angles 2nd 3rd backgrounds 2nd borders Contrasting Font Weights 2nd Corner Treatments examples Few Hues Skins 2nd 3rd typography/fonts Skins user trust visual design angles 2nd 3rd 4th 5th color 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th summary (Preview) 2nd 3rd surveys (user research) 2nd Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [R] [S] [T] [U] [V] [W] [Y] [Z] tabs 2nd 3rd 4th 5th vertical tabs task panes (Action Panels) 2nd 3rd 4th text field 2nd 3rd 4th text See typography/fonts multiline text area textures (styles) 2nd 3rd 4th 5th tiled panes (information architecture) 2nd 3rd 4th 5th 6th navigation 2nd panes/panels/windows navigation timelines 2nd Tognazzini toolbars (actions/commands) transient structure programs tree 2nd 3rd 4th 5th tree control Tree Tables 2nd 3rd Treemaps 2nd 3rd Treemaps (information graphics) 2nd trust Tufte Two-Panel Selector (information architecture) 2nd 3rd 4th tiled panes Wizards typed commands typographic errors 2nd 3rd typography/fonts controls 2nd styles Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [R] [S] [T] [U] [V] [W] [Y] [Z] UML sequence diagram 2nd undo (Multi-Level Undo) 2nd 3rd 4th Macros Property Sheet users usability testing 2nd 3rd 4th 5th users behavioral patterns prospective memory 2nd knowledge research root cause analysis trust Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [R] [S] [T] [U] [V] [W] [Y] [Z] van Welie visual design styles cultural references rhythm visual design (styles) 2nd 3rd 4th 5th 6th 7th angles color 2nd 3rd 4th 5th 6th 7th 8th 9th 10th 11th 12th 13th 14th 15th 16th 17th 18th 19th 20th 21st 22nd cultural references images Skins images (styles) 2nd 3rd 4th 5th rhythm visual flow (layout) 2nd 3rd 4th 5th focal points 2nd Visual Framework (layout) 2nd 3rd 4th 5th 6th 7th visual hierarchy layout 2nd 3rd colors spatial relationships visual vocabulary visual weight (visual hierarchy) visualization 2nd 3rd 4th 5th Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [R] [S] [T] [U] [V] [W] [Y] [Z] wayfinding navigation maps wayfinding (navigation) Breadcrumbs environmental clues maps whitespace (visual hierarchy) 2nd Wizards 2nd 3rd layout navigation 2nd 3rd 4th users WYSIWYG editors editors Guides Guides HTML patterns Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [R] [S] [T] [U] [V] [W] [Y] [Z] You are Here 2nd Index [SYMBOL] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [R] [S] [T] [U] [V] [W] [Y] [Z] zooming browsing (information graphics) Treemap zooming (information graphics) Datatips Local Zooming 2nd Overview Plus Detail Treemap .. .Designing Interfaces By Jenifer Tidwell Publisher: O'Reilly Pub Date: November 2005 Print ISBN- 10: 0-596-00803-1 Print ISBN- 13: 978-0-59-600803-1 Pages: 352... http://www .oreilly. com/catalog/designinterfaces Visit http://designinginterfaces.com for more information To comment or ask technical questions about this book, send email to: bookquestions @oreilly. com... Printing History: November 2005: First Edition Nutshell Handbook, the Nutshell Handbook logo, and the O'Reilly logo are registered trademarks of O'Reilly Media, Inc Designing Interfaces and related trade dress are trademarks of