You are previewing About Face 3: The Essentials of Interaction Design.
O'Reilly logo
About Face 3: The Essentials of Interaction Design

Book Description

This completely updated volume presents the effective and practical tools you need to design great desktop applications, Web 2.0 sites, and mobile devices. You’ll learn the principles of good product behavior and gain an understanding of Cooper’s Goal-Directed Design method, which involves everything from conducting user research to defining your product using personas and scenarios. Ultimately, you’ll acquire the knowledge to design the best possible digital products and services.

Table of Contents

  1. Copyright
    1. Dedication
  2. About the Authors
  3. Credits
  4. Foreword: The Postindustrial World
  5. Acknowledgments
  6. Introduction to the Third Edition
    1. A Brief History of Interaction Design
    2. Why Call It Interaction Design?
    3. Working with the Product Team
    4. What This Book Is and What It Is Not
    5. Changes from the Previous Editions
    6. Examples Used in This Book
    7. Who Should Read This Book
  7. I. Understanding Goal-Directed Design
    1. 1. Goal-Directed Design
      1. Digital Products Need Better Design Methods
        1. The creation of digital products today
          1. Digital products are rude
          2. Digital products require people to think like computers
          3. Digital products exhibit poor behavior
          4. Digital products require humans to do the heavy lifting
        2. Why are these products so bad?
          1. Ignorance about users
          2. Conflicting interests
          3. The lack of a process
      2. The Evolution of Design in Manufacturing
      3. Planning and Designing Behavior
      4. Recognizing User Goals
        1. Goals versus tasks and activities
        2. Designing to meet goals in context
      5. The Goal-Directed Design Process
        1. Bridging the gap
          1. Design as product definition
          2. Designers as researchers
          3. Between research and design: Models, requirements, and frameworks
        2. A process overview
          1. Research
          2. Modeling
          3. Requirements Definition
          4. Framework Definition
          5. Refinement
          6. Development Support
        3. Goals, not features, are the key to product success
    2. 2. Implementation Models and Mental Models
      1. Implementation Models
      2. User Mental Models
      3. Represented Models
      4. Most Software Conforms to Implementation Models
        1. User interfaces designed by engineers follow the implementation model
        2. Mathematical thinking leads to implementation model interfaces
      5. Mechanical-Age versus Information-Age Represented Models
        1. Mechanical-Age representations
        2. New technology demands new representations
        3. Mechanical-Age representations degrade user interaction
        4. Improving on Mechanical-Age representations: An example
    3. 3. Beginners, Experts, and Intermediates
      1. Perpetual Intermediates
      2. Designing for Different Experience Levels
        1. What beginners need
        2. Getting beginners on board
        3. What experts need
        4. What perpetual intermediates need
    4. 4. Understanding Users: Qualitative Research
      1. Qualitative versus Quantitative Research
        1. The value of qualitative research
        2. Types of qualitative research
          1. Stakeholder interviews
          2. Subject matter expert (SME) interviews
          3. Customer interviews
          4. User Interviews
          5. User observation
          6. Literature review
          7. Product and competitive audits
      2. Ethnographic Interviews: Interviewing and Observing Users
        1. Contextual inquiry
        2. Improving on contextual inquiry
        3. Preparing for ethnographic interviews
          1. Identifying candidates
            1. The persona hypothesis
            2. Roles in business and consumer domains
            3. Behavioral and demographic variables
            4. Domain expertise versus technical expertise
            5. Environmental considerations
          2. Putting a plan together
        4. Conducting ethnographic interviews
          1. Interview teams and timing
          2. Phases of ethnographic interviews
          3. Basic methods
            1. Interview where the interaction happens
            2. Avoid a fixed set of questions
            3. Focus on goals first, tasks second
            4. Avoid making the user a designer
            5. Avoid discussions of technology
            6. Encourage storytelling
            7. Ask for a show and tell
            8. Avoid leading questions
          4. After the interviews
      3. Other Types of Research
        1. Focus groups
        2. Market demographics and market segments
        3. Usability and user testing
        4. Card sorting
        5. Task analysis
      4. Notes
    5. 5. Modeling Users: Personas and Goals
      1. Why Model?
      2. Personas
        1. Strengths of personas as a design tool
          1. The elastic user
          2. Self-referential design
          3. Edge cases
        2. Personas are based on research
        3. Personas are represented as individual people
        4. Personas represent groups of users
          1. Personas and reuse
          2. Archetypes versus stereotypes
        5. Personas explore ranges of behavior
        6. Personas must have motivations
        7. Personas can also represent nonusers
        8. Personas and other user models
          1. User roles
          2. Personas versus user profiles
          3. Personas versus market segments
        9. When rigorous personas aren’t possible: Provisional personas
      3. Goals
        1. Goals motivate usage patterns
        2. Goals should be inferred from qualitative data
        3. User goals and cognitive processing
          1. Designing for Visceral Responses
          2. Designing for Behavior
          3. Designing for Reflection
        4. The three types of user goals
          1. Experience goals
          2. End goals
          3. Life goals
        5. User goals are user motivations
        6. Types of goals
          1. Customer goals
          2. Business and organizational goals
          3. Technical goals
        7. Successful products meet user goals first
      4. Constructing Personas
        1. Step 1: Identify behavioral variables
        2. Step 2: Map interview subjects to behavioral variables
        3. Step 3: Identify significant behavior patterns
        4. Step 4: Synthesize characteristics and relevant goals
          1. Synthesizing goals
          2. Persona relationships
        5. Step 5: Check for completeness and redundancy
        6. Step 6: Expand description of attributes and behaviors
        7. Step 7: Designate persona types
          1. Primary personas
          2. Secondary personas
          3. Supplemental personas
          4. Customer personas
          5. Served personas
          6. Negative personas
      5. Other Models
        1. Workflow models
        2. Artifact models
        3. Physical models
      6. Notes
    6. 6. The Foundations of Design: Scenarios and Requirements
      1. Scenarios: Narrative as a Design Tool
        1. Scenarios in design
        2. Using personas in scenarios
        3. Different types of scenarios
        4. Persona-based scenarios versus use cases
      2. Requirements: The “What” of Interaction Design
      3. Requirements Definition Using Personas and Scenarios
        1. Step 1: Creating problem and vision statements
        2. Step 2: Brainstorming
        3. Step 3: Identifying persona expectations
        4. Step 4: Constructing context scenarios
          1. An example context scenario
          2. Pretending it’s magic
        5. Step 5: Identifying requirements
          1. Data requirements
          2. Functional requirements
          3. Other requirements
      4. Notes
    7. 7. From Requirements to Design: The Framework and Refinement
      1. The Design Framework
        1. Defining the interaction framework
          1. Step 1: Define form factor, posture, and input methods
          2. Step 2: Define functional and data elements
            1. Pretend the product is human
            2. Apply principles and patterns
          3. Step 3: Determine functional groups and hierarchy
          4. Step 4: Sketch the interaction framework
          5. Step 5: Construct key path scenarios
            1. Storyboarding
            2. Process variations and iteration
          6. Step 6: Check designs with validation scenarios
        2. Defining the visual design framework
          1. Step 1: Develop visual language studies
          2. Step 2: Apply the chosen visual style to the screen archetype
        3. Defining the industrial design framework
          1. Step 1: Collaborate with interaction designers about form factor and input methods
          2. Step 2: Develop rough prototypes
          3. Step 3: Develop form language studies
      2. Refining the Form and Behavior
      3. Design Validation and Usability Testing
        1. When to test: Summative and formative evaluations
        2. Conducting formative usability tests
        3. Designer involvement in usability studies
      4. Notes
  8. II. Designing Behavior and Form
    1. 8. Synthesizing Good Design: Principles and Patterns
      1. Interaction Design Principles
        1. Principles operate at different levels of detail
        2. Behavioral and interface-level principles minimize work
      2. Design Values
        1. Ethical interaction design
          1. Do no harm
          2. Improve human situations
        2. Purposeful interaction design
        3. Pragmatic interaction design
        4. Elegant interaction design
          1. Represent the simplest complete solution
          2. Possess internal coherence
          3. Appropriately accommodate and stimulate cognition and emotion
      3. Interaction Design Patterns
        1. Architectural patterns and interaction design
        2. Recording and using interaction design patterns
        3. Types of interaction design patterns
      4. Notes
    2. 9. Platform and Posture
      1. Posture
      2. Designing Desktop Software
        1. Sovereign posture
          1. Users of sovereign applications are typically intermediates
          2. Be generous with screen real estate
          3. Use a minimal visual style
          4. Rich visual feedback
          5. Rich input
          6. Document-centric applications
        2. Transient posture
          1. Bright and clear
          2. Keep it simple
          3. Remember user choices
        3. Daemonic posture
      3. Designing for the Web
        1. Informational Web sites
          1. Postures for informational Web sites
            1. Sovereign attributes
            2. Transient attributes
        2. Transactional Web sites
          1. Postures for transactional Web sites
        3. Web applications
          1. Postures for Web applications
        4. Internet-enabled applications
        5. Intranets
      4. Other Platforms
        1. General design principles
          1. Don’t think of your product as a computer
          2. Integrate your hardware and software design
          3. Let context drive the design
          4. Use modes judiciously, if at all
          5. Limit the scope
          6. Balance navigation with display density
          7. Minimize input complexity
        2. Designing for handhelds
          1. Postures for handheld devices
        3. Designing for kiosks
          1. Transaction versus exploration
          2. Interaction in a public environment
          3. Managing input
          4. Postures for kiosks
        4. Designing for television-based interfaces
        5. Designing for automotive interfaces
        6. Designing for appliances
        7. Designing for audible interfaces
      5. Notes
    3. 10. Orchestration and Flow
      1. Flow and Transparency
      2. Designing Harmonious Interactions
      3. Notes
    4. 11. Eliminating Excise
      1. GUI Excise
        1. Excise and expert users
        2. Training wheels
        3. “Pure” excise
        4. Visual excise
        5. Determining what is excise
      2. Stopping the Proceedings
        1. Errors, notifiers, and confirmation messages
        2. Making users ask permission
      3. Common Excise Traps
      4. Navigation Is Excise
        1. Navigation among multiple screens, views, or pages
        2. Navigation between panes
        3. Navigation between tools and menus
        4. Navigation of information
      5. Improving Navigation
        1. Reduce the number of places to go
        2. Provide signposts
          1. Menus
          2. Toolbars
          3. Other interface signposts
        3. Provide overviews
        4. Provide appropriate mapping of controls to functions
        5. Inflect your interface to match user needs
        6. Avoid hierarchies
    5. 12. Designing Good Behavior
      1. Designing Considerate Products
        1. Considerate products take an interest
        2. Considerate products are deferential
        3. Considerate products are forthcoming
        4. Considerate products use common sense
        5. Considerate products anticipate human needs
        6. Considerate products are conscientious
        7. Considerate products don’t burden you with their personal problems
        8. Considerate products keep us informed
        9. Considerate products are perceptive
        10. Considerate products are self-confident
        11. Considerate products don’t ask a lot of questions
        12. Considerate products fail gracefully
        13. Considerate products know when to bend the rules
        14. Considerate products take responsibility
      2. Designing Smart Products
        1. Putting the idle cycles to work
        2. Smart products have a memory
        3. Task coherence
          1. Remembering choices and defaults
          2. Remembering patterns
        4. Actions to remember
          1. File locations
          2. Deduced information
          3. Multisession undo
          4. Past data entries
          5. Foreign application activities on application files
        5. Applying memory to your applications
          1. Decision-set reduction
          2. Preference thresholds
          3. Mostly right, most of the time
    6. 13. Metaphors, Idioms, and Affordances
      1. Interface Paradigms
        1. Implementation-centric interfaces
        2. Metaphoric interfaces
          1. Limitations of metaphors
          2. Intuition, instinct, and learning
        3. Idiomatic interfaces
          1. Graphical interfaces are largely idiomatic
          2. Good idioms must be learned only once
          3. Branding and idioms
      2. Further Limitations of Metaphors
        1. Finding good metaphors
        2. The problems with global metaphors
        3. Macs and metaphors: A revisionist view
      3. Building Idioms
      4. Manual Affordances
        1. Semantics of manual affordances
        2. Fulfilling user expectations of affordances
    7. 14. Visual Interface Design
      1. Art, Visual Interface Design, and Other Design Disciplines
        1. Graphic design and user interfaces
        2. Visual information design
        3. Industrial design
      2. The Building Blocks of Visual Interface Design
        1. Shape
        2. Size
        3. Value
        4. Hue
        5. Orientation
        6. Texture
        7. Position
      3. Principles of Visual Interface Design
        1. Use visual properties to group elements and provide clear hierarchy
          1. Creating hierarchy
          2. Establishing relationships
          3. The squint test
        2. Provide visual structure and flow at each level of organization
          1. Alignment and the grid
          2. Creating a logical path
          3. Symmetry and balance
        3. Use cohesive, consistent, and contextually appropriate imagery
          1. Function-oriented icons
          2. Associating visual symbols to objects
          3. Rendering icons and visual symbols
          4. Visualizing behaviors
        4. Integrate style and function comprehensively and purposefully
          1. Form versus function
          2. Brand, customer experience, and the user interface
        5. Avoid visual noise and clutter
        6. Keep it simple
        7. Text in visual interfaces
        8. Color in visual interfaces
        9. Visual interface design for handhelds and other devices
      4. Principles of Visual Information Design
        1. Enforce visual comparisons
        2. Show causality
        3. Show multiple variables
        4. Integrate text, graphics, and data in one display
        5. Ensure the quality, relevance, and integrity of the content
        6. Show things adjacently in space, not stacked in time
        7. Don’t de-quantify quantifiable data
      5. Consistency and Standards
        1. Benefits of interface standards
        2. Risks of interface standards
        3. Standards, guidelines, and rules of thumb
        4. When to violate guidelines
        5. Consistency and standards across applications
  9. III. Designing Interaction Details
    1. 15. Searching and Finding: Improving Data Retrieval
      1. Storage and Retrieval Systems
      2. Storage and Retrieval in the Physical World
        1. Everything in its place: Storage and retrieval by location
        2. Indexed retrieval
      3. Storage and Retrieval in the Digital World
        1. Digital retrieval methods
        2. Attribute-based retrieval systems
      4. Relational Databases versus Digital Soup
        1. Organizing the unorganizable
        2. Problems with databases
        3. The attribute-based alternative
      5. Natural Language Output: An Ideal Interface for Attribute-Based Retrieval
    2. 16. Understanding Undo
      1. Users and Undo
        1. User mental models of mistakes
        2. Undo enables exploration
      2. Designing an Undo Facility
      3. Types and Variants of Undo
        1. Incremental and procedural actions
        2. Blind and explanatory Undo
        3. Single and multiple Undo
          1. Limitations of single Undo
          2. Limitations of multiple Undo
          3. The model problems of multiple Undo
          4. You bet your LIFO
        4. Redo
        5. Group multiple Undo
      4. Other Models for Undo-Like Behavior
        1. Comparison: What would this look like?
        2. Category-specific Undo
        3. Deleted data buffers
        4. Versioning and reversion
        5. Freezing
      5. Undo-Proof Operations
    3. 17. Rethinking Files and Save
      1. What’s Wrong with Saving Changes to Files?
      2. Problems with the Implementation Model
        1. Closing documents and removing unwanted changes
        2. Save As
        3. Archiving
      3. Implementation Model versus Mental Model
      4. Dispensing with the Implementation Model
      5. Designing with a Unified File Model
        1. Automatically saving
        2. Creating a copy
        3. Naming and renaming
        4. Placing and moving
        5. Specifying the stored format
        6. Reversing changes
        7. Abandoning all changes
        8. Creating a version
        9. A new File menu
        10. A new name for the File menu
        11. Communicating status
      6. Are Disks and File Systems a Feature?
      7. Time for Change
    4. 18. Improving Data Entry
      1. Data Integrity versus Data Immunity
        1. Data immunity
        2. What about missing data?
        3. Data entry and fudgeability
      2. Auditing versus Editing
    5. 19. Pointing, Selecting, and Direct Manipulation
      1. Direct Manipulation
      2. Pointing Devices
        1. Using the mouse
        2. Mouse buttons
          1. The left mouse button
          2. The right mouse button
          3. The middle mouse button
          4. The scroll wheel
          5. Meta-keys
        3. Pointing and clicking with a mouse
          1. Pointing
          2. Clicking
          3. Clicking and dragging
          4. Double-clicking
          5. Chord-clicking
          6. Double-clicking and dragging
        4. Mouse-up and mouse-down events
      3. Pointing and the Cursor
        1. Pliancy and hinting
          1. Object hinting
          2. Cursor hinting
          3. Wait cursor hinting
      4. Selection
        1. Command ordering and selection
        2. Discrete and contiguous selection
          1. Mutual exclusion
          2. Additive selection
          3. Group Selection
        3. Insertion and replacement
        4. Visual indication of selection
      5. Drag-and-Drop
        1. Visual feedback for drag-and-drop
          1. Indicating drag pliancy
          2. Indicating drop candidacy
          3. Insertion targets
          4. Visual feedback at completion
        2. Other drag-and-drop interaction issues
          1. Auto-scrolling
          2. Avoiding drag-and-drop twitchiness
          3. Fine scrolling
      6. Control Manipulation
      7. Palette Tools
        1. Modal tools
        2. Charged cursor tools
      8. Object Manipulation
        1. Repositioning
        2. Resizing and reshaping
        3. 3D object manipulation
          1. Display issues and idioms
            1. Multiple Viewpoints
            2. Baseline grids, depthcueing, shadows, and poles
            3. Guidelines and other rich visual hints
            4. Wire frames and bounding boxes
          2. Input issues and idioms
            1. Drag thresholds
            2. The picking problem
            3. Object rotation, camera movement, rotation, and zoom
      9. Object Connection
    6. 20. Window Behaviors
      1. PARC and the Alto
      2. PARC’s Principles
        1. Visual metaphors
        2. Avoiding modes
        3. Overlapping windows
      3. Microsoft and Tiled Windows
      4. Full-Screen Applications
      5. Multipaned Applications
      6. Designing with Windows
        1. Unnecessary rooms
        2. Necessary rooms
        3. Windows pollution
      7. Window States
      8. MDI versus SDI
    7. 21. Controls
      1. Avoiding Control-Laden Dialog Boxes
      2. Imperative Controls
        1. Buttons
        2. Butcons
        3. Hyperlinks
      3. Selection Controls
        1. Check boxes
        2. Flip-flop buttons: A selection idiom to avoid
        3. Radio buttons
        4. Combutcons
        5. List controls
          1. Earmarking
          2. Dragging and dropping from lists
          3. Ordering lists
          4. Horizontal scrolling
          5. Entering data into a list
        6. Combo boxes
        7. Tree controls
      4. Entry Controls
        1. Bounded and unbounded entry controls
        2. Spinners
        3. Dials and Sliders
        4. Thumbwheels
        5. Other bounded entry controls
        6. Unbounded entry: Text edit controls
          1. Validation
          2. Active and Passive Validation
          3. Clue Boxes
          4. Handling out of bounds data
          5. Units and measurements
          6. Insert and overtype entry modes
          7. Using text edit controls for output: A bad idea
      5. Display Controls
        1. Text controls
        2. Scrollbars
        3. Splitters
        4. Drawers and levers
    8. 22. Menus
      1. A Bit of History
        1. The command-line interface
        2. Sequential hierarchical menus
        3. The Lotus 1-2-3 interface
        4. Drop-down and pop-up menus
      2. Menus Today: The Pedagogic Vector
        1. Standard menus for desktop applications
        2. File (or document)
        3. Edit
        4. Windows
        5. Help
      3. Optional Menus
        1. View
        2. Insert
        3. Settings
        4. Format
        5. Tools
      4. Menu Idioms
        1. Cascading menus
        2. Menus
        3. The ribbon
        4. Bang menus
        5. Disabled menu items
        6. Checkmark menu items
        7. Icons on menus
        8. Accelerators
        9. Access keys
        10. Menus on other platforms
      5. Notes
    9. 23. Toolbars
      1. Toolbars: Visible, Immediate Commands
      2. Toolbars versus Menus
      3. Toolbars and Toolbar Controls
        1. Icons versus text on toolbars
        2. The problem with labeling butcons
      4. Explaining Toolbar Controls
        1. Balloon help: A first attempt
        2. ToolTips
        3. Disabling toolbar controls
      5. Evolution of the Toolbar
        1. State-indicating toolbar controls
        2. Menus on toolbars
        3. Movable toolbars
        4. Customizable toolbars
        5. The ribbon
        6. Contextual toolbars
    10. 24. Dialogs
      1. Appropriate Uses for Dialog Boxes
      2. Dialog Box Basics
      3. Modal Dialog Boxes
      4. Modeless Dialog Boxes
        1. Modeless dialog issues
        2. Two solutions for better modeless dialogs
          1. A stopgap solution
          2. Taking an evolutionary step
      5. Four Different Purposes for Dialogs
        1. Property dialog boxes
        2. Function dialog boxes
        3. Process dialog boxes
        4. Eliminating process dialogs
        5. Bulletin dialog boxes
      6. Managing Content in Dialog Boxes
        1. Tabbed dialogs
        2. Expanding dialogs
        3. Cascading dialogs
    11. 25. Errors, Alerts, and Confirmation
      1. Error Dialogs
        1. Why we have so many error messages
        2. What’s wrong with error messages
          1. People hate error messages
          2. Whose mistake is it, anyway?
          3. Error messages don’t work
        3. Eliminating error messages
          1. Making errors impossible
          2. Positive feedback
        4. Aren’t there exceptions?
        5. Improving error messages: The last resort
      2. Alert Dialogs: Announcing the Obvious
      3. Confirmation Dialog
        1. The dialog that cried “Wolf!”
        2. Eliminating confirmations
      4. Replacing Dialogs: Rich Modeless Feedback
        1. Rich visual modeless feedback
        2. Audible feedback
          1. Negative audible feedback: Announcing user failure
          2. Positive audible feedback
    12. 26. Designing for Different Needs
      1. Command Vectors and Working Sets
        1. Immediate and pedagogic vectors
        2. Working sets and personas
      2. Graduating Users from Beginners to Intermediates
        1. World vectors and head vectors
        2. Memorization vectors
      3. Personalization and Configuration
      4. Idiosyncratically Modal Behavior
      5. Localization and Globalization
      6. Galleries and Templates
      7. Help
        1. The index
        2. Shortcuts and overview
        3. Not for beginners
        4. Modeless and interactive help
        5. Wizards
        6. “Intelligent” agents
  10. Afterword: On Collaboration
  11. A. Design Principles
    1. Chapter 1
    2. Chapter 2
    3. Chapter 3
    4. Chapter 5
    5. Chapter 6
    6. Chapter 7
    7. Chapter 9
    8. Chapter 10
    9. Chapter 11
    10. Chapter 12
    11. Chapter 13
    12. Chapter 14
    13. Chapter 17
    14. Chapter 18
    15. Chapter 19
    16. Chapter 20
    17. Chapter 21
    18. Chapter 22
    19. Chapter 23
    20. Chapter 24
    21. Chapter 25
    22. Chapter 26
  12. B. Bibliography
    1. Style Guides