Designing Interfaces, 2nd Edition

Designing Interfaces, 2nd Edition

by Jenifer Tidwell
Released December 2010
Publisher(s): O'Reilly Media, Inc.
ISBN: 9781449379704

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
Start your free trial

Book description

Despite all of the UI toolkits available today, it's still not easy to design good application interfaces. This bestselling book is one of the few reliable sources to help you navigate through the maze of design options. By capturing UI best practices and reusable ideas as design patterns, Designing Interfaces provides solutions to common design problems that you can tailor to the situation at hand.

This updated edition includes patterns for mobile apps and social media, as well as web applications and desktop software. Each pattern contains full-color examples and practical design advice that you can use immediately. Experienced designers can use this guide as a sourcebook of ideas; novices will find a roadmap to the world of interface and interaction design.

  • Design engaging and usable interfaces with more confidence and less guesswork
  • Learn design concepts that are often misunderstood, such as affordances, visual hierarchy, navigational distance, and the use of color
  • Get recommendations for specific UI patterns, including alternatives and warnings on when not to use them
  • Mix and recombine UI ideas as you see fit
  • Polish the look and feel of your interfaces with graphic design principles and patterns

"Anyone who's serious about designing interfaces should have this book on their shelf for reference. It's the most comprehensive cross-platform examination of common interface patterns anywhere."--Dan Saffer, author of Designing Gestural Interfaces (O'Reilly) and Designing for Interaction (New Riders)

Publisher resources

View/Submit Errata

Table of contents

  1. Introduction to the Second Edition
    1. Changes in the Second Edition
  2. Preface
    1. Small Interface Pieces, Loosely Joined
    2. About Patterns in General
    3. Other Pattern Collections
    4. About the Patterns in This Book
    5. Audience
    6. How This Book Is Organized
    7. Comments and Questions
    8. Safari® Books Online
    9. Acknowledgments
  3. 1. What Users Do
    1. A Means to an End
    2. The Basics of User Research
    3. Users’ Motivation to Learn
    4. The Patterns
      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. Other People’s Advice
      14. Personal Recommendations
  4. 2. Organizing the Content: Information Architecture and Application Structure
    1. The Big Picture
      1. Show One Single Thing
        1. Show One Single Thing
        2. Show a List of Things
        3. Provide Tools to Create a Thing
        4. Facilitate a Single Task
    2. The Patterns
      1. Feature, Search, and Browse
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      2. News Stream
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      3. Picture Manager
        1. What
        2. Use when
        3. Why
        4. How
          1. The Thumbnail Grid
          2. The single-item view
          3. The browsing interface
        5. Examples
        6. In other libraries
      4. Dashboard
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      5. Canvas Plus Palette
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      6. Wizard
        1. What
        2. Use when
        3. Why
        4. How
          1. “Chunking” the task
          2. Physical structure
        5. Examples
        6. In other libraries
      7. Settings Editor
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      8. Alternative Views
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      9. Many Workspaces
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      10. Multi-Level Help
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
  5. 3. Getting Around: Navigation, Signposts, and Wayfinding
    1. Staying Found
    2. The Cost of Navigation
      1. Keep Distances Short
        1. Keep Distances Short
    3. Navigational Models
    4. Design Conventions for Websites
    5. The Patterns
      1. Clear Entry Points
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      2. Menu Page
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      3. Pyramid
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      4. Modal Panel
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      5. Deep-linked State
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      6. Escape Hatch
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      7. Fat Menus
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      8. Sitemap Footer
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      9. Sign-in Tools
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      10. Sequence Map
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      11. Breadcrumbs
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      12. Annotated Scrollbar
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      13. Animated Transition
        1. What
        2. Use when
        3. Why
        4. How
        5. In other libraries
  6. 4. Organizing the Page: Layout of Page Elements
    1. The Basics of Page Layout
      1. Visual Hierarchy: What’s Important? What’s Related?
        1. Visual Hierarchy: What’s Important? What’s Related?
          1. How to make things look important
          2. How to show relationships among page elements
        2. Visual Flow: What Should I Look at Next?
        3. Using Dynamic Displays
    2. The Patterns
      1. Visual Framework
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      2. Center Stage
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      3. Grid of Equals
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      4. Titled Sections
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      5. Module Tabs
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      6. Accordion
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      7. Collapsible Panels
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      8. Movable Panels
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      9. Right/Left Alignment
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      10. Diagonal Balance
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      11. Responsive Disclosure
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      12. Responsive Enabling
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      13. Liquid Layout
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
  7. 5. Lists of Things
    1. Use Cases for Lists
    2. Back to Information Architecture
    3. Some Solutions
    4. The Patterns
      1. Two-Panel Selector
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      2. One-Window Drilldown
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      3. List Inlay
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      4. Thumbnail Grid
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      5. Carousel
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      6. Row Striping
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      7. Pagination
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      8. Jump to Item
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      9. Alphabet Scroller
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      10. Cascading Lists
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      11. Tree Table
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      12. New-Item Row
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
  8. 6. Doing Things: Actions and Commands
    1. Pushing the Boundaries
    2. The Patterns
      1. Button Groups
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      2. Hover Tools
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      3. Action Panel
        1. What
        2. Use when
        3. Why
        4. How
          1. Putting the Action Panel on the UI
          2. Structuring the actions
          3. Labeling the actions
        5. Examples
        6. In other libraries
      4. Prominent “Done” Button
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      5. Smart Menu Items
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      6. Preview
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      7. Progress Indicator
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      8. Cancelability
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      9. Multi-Level Undo
        1. What
        2. Use when
        3. Why
        4. How
          1. Undoable operations
          2. Design an undo stack
          3. Presentation
        5. Examples
        6. In other libraries
      10. Command History
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      11. Macros
        1. What
        2. Why
        3. How
          1. Defining the macro
          2. Running the macro
        4. Examples
  9. 7. Showing Complex Data: Trees, Charts, and Other Information Graphics
    1. The Basics of Information Graphics
      1. Organizational Models: How Is This Data Organized?
        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. Overview Plus Detail
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      2. Datatips
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      3. Data Spotlight
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      4. Dynamic Queries
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      5. Data Brushing
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      6. Local Zooming
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      7. Sortable Table
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      8. Radial Table
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      9. Multi-Y Graph
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      10. Small Multiples
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      11. Treemap
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
  10. 8. Getting Input from Users: Forms and Controls
    1. The Basics of Form Design
    2. Control Choice
      1. Lists of Items
        1. Lists of Items
        2. Text
        3. Numbers
        4. Dates or Times
    3. The Patterns
      1. Forgiving Format
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      2. Structured Format
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      3. Fill-in-the-Blanks
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      4. Input Hints
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      5. Input Prompt
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      6. Password Strength Meter
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      7. Autocompletion
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      8. Dropdown Chooser
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      9. List Builder
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      10. Good Defaults
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      11. Same-Page Error Messages
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
  11. 9. Using Social Media
    1. What This Chapter Does Not Cover
    2. The Basics of Social Media
    3. The Patterns
      1. Editorial Mix
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      2. Personal Voices
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      3. Repost and Comment
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      4. Conversation Starters
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      5. Inverted Nano-pyramid
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      6. Timing Strategy
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      7. Specialized Streams
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      8. Social Links
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      9. Sharing Widget
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      10. News Box
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      11. Content Leaderboard
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      12. Recent Chatter
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
  12. 10. Going Mobile
    1. The Challenges of Mobile Design
      1. How to Approach a Mobile Design
        1. How to Approach a Mobile Design
          1. 1. What do users in a mobile context actually need?
          2. 2. Strip the site or app down to its essence
          3. 3. If you can, use the device’s hardware
          4. 4. Linearize your content
          5. 5. Optimize the most common interaction sequences
        2. Some Worthy Examples
    2. The Patterns
      1. Vertical Stack
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      2. Filmstrip
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      3. Touch Tools
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      4. Bottom Navigation
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      5. Thumbnail-and-Text List
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      6. Infinite List
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      7. Generous Borders
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      8. Text Clear Button
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      9. Loading Indicators
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      10. Richly Connected Apps
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      11. Streamlined Branding
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
  13. 11. Making It Look Good: Visual Style and Aesthetics
    1. Same Content, Different Styles
    2. The Basics of Visual Design
      1. Color
        1. Color
        2. Typography
        3. Spaciousness and Crowding
        4. Angles and Curves
        5. Texture and Rhythm
        6. Images
        7. Cultural References
        8. Repeated Visual Motifs
    3. What This Means for Desktop Applications
    4. The Patterns
      1. Deep Background
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      2. Few Hues, Many Values
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      3. Corner Treatments
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
      4. Borders That Echo Fonts
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      5. Hairlines
        1. What
        2. Use when
        3. How
        4. Examples
      6. Contrasting Font Weights
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
      7. Skins and Themes
        1. What
        2. Use when
        3. Why
        4. How
        5. Examples
        6. In other libraries
  14. A. References
    1. Websites
    2. Books
  15. Index
  16. About the Author
  17. Colophon
  18. Copyright

Product information

  • Title: Designing Interfaces, 2nd Edition
  • Author(s): Jenifer Tidwell
  • Release date: December 2010
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9781449379704