Designing Interfaces, 3rd Edition

Designing Interfaces, 3rd Edition

by Jenifer Tidwell, Charles Brewer, Aynne Valencia
Released January 2020
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781492051961

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Buy on Amazon Buy on ebooks.com
Start your free trial

Book description

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

Publisher resources

View/Submit Errata

Table of contents

  1. Preface to the Third Edition
    1. Why We Wrote This Book
    2. Design Patterns Remain Relevant
    3. Software Is Systems Now
      1. Focus: Screen-Based, Web, and Mobile
      2. What’s Not in This Edition
    4. Who This Book Is For
    5. How This Book Is Organized
      1. Introduction and Design Discussion
      2. The Patterns
    6. Conclusion
    7. Conventions Used in This Book
    8. O’Reilly Online Learning
    9. How to Contact Us
    10. Acknowledgments
  2. 1. Designing for People
    1. Context
      1. Know Your Audience
      2. Interactions Are Conversations
      3. Match Your Content and Functionality to Your Audience
      4. Skill Level
      5. Goals: Your Interface Is Just a Means to Their Ends
      6. Ask Why
      7. Design’s Value: Solve the Right Problem, and Then Solve It Right
    2. Research: Ways to Understand Context and Goals
      1. Direct Observation
      2. Case Studies
      3. Surveys
      4. Personas
      5. Design Research Is Not Marketing Research
    3. The Patterns: Cognition and Behavior Related to Interface Design
      1. Safe Exploration
      2. Instant Gratification
      3. Satisficing
      4. Changes in Midstream
      5. Deferred Choices
      6. Incremental Construction
      7. Habituation
      8. Microbreaks
      9. Spatial Memory
      10. Prospective Memory
      11. Streamlined Repetition
      12. Keyboard Only
      13. Social Media, Social Proof, and Collaboration
    4. Conclusion
  3. 2. Organizing the Content: Information Architecture and Application Structure
    1. Purpose
    2. Definition
      1. Designing an Information Space for People
    3. Approach
      1. Separate Information from Presentation
    4. Mutually Exclusive, Collectively Exhaustive
    5. Ways to Organize and Categorize Content
      1. Alphabetical
      2. Number
      3. Time
      4. Location
      5. Hierarchy
      6. Category or Facet
    6. Designing for Task and Workflow-Dominant Apps
      1. Make Frequently Used Items Visible
      2. “Chunk Up” Jobs into a Sequence of Steps
      3. Multiple Channels and Screen Sizes Are Today’s Reality
      4. Display Your Information as Cards
    7. Designing a System of Screen Types
    8. Overview: Show a List or Grid of Things or Options
    9. Focus: Show One Single Thing
    10. Make: Provide Tools to Create a Thing
    11. Do: Facilitate a Single Task
    12. The Patterns
      1. Feature, Search, and Browse
      2. Mobile Direct Access
      3. Streams and Feeds
      4. Media Browser
      5. Dashboard
      6. Canvas Plus Palette
      7. Wizard
      8. Settings Editor
      9. Alternative Views
      10. Many Workspaces
      11. Help Systems
      12. Tags
    13. Conclusion
  4. 3. Getting Around: Navigation, Signposts, and Wayfinding
    1. Understanding the Information and Task Space
    2. Signposts
    3. Wayfinding
    4. Navigation
      1. Global Navigation
      2. Utility Navigation
      3. Associative and Inline Navigation
      4. Related Content
      5. Tags
      6. Social
    5. Design Considerations
      1. Separate the Navigation Design from the Visual Design
      2. Cognitive Load
      3. Keep Distances Short
    6. Navigational Models
      1. Hub and Spoke
      2. Fully Connected
      3. Multilevel or Tree
      4. Step by Step
      5. Pyramid
      6. Flat Navigation
    7. The Patterns
      1. Clear Entry Points
      2. Menu Page
      3. Pyramid
      4. Modal Panel
      5. Deep Links
      6. Escape Hatch
      7. Fat Menus
      8. Sitemap Footer
      9. Sign-In Tools
      10. Progress Indicator
      11. Breadcrumbs
      12. Annotated Scroll Bar
      13. Animated Transition
    8. Conclusion
  5. 4. Layout of Screen Elements
    1. The Basics of Layout
      1. Visual Hierarchy
      2. What Makes Things Look Important?
      3. Four Important Gestalt Principles
      4. Visual Flow
      5. Using Dynamic Displays
      6. Responsive Enabling
      7. Progressive Disclosure
      8. UI Regions
    2. The Patterns
      1. Visual Framework
      2. Center Stage
      3. Grid of Equals
      4. Titled Sections
      5. Module Tabs
      6. Accordion
      7. Collapsible Panels
      8. Movable Panels
  6. 5. Visual Style and Aesthetics
    1. The Basics of Visual Design
      1. Visual Hierarchy
      2. Composition
      3. Color
      4. Typography
      5. Readability
      6. Evoking a Feeling
      7. Images
    2. Visual Design for Enterprise Applications
      1. Accessibility
    3. Ranges of Visual Styles
      1. Skeuomorphic
      2. Illustrated
      3. Flat Design
      4. Minimalistic
      5. Adaptive/Parametric
    4. Conclusion
  7. 6. Mobile Interfaces
    1. The Challenges and Opportunities of Mobile Design
      1. Tiny Screen Sizes
      2. Variable Screen Widths
      3. Touch Screens
      4. Difficulty of Typing Text
      5. Challenging Physical Environments
      6. Location Awareness
      7. Social Influences and Limited Attention
    2. How to Approach a Mobile Design
      1. Some Worthy Examples
    3. The Patterns
      1. Vertical Stack
      2. Filmstrip
      3. Touch Tools
      4. Bottom Navigation
      5. Collections and Cards
      6. Infinite List
      7. Generous Borders
      8. Loading or Progress Indicators
      9. Richly Connected Apps
    4. Make It Mobile
  8. 7. Lists of Things
    1. Use Cases for Lists
    2. Back to Information Architecture
    3. What Are You Trying to Show?
    4. The Patterns
      1. Two-Panel Selector or Split View
      2. One-Window Drilldown
      3. List Inlay
      4. Cards
      5. Thumbnail Grid
      6. Carousel
      7. Pagination
      8. Jump to Item
      9. Alpha/Numeric Scroller
      10. New-Item Row
    5. Lists Abound
  9. 8. Doing Things: Actions and Commands
    1. Tap, Swipe, and Pinch
    2. Rotate and Shake
    3. Buttons
    4. Menu Bars
    5. Pop-Up Menus
    6. Drop-Down Menus
    7. Toolbars
    8. Links
    9. Action Panels
    10. Hover Tools
    11. Single-Clicking Versus Double-Clicking Items
    12. Keyboard Actions
      1. Shortcuts
      2. Tab Order
    13. Drag-and-Drop
    14. Typed Commands
    15. Affordance
    16. Direct Manipulation of Objects
    17. The Patterns
      1. Button Groups
      2. Hover or Pop-Up Tools
      3. Action Panel
      4. Prominent “Done” Button or Assumed Next Step
      5. Smart Menu Items
      6. Preview
      7. Spinners and Loading Indicators
      8. Cancelability
      9. Multilevel Undo
      10. Command History
      11. Macros
    18. Conclusion
  10. 9. Showing Complex Data
    1. The Basics of Information Graphics
      1. Organizational Models: How Is This Data Organized?
      2. Preattentive Variables: What’s Related to What?
      3. Navigation and Browsing: How Can I Explore This Data?
      4. Sorting and Rearranging: Can I Rearrange This Data to See It Differently?
      5. Searching and Filtering: How Can I See Only the Data That I Need?
      6. The Actual Data: What Are the Specific Data Values?
    2. The Patterns
      1. Datatips
      2. Data Spotlight
      3. Dynamic Queries
      4. Data Brushing
      5. Multi-Y Graph
      6. Small Multiples
      7. The Power of Data Visualization
  11. 10. Getting Input from Users: Forms and Controls
    1. The Basics of Form Design
      1. Form Design Continues to Evolve
      2. Further Reading
    2. The Patterns
      1. Forgiving Format
      2. Structured Format
      3. Fill-in-the-Blanks
      4. Input Hints
      5. Input Prompt
      6. Password Strength Meter
      7. Autocompletion
      8. Drop-down Chooser
      9. List Builder
      10. Good Defaults and Smart Prefills
      11. Error Messages
    3. Conclusion
  12. 11. User Interface Systems and Atomic Design
    1. UI Systems
      1. An Example Component-Based UI System: Microsoft’s Fluent
    2. Atomic Design: A Way of Designing Systems
      1. Overview
      2. The Atomic Design Hierarchy
    3. UI Frameworks
      1. Overview
      2. Benefits
      3. The Rise of UI Frameworks
      4. A Look at Selected UI Frameworks
    4. Conclusion
  13. 12. Beyond and Behind the Screen
    1. The Ingredients: Smart Systems
      1. Connected Devices
      2. Anticipatory Systems
      3. Assistive Systems
      4. Natural User Interfaces
    2. Conclusion
  14. Index

Product information

  • Title: Designing Interfaces, 3rd Edition
  • Author(s): Jenifer Tidwell, Charles Brewer, Aynne Valencia
  • Release date: January 2020
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781492051961