Designing Interfaces : Patterns for Effective Interaction Design

Designing good application interfaces isn't easy now that companies need to create compelling, seamless user experiences across an exploding number of channels, screens, and contexts. In this updated third edition, you'll learn how to navigate through the maze of design options. By capturing UI best practices as design patterns, this best-selling book provides solutions to common design problems.You'll learn patterns for mobile apps, web applications, and desktop software. Each pattern contains full-color examples and practical design advice you can apply immediately. Experienced designers can use this guide as an idea sourcebook, and novices will find a road map to the world of interface and interaction design.• Understand your users before you start designing• Build your software’s structure so it makes sense to users• Design components to help users complete tasks on any device• Learn how to promote wayfinding in your software• Place elements to guide users to information and functions• Learn how visual design can make or break product usability• Display complex data with artful visualizationsJenifer Tidwell has been researching user interface patterns since 1997 and designing and building complex applications and web interfaces since 1991.Aynne Valencia is design director for the San Francisco Digital Services and associate professor at California College of the Arts.Charlie Brewer is a director of product design with deep experience in SaaS software, platforms, and marketplaces. Cover Copyright Table of Contents Preface to the Third Edition Why We Wrote This Book Design Patterns Remain Relevant Software Is Systems Now Focus: Screen-Based, Web, and Mobile What’s Not in This Edition Who This Book Is For How This Book Is Organized Introduction and Design Discussion The Patterns Conclusion Conventions Used in This Book O’Reilly Online Learning How to Contact Us Acknowledgments Chapter 1. Designing for People Context Know Your Audience Interactions Are Conversations Match Your Content and Functionality to Your Audience Skill Level Goals: Your Interface Is Just a Means to Their Ends Ask Why Design’s Value: Solve the Right Problem, and Then Solve It Right Research: Ways to Understand Context and Goals Direct Observation Case Studies Surveys Personas Design Research Is Not Marketing Research The Patterns: Cognition and Behavior Related to Interface Design Safe Exploration Instant Gratification Satisficing Changes in Midstream Deferred Choices Incremental Construction Habituation Microbreaks Spatial Memory Prospective Memory Streamlined Repetition Keyboard Only Social Media, Social Proof, and Collaboration Conclusion Chapter 2. Organizing the Content: Information Architecture and Application Structure Purpose Definition Designing an Information Space for People Approach Separate Information from Presentation Mutually Exclusive, Collectively Exhaustive Ways to Organize and Categorize Content Alphabetical Number Time Location Hierarchy Category or Facet Designing for Task and Workflow-Dominant Apps Make Frequently Used Items Visible “Chunk Up” Jobs into a Sequence of Steps Multiple Channels and Screen Sizes Are Today’s Reality Display Your Information as Cards Designing a System of Screen Types Overview: Show a List or Grid of Things or Options Focus: Show One Single Thing Make: Provide Tools to Create a Thing Do: Facilitate a Single Task The Patterns Feature, Search, and Browse Mobile Direct Access Streams and Feeds Media Browser Dashboard Canvas Plus Palette Wizard Settings Editor Alternative Views Many Workspaces Help Systems Tags Conclusion Chapter 3. Getting Around: Navigation, Signposts, and Wayfinding Understanding the Information and Task Space Signposts Wayfinding Navigation Global Navigation Utility Navigation Associative and Inline Navigation Related Content Tags Social Design Considerations Separate the Navigation Design from the Visual Design Cognitive Load Keep Distances Short Navigational Models Hub and Spoke Fully Connected Multilevel or Tree Step by Step Pyramid Flat Navigation The Patterns Clear Entry Points Menu Page Pyramid Modal Panel Deep Links Escape Hatch Fat Menus Sitemap Footer Sign-In Tools Progress Indicator Breadcrumbs Annotated Scroll Bar Animated Transition Conclusion Chapter 4. Layout of Screen Elements The Basics of Layout Visual Hierarchy What Makes Things Look Important? Four Important Gestalt Principles Visual Flow Using Dynamic Displays Responsive Enabling Progressive Disclosure UI Regions The Patterns Layout Chunking Information Visual Framework Center Stage Grid of Equals Titled Sections Module Tabs Accordion Collapsible Panels Movable Panels Chapter 5. Visual Style and Aesthetics The Basics of Visual Design Visual Hierarchy Composition Color Typography Readability Evoking a Feeling Images Visual Design for Enterprise Applications Accessibility Ranges of Visual Styles Skeuomorphic Illustrated Flat Design Minimalistic Adaptive/Parametric Conclusion Chapter 6. Mobile Interfaces The Challenges and Opportunities of Mobile Design Tiny Screen Sizes Variable Screen Widths Touch Screens Difficulty of Typing Text Challenging Physical Environments Location Awareness Social Influences and Limited Attention How to Approach a Mobile Design 1. What Do Users in a Mobile Context Actually Need? 2. Strip the Site or App Down to Its Essence 3. If You Can, Use the Device’s Hardware 4. Linearize Your Content 5. Optimize the Most Common Interaction Sequences Some Worthy Examples The Patterns Vertical Stack Filmstrip Touch Tools Bottom Navigation Collections and Cards Infinite List Generous Borders Loading or Progress Indicators Richly Connected Apps Make It Mobile Chapter 7. Lists of Things Use Cases for Lists Back to Information Architecture What Are You Trying to Show? “When the user selects an item from a list, where should I show the details of that item?” “How can I show a list of items that have heavy visuals?” “How can I manage a very long list?” “How can I show a list that’s organized into categories or hierarchies?” The Patterns Two-Panel Selector or Split View One-Window Drilldown List Inlay Cards Thumbnail Grid Carousel Pagination Jump to Item Alpha/Numeric Scroller New-Item Row Lists Abound Chapter 8. Doing Things: Actions and Commands Tap, Swipe, and Pinch Rotate and Shake Buttons Menu Bars Pop-Up Menus Drop-Down Menus Toolbars Links Action Panels Hover Tools Single-Clicking Versus Double-Clicking Items Keyboard Actions Shortcuts Tab Order Drag-and-Drop Typed Commands Affordance Direct Manipulation of Objects The Patterns Button Groups Hover or Pop-Up Tools Action Panel Prominent “Done” Button or Assumed Next Step Smart Menu Items Preview Spinners and Loading Indicators Cancelability Multilevel Undo Command History Macros Conclusion Chapter 9. Showing Complex Data The Basics of Information Graphics Organizational Models: How Is This Data Organized? Preattentive Variables: What’s Related to What? Navigation and Browsing: How Can I Explore This Data? Sorting and Rearranging: Can I Rearrange This Data to See It Differently? Searching and Filtering: How Can I See Only the Data That I Need? The Actual Data: What Are the Specific Data Values? The Patterns Datatips Data Spotlight Dynamic Queries Data Brushing Multi-Y Graph Small Multiples The Power of Data Visualization Chapter 10. Getting Input from Users: Forms and Controls The Basics of Form Design Form Design Continues to Evolve Further Reading The Patterns Forgiving Format Structured Format Fill-in-the-Blanks Input Hints Input Prompt Password Strength Meter Autocompletion Drop-down Chooser List Builder Good Defaults and Smart Prefills Error Messages Conclusion Chapter 11. User Interface Systems and Atomic Design UI Systems An Example Component-Based UI System: Microsoft’s Fluent Atomic Design: A Way of Designing Systems Overview The Atomic Design Hierarchy UI Frameworks Overview Benefits The Rise of UI Frameworks A Look at Selected UI Frameworks Conclusion Chapter 12. Beyond and Behind the Screen The Ingredients: Smart Systems Connected Devices Anticipatory Systems Assistive Systems Natural User Interfaces Conclusion Index About the Authors Colophon Designing good application interfaces isn’t easy now that companies need to create compelling, seamless user experiences across an exploding number of channels, screens, and contexts. In this updated third edition, you’ll learn how to navigate through the maze of design options. By capturing UI best practices as design patterns, this best-selling book provides solutions to common design problems. You’ll learn patterns for mobile apps, web applications, and desktop software. Each pattern contains full-color examples and practical design advice you can apply immediately. Experienced designers can use this guide as an idea sourcebook, and novices will find a road map to the world of interface and interaction design. • Understand your users before you start designing • Build your software’s structure so it makes sense to users • Design components to help users complete tasks on any device • Learn how to promote wayfinding in your software • Place elements to guide users to information and functions • Learn how visual design can make or break product usability • Display complex data with artful visualizations "Designing good application interfaces isn't easy now that companies need to create compelling, seamless user experiences across an exploding number of channels, screens, and contexts. In this updated third edition, you'll learn how to navigate through the maze of design options. By capturing UI best practices as design patterns, this best-selling book provides solutions to common design problems. You'll learn patterns for mobile apps, web applications, and desktop software. Each pattern contains full-color examples and practical design advice you can apply immediately. Experienced designers can use this guide as an idea sourcebook, and novices will find a road map to the world of interface and interaction design."--Amazon.com This text offers advice on creating user-friendly interface designs - whether they're delivered on the Web, a CD, or a 'smart' device like a cell phone. It presents solutions to common UI design problems as a collection of patterns - each containing concrete examples, recommendations, and warnings.