Designing Interfaces

Designing Interfaces

by Jenifer Tidwell
Released November 2005
Publisher(s): O'Reilly Media, Inc.
ISBN: 9780596555177

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.

Start your free trial

Book description

Designing a good interface isn't easy. Users demand software that is well-behaved, good-looking, 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 warningson 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.

Publisher resources

View/Submit Errata

Table of contents

  1. Designing Interfaces
    1. SPECIAL OFFER: Upgrade this ebook with O’Reilly
    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. ACKNOWLEDGMENTS
    3. 1. What Users Do
      1. 1.1. A MEANS TO AN END
      2. 1.2. THE BASICS OF USER RESEARCH
      3. 1.3. USERS' MOTIVATION TO LEARN
      4. 1.4. THE PATTERNS
        1. 1. safe exploration
        2. 2. instant gratification
        3. 3. satisficing
        4. 4. changes in midstream
        5. 5. deferred choices
        6. 6. incremental construction
        7. 7. habituation
        8. 8. spatial memory
        9. 9. prospective memory
        10. 10. streamlined repetition
        11. 11. keyboard only
        12. 12. other people's advice
    4. 2. Organizing the Content:Information Architecture and Application Structure
      1. 2.1. THE BASICS OF INFORMATION ARCHITECTURE: DIVIDING STUFF UP
        1. 2.1.1. LISTS OF OBJECTS
        2. 2.1.2. LISTS OF ACTIONS
        3. 2.1.3. LISTS OF SUBJECT CATEGORIES
        4. 2.1.4. LISTS OF TOOLS
      2. 2.2. PHYSICAL STRUCTURE
        1. 2.2.1. MULTIPLE WINDOWS
        2. 2.2.2. ONE-WINDOW PAGING
        3. 2.2.3. TILED PANES
      3. 2.3. THE PATTERNS
        1. 13. two-panel selector
          1. 2.3.1.1. what
          2. 2.3.1.2. use when
          3. 2.3.1.3. why
          4. 2.3.1.4. how
          5. 2.3.1.5. examples
        2. 14. canvas plus palette
          1. 2.3.2.1. what
          2. 2.3.2.2. use when
          3. 2.3.2.3. why
          4. 2.3.2.4. how
          5. 2.3.2.5. examples
        3. 15. one-window drilldown
          1. 2.3.3.1. what
          2. 2.3.3.2. use when
          3. 2.3.3.3. why
          4. 2.3.3.4. how
          5. 2.3.3.5. examples
        4. 16. alternative views
          1. 2.3.4.1. what
          2. 2.3.4.2. use when
          3. 2.3.4.3. why
          4. 2.3.4.4. how
        5. 17. wizard
          1. 2.3.5.1. what
          2. 2.3.5.2. use when
          3. 2.3.5.3. why
          4. 2.3.5.4. how
            1. 2.3.5.4.1. "CHUNKING" THE TASK
            2. 2.3.5.4.2. PHYSICAL STRUCTURE
          5. 2.3.5.5. examples
        6. 18. extras on demand
          1. 2.3.6.1. what
          2. 2.3.6.2. use when
          3. 2.3.6.3. why
          4. 2.3.6.4. how
        7. 19. intriguing branches
          1. 2.3.7.1. what
          2. 2.3.7.2. use when
          3. 2.3.7.3. why
          4. 2.3.7.4. how
        8. 20. multi-level help
          1. 2.3.8.1. what
          2. 2.3.8.2. use when
          3. 2.3.8.3. why
          4. 2.3.8.4. how
          5. 2.3.8.5. examples
    5. 3. Getting Around:Navigation, Signposts, and Wayfinding
      1. 3.1. STAYING FOUND
      2. 3.2. THE COST OF NAVIGATION
        1. 3.2.1. KEEPING DISTANCES SHORT
        2. 3.2.2. TOO MANY JUMPS
      3. 3.3. THE PATTERNS
        1. 21. clear entry points
          1. 3.3.1.1. what
          2. 3.3.1.2. use when
          3. 3.3.1.3. why
          4. 3.3.1.4. how
          5. 3.3.1.5. examples
        2. 22. global navigation
          1. 3.3.2.1. what
          2. 3.3.2.2. use when
          3. 3.3.2.3. why
          4. 3.3.2.4. how
          5. 3.3.2.5. examples
        3. 23. hub and spoke
          1. 3.3.3.1. what
          2. 3.3.3.2. use when
          3. 3.3.3.3. why
          4. 3.3.3.4. how
          5. 3.3.3.5. examples
        4. 24. pyramid
          1. 3.3.4.1. what
          2. 3.3.4.2. use when
          3. 3.3.4.3. why
          4. 3.3.4.4. how
          5. 3.3.4.5. examples
        5. 25. modal panel
          1. 3.3.5.1. what
          2. 3.3.5.2. use when
          3. 3.3.5.3. why
          4. 3.3.5.4. how
          5. 3.3.5.5. examples
        6. 26. sequence map
          1. 3.3.6.1. what
          2. 3.3.6.2. use when
          3. 3.3.6.3. why
          4. 3.3.6.4. how
          5. 3.3.6.5. examples
        7. 27. breadcrumbs
          1. 3.3.7.1. what
          2. 3.3.7.2. use when
          3. 3.3.7.3. why
          4. 3.3.7.4. how
          5. 3.3.7.5. examples
        8. 28. annotated scrollbar
          1. 3.3.8.1. what
          2. 3.3.8.2. use when
          3. 3.3.8.3. why
          4. 3.3.8.4. how
          5. 3.3.8.5. examples
        9. 29. color-coded sections
          1. 3.3.9.1. what
          2. 3.3.9.2. use when
          3. 3.3.9.3. why
          4. 3.3.9.4. how
          5. 3.3.9.5. examples
        10. 30. animated transition
          1. 3.3.10.1. what
          2. 3.3.10.2. use when
          3. 3.3.10.3. why
          4. 3.3.10.4. how
          5. 3.3.10.5. examples
        11. 31. escape hatch
          1. 3.3.11.1. what
          2. 3.3.11.2. use when
          3. 3.3.11.3. why
          4. 3.3.11.4. how
          5. 3.3.11.5. examples
    6. 4. Organizing the Page:Layout of Page Elements
      1. 4.1. THE BASICS OF PAGE LAYOUT
        1. 4.1.1. VISUAL HIERARCHY: WHAT'S IMPORTANT?
        2. 4.1.2. VISUAL FLOW: WHAT SHOULD I LOOK AT NEXT?
        3. 4.1.3. GROUPING AND ALIGNMENT: WHAT GOES WITH WHAT?
        4. 4.1.4. PUTTING IT ALL TOGETHER
        5. 4.1.5. USING DYNAMIC DISPLAYS
      2. 4.2. THE PATTERNS
        1. 32. visual framework
          1. 4.2.1.1. what
          2. 4.2.1.2. use when
          3. 4.2.1.3. why
          4. 4.2.1.4. how
          5. 4.2.1.5. examples
        2. 33. center stage
          1. 4.2.2.1. what
          2. 4.2.2.2. use when
          3. 4.2.2.3. why
          4. 4.2.2.4. how
          5. 4.2.2.5. examples
        3. 34. titled sections
          1. 4.2.3.1. what
          2. 4.2.3.2. use when
          3. 4.2.3.3. why
          4. 4.2.3.4. how
          5. 4.2.3.5. examples
        4. 35. card stack
          1. 4.2.4.1. what
          2. 4.2.4.2. use when
          3. 4.2.4.3. why
          4. 4.2.4.4. how
          5. 4.2.4.5. examples
        5. 36. closable panels
          1. 4.2.5.1. what
          2. 4.2.5.2. use when
          3. 4.2.5.3. why
          4. 4.2.5.4. how
          5. 4.2.5.5. examples
        6. 37. movable panels
          1. 4.2.6.1. what
          2. 4.2.6.2. use when
          3. 4.2.6.3. why
          4. 4.2.6.4. how
          5. 4.2.6.5. examples
        7. 38. right/left alignment
          1. 4.2.7.1. what
          2. 4.2.7.2. use when
          3. 4.2.7.3. why
          4. 4.2.7.4. how
          5. 4.2.7.5. examples
        8. 39. diagonal balance
          1. 4.2.8.1. what
          2. 4.2.8.2. use when
          3. 4.2.8.3. why
          4. 4.2.8.4. how
          5. 4.2.8.5. examples
        9. 40. property sheet
          1. 4.2.9.1. what
          2. 4.2.9.2. use when
          3. 4.2.9.3. why
          4. 4.2.9.4. how
          5. 4.2.9.5. examples
        10. 41. responsive disclosure
          1. 4.2.10.1. what
          2. 4.2.10.2. use when
          3. 4.2.10.3. why
          4. 4.2.10.4. how
          5. 4.2.10.5. examples
        11. 42. responsive enabling
          1. 4.2.11.1. what
          2. 4.2.11.2. use when
          3. 4.2.11.3. why
          4. 4.2.11.4. how
          5. 4.2.11.5. examples
        12. 43. liquid layout
          1. 4.2.12.1. what
          2. 4.2.12.2. use when
          3. 4.2.12.3. why
          4. 4.2.12.4. how
          5. 4.2.12.5. examples
    7. 5. Doing Things:Actions and Commands
      1. 5.1. PUSHING THE BOUNDARIES
      2. 5.2. THE PATTERNS
        1. 44. button groups
          1. 5.2.1.1. what
          2. 5.2.1.2. use when
          3. 5.2.1.3. why
          4. 5.2.1.4. how
            1. 5.2.1.4.1. PLACEMENT OF BUTTON GROUPS
          5. 5.2.1.5. examples
        2. 45. action panel
          1. 5.2.2.1. what
          2. 5.2.2.2. use when
          3. 5.2.2.3. why
            1. 5.2.2.3.1. PUTTING THE ACTION PANEL ON THE UI
            2. 5.2.2.3.2. STRUCTURING THE ACTIONS
            3. 5.2.2.3.3. LABELING THE ACTIONS
          4. 5.2.2.4. examples
        3. 46. prominent "done" button
          1. 5.2.3.1. what
          2. 5.2.3.2. use when
          3. 5.2.3.3. why
          4. 5.2.3.4. how
          5. 5.2.3.5. examples
        4. 47. smart menu items
          1. 5.2.4.1. what
          2. 5.2.4.2. use when
          3. 5.2.4.3. why
          4. 5.2.4.4. how
          5. 5.2.4.5. example
        5. 48. preview
          1. 5.2.5.1. what
          2. 5.2.5.2. use when
          3. 5.2.5.3. why
          4. 5.2.5.4. how
          5. 5.2.5.5. examples
        6. 49. progress indicator
          1. 5.2.6.1. what
          2. 5.2.6.2. use when
          3. 5.2.6.3. why
          4. 5.2.6.4. how
          5. 5.2.6.5. example
        7. 50. cancelability
          1. 5.2.7.1. what
          2. 5.2.7.2. use when
          3. 5.2.7.3. why
          4. 5.2.7.4. how
          5. 5.2.7.5. examples
        8. 51. multi-level undo
          1. 5.2.8.1. what
          2. 5.2.8.2. use when
          3. 5.2.8.3. why
          4. 5.2.8.4. how
            1. 5.2.8.4.1. UNDOABLE OPERATIONS
            2. 5.2.8.4.2. DESIGN AN UNDO STACK
            3. 5.2.8.4.3. PRESENTATION
          5. 5.2.8.5. examples
        9. 52. command history
          1. 5.2.9.1. what
          2. 5.2.9.2. use when
          3. 5.2.9.3. why
          4. 5.2.9.4. how
          5. 5.2.9.5. examples
        10. 53. macros
          1. 5.2.10.1. what
          2. 5.2.10.2. use when
          3. 5.2.10.3. why
          4. 5.2.10.4. how
            1. 5.2.10.4.1. DEFINING THE MACRO
            2. 5.2.10.4.2. RUNNING THE MACRO
          5. 5.2.10.5. examples
    8. 6. Showing Complex Data:Trees, Tables, and Other Information Graphics
      1. 6.1. THE BASICS OF INFORMATION GRAPHICS
        1. 6.1.1. ORGANIZATIONAL MODELS: HOW IS THIS DATA ORGANIZED?
        2. 6.1.2. PREATTENTIVE VARIABLES: WHAT'S RELATED TO WHAT?
        3. 6.1.3. NAVIGATION AND BROWSING: HOW CAN I EXPLORE THIS DATA?
        4. 6.1.4. SORTING AND REARRANGEMENT: CAN I REARRANGE THIS DATA TO SEE IT DIFFERENTLY?
        5. 6.1.5. SEARCHING AND FILTERING: SHOW ME ONLY WHAT I NEED TO KNOW.
        6. 6.1.6. THE ACTUAL DATA: WHAT ARE THE SPECIFIC DATA VALUES?
      2. 6.2. THE PATTERNS
        1. 54. overview plus detail
          1. 6.2.1.1. what
          2. 6.2.1.2. use when
          3. 6.2.1.3. why
          4. 6.2.1.4. how
          5. 6.2.1.5. examples
        2. 55. datatips
          1. 6.2.2.1. what
          2. 6.2.2.2. use when
          3. 6.2.2.3. why
          4. 6.2.2.4. how
          5. 6.2.2.5. examples
        3. 56. dynamic queries
          1. 6.2.3.1. what
          2. 6.2.3.2. use when
          3. 6.2.3.3. why
          4. 6.2.3.4. how
          5. 6.2.3.5. examples
        4. 57. data brushing
          1. 6.2.4.1. what
          2. 6.2.4.2. use when
          3. 6.2.4.3. why
          4. 6.2.4.4. how
          5. 6.2.4.5. examples
        5. 58. local zooming
          1. 6.2.5.1. what
          2. 6.2.5.2. use when
          3. 6.2.5.3. why
          4. 6.2.5.4. how
          5. 6.2.5.5. examples
        6. 59. row striping
          1. 6.2.6.1. what
          2. 6.2.6.2. use when
          3. 6.2.6.3. why
          4. 6.2.6.4. how
          5. 6.2.6.5. examples
        7. 60. sortable table
          1. 6.2.7.1. what
          2. 6.2.7.2. use when
          3. 6.2.7.3. why
          4. 6.2.7.4. how
          5. 6.2.7.5. examples
        8. 61. jump to item
          1. 6.2.8.1. what
          2. 6.2.8.2. use when
          3. 6.2.8.3. why
          4. 6.2.8.4. how
          5. 6.2.8.5. example
        9. 62. new-item row
          1. 6.2.9.1. what
          2. 6.2.9.2. use when
          3. 6.2.9.3. why
          4. 6.2.9.4. how
          5. 6.2.9.5. example
        10. 63. cascading lists
          1. 6.2.10.1. what
          2. 6.2.10.2. use when
          3. 6.2.10.3. why
          4. 6.2.10.4. how
          5. 6.2.10.5. examples
        11. 64. tree table
          1. 6.2.11.1. what
          2. 6.2.11.2. use when
          3. 6.2.11.3. why
          4. 6.2.11.4. how
          5. 6.2.11.5. example
        12. 65. multi-y graph
          1. 6.2.12.1. what
          2. 6.2.12.2. use when
          3. 6.2.12.3. why
          4. 6.2.12.4. how
          5. 6.2.12.5. examples
        13. 66. small multiples
          1. 6.2.13.1. what
          2. 6.2.13.2. use when
          3. 6.2.13.3. why
          4. 6.2.13.4. how
          5. 6.2.13.5. examples
        14. 67. treemap
          1. 6.2.14.1. what
          2. 6.2.14.2. use when
          3. 6.2.14.3. why
          4. 6.2.14.4. how
          5. 6.2.14.5. examples
    9. 7. Getting Input from Users:Forms and Controls
      1. 7.1. THE BASICS OF FORM DESIGN
      2. 7.2. CONTROL CHOICE
        1. 7.2.1. LISTS OF ITEMS
        2. 7.2.2. TEXT
        3. 7.2.3. NUMBERS
        4. 7.2.4. DATES OR TIMES
      3. 7.3. THE PATTERNS
        1. 68. forgiving format
          1. 7.3.1.1. What
          2. 7.3.1.2. use when
          3. 7.3.1.3. why
          4. 7.3.1.4. how
          5. 7.3.1.5. example
        2. 69. structured format
          1. 7.3.2.1. what
          2. 7.3.2.2. use when
          3. 7.3.2.3. why
          4. 7.3.2.4. how
          5. 7.3.2.5. examples
        3. 70. fill-in-the-blanks
          1. 7.3.3.1. what
          2. 7.3.3.2. use when
          3. 7.3.3.3. why
          4. 7.3.3.4. how
          5. 7.3.3.5. examples
        4. 71. input hints
          1. 7.3.4.1. what
          2. 7.3.4.2. use when
          3. 7.3.4.3. why
          4. 7.3.4.4. how
          5. 7.3.4.5. example
        5. 72. input prompt
          1. 7.3.5.1. what
          2. 7.3.5.2. use when
          3. 7.3.5.3. why
          4. 7.3.5.4. how
          5. 7.3.5.5. example
        6. 73. autocompletion
          1. 7.3.6.1. what
          2. 7.3.6.2. use when
          3. 7.3.6.3. why
          4. 7.3.6.4. how
          5. 7.3.6.5. examples
        7. 74. dropdown chooser
          1. 7.3.7.1. what
          2. 7.3.7.2. use when
          3. 7.3.7.3. why
          4. 7.3.7.4. how
          5. 7.3.7.5. examples
        8. 75. illustrated choices
          1. 7.3.8.1. what
          2. 7.3.8.2. use when
          3. 7.3.8.3. why
          4. 7.3.8.4. how
          5. 7.3.8.5. examples
        9. 76. list builder
          1. 7.3.9.1. what
          2. 7.3.9.2. use when
          3. 7.3.9.3. why
          4. 7.3.9.4. how
          5. 7.3.9.5. examples
        10. 77. good defaults
          1. 7.3.10.1. what
          2. 7.3.10.2. use when
          3. 7.3.10.3. why
          4. 7.3.10.4. how
          5. 7.3.10.5. examples
        11. 78. same-page error messages
          1. 7.3.11.1. what
          2. 7.3.11.2. use when
          3. 7.3.11.3. why
          4. 7.3.11.4. how
          5. 7.3.11.5. examples
    10. 8. Builders and Editors
      1. 8.1. THE BASICS OF EDITOR DESIGN
        1. 8.1.1. WYSIWYG EDITING
        2. 8.1.2. DIRECT MANIPULATION
        3. 8.1.3. MODES
        4. 8.1.4. SELECTION
      2. 8.2. THE PATTERNS
        1. 79. edit-in-place
          1. 8.2.1.1. what
          2. 8.2.1.2. use when
          3. 8.2.1.3. why
          4. 8.2.1.4. how
          5. 8.2.1.5. examples
        2. 80. smart selection
          1. 8.2.2.1. what
          2. 8.2.2.2. use when
          3. 8.2.2.3. why
          4. 8.2.2.4. how
          5. 8.2.2.5. example
        3. 81. composite selection
          1. 8.2.3.1. what
          2. 8.2.3.2. use when
          3. 8.2.3.3. why
          4. 8.2.3.4. how
          5. 8.2.3.5. example
        4. 82. one-off mode
          1. 8.2.4.1. what
          2. 8.2.4.2. use when
          3. 8.2.4.3. why
          4. 8.2.4.4. how
          5. 8.2.4.5. example
        5. 83. spring-loaded mode
          1. 8.2.5.1. what
          2. 8.2.5.2. use when
          3. 8.2.5.3. why
          4. 8.2.5.4. how
          5. 8.2.5.5. examples
        6. 84. constrained resize
          1. 8.2.6.1. what
          2. 8.2.6.2. use when
          3. 8.2.6.3. why
          4. 8.2.6.4. how
          5. 8.2.6.5. examples
        7. 85. magnetism
          1. 8.2.7.1. what
          2. 8.2.7.2. use when
          3. 8.2.7.3. why
          4. 8.2.7.4. how
          5. 8.2.7.5. examples
        8. 86. guides
          1. 8.2.8.1. what
          2. 8.2.8.2. use when
          3. 8.2.8.3. why
          4. 8.2.8.4. how
          5. 8.2.8.5. examples
        9. 87. paste variations
          1. 8.2.9.1. what
          2. 8.2.9.2. use when
          3. 8.2.9.3. why
          4. 8.2.9.4. how
          5. 8.2.9.5. examples
    11. 9. Making It Look Good:Visual Style and Aesthetics
      1. 9.1. SAME CONTENT, DIFFERENT STYLES
      2. 9.2. THE BASICS OF VISUAL DESIGN
        1. 9.2.1. COLOR
        2. 9.2.2. TYPOGRAPHY
        3. 9.2.3. SPACIOUSNESS AND CROWDING
        4. 9.2.4. ANGLES AND CURVES
        5. 9.2.5. TEXTURE AND RHYTHM
        6. 9.2.6. IMAGES
        7. 9.2.7. CULTURAL REFERENCES
        8. 9.2.8. REPEATED VISUAL MOTIFS
      3. 9.3. WHAT THIS MEANS FOR DESKTOP APPLICATIONS
      4. 9.4. THE PATTERNS
        1. 88. deep background
          1. 9.4.1.1. what
          2. 9.4.1.2. use when
          3. 9.4.1.3. why
          4. 9.4.1.4. how
        2. 89. few hues, many values
          1. 9.4.2.1. what
          2. 9.4.2.2. use when
          3. 9.4.2.3. why
          4. 9.4.2.4. how
          5. 9.4.2.5. examples
        3. 90. corner treatments
          1. 9.4.3.1. what
          2. 9.4.3.2. use when
          3. 9.4.3.3. why
          4. 9.4.3.4. how
          5. 9.4.3.5. examples
        4. 91. borders that echo fonts
          1. 9.4.4.1. what
          2. 9.4.4.2. use when
          3. 9.4.4.3. why
          4. 9.4.4.4. how
          5. 9.4.4.5. examples
        5. 92. hairlines
          1. 9.4.5.1. what
          2. 9.4.5.2. use when
          3. 9.4.5.3. why
          4. 9.4.5.4. how
          5. 9.4.5.5. examples
        6. 93. contrasting font weights
          1. 9.4.6.1. what
          2. 9.4.6.2. use when
          3. 9.4.6.3. why
          4. 9.4.6.4. how
          5. 9.4.6.5. examples
        7. 94. skins
          1. 9.4.7.1. what
          2. 9.4.7.2. use when
          3. 9.4.7.3. why
          4. 9.4.7.4. how
    12. Index
    13. About the Author
    14. Colophon
    15. SPECIAL OFFER: Upgrade this ebook with O’Reilly

Product information

  • Title: Designing Interfaces
  • Author(s): Jenifer Tidwell
  • Release date: November 2005
  • Publisher(s): O'Reilly Media, Inc.
  • ISBN: 9780596555177