Interaction for Designers

Brian L.M. Boyl is a professor at Art Center College of Design, and Director of the Visual Interaction Area of Emphasis in the Department of Graphic Design.

Acknowledgements

Designers of Individual Projects

Designers on Team-based Projects

Preface

Introduction

1 Concept

1.1 The Brief

1.2 Ideation and Proper Journaling

1.3 Concept Brainstorm

1.3.1 Intuition and Passion:

1.3.2 Scope Change

1.3.3 Contextual Inquiry

1.3.4 Underserved Populations

1.3.5 Trends

1.3.6 Future Casting

1.3.7 Scenarios

1.3.8 Role Playing

1.3.9 Magic Moments

1.3.10 Mind Mapping

1.3.11 Group Creativity

1.3.12 Creativity Cards

1.3.13 Beyond Low Hanging Fruit

1.3.14 Give it a Rest

1.4 Gathering the Best Ideas

1.5 Big Ideas

1.6 The Strategic Pyramid

1.6.1 The Foundation: What, Who, and Why

1.6.2 Context: When and Where

1.6.3 The How

1.6.4 Applying the Pyramid

2 Opportunity

2.1 Design Hypotheses

2.2 Secondary vs. Primary Research

2.3 Concept Ideation

2.4 General Trend Analyses

2.5 Competitive Landscape

2.6 Competition Feature Analysis

2.7 Expert Interviews

2.8 Competition Detail Research

2.9 Pain Points

2.10 Strategic Vision

2.11 Market SWOT

2.12 Positioning Matrix

2.13 Goals, Not Features

2.14 The Target

2.15 Target Market

2.16 Provisional Persona

2.17 User Goals

2.18 Positioning Statements

2.19 Design Criteria

2.20 Scenarios

2.21 Different Objectives, Different Scenarios

2.22 Text Scenarios

3 User Research

3.1 Ethnography

3.2 Contextual Inquiry, Revisited

3.3 Ethics

3.4 Subjects, Screening, and Sample Size

3.5 Aspirational vs. Actual Target

3.6 What We’d Like to Know

3.6.1 A Typical Day

3.6.2 Goals and the Current Scenario

3.6.3 Related Products

3.6.4 Aspirational Adjectives

3.6.5 User Inspiration

3.6.6 General Pain Points

3.7 Getting to the Truth

3.8 Approaching the Visit

3.8.1 General Observation

3.8.2 Activities

3.8.3 Directed Task Observations

3.8.4 Transitioning to Questions

3.8.5 Framing Questions

3.8.6 Consistent and Unique

3.8.7 Observational Verification

3.9 User Research Findings

3.10 Interview Synopses

3.11 Re-assess the Strategic Vision

3.12 Strategic Refinement

3.13 The Persona

3.14 Revisiting the Text Scenario

3.15 Aspirational Adjectives

3.16 General Moodboard

3.17 Your Mission

4 Approach Exploration: Users and Features

4.1 Unconstrained Ideation

4.2 Goals to Features

4.3 The Muscow Chart

4.4 User Stories

4.5 A Day in the Life

4.6 Journey Map

4.7 Inspiration by Journey

4.8 Inspiration by Empathy

4.9 The Primary Use Case

4.10 External Context

4.11 Exploring Approaches Through Text Scenarios

4.12 Touchpoint Ideation

4.13 Posture Studies

4.14 Inspiration through Physicality

4.15 Inspiration through Technology

4.16 Inspiration through Accessibility

4.17 The Blob Scenario

4.18 Guidewords

4.18.1 Avoid Things You Should Do Anyway

4.18.2 Be Distinctive

4.18.3 Strive for Range and Tension

4.18.4 Avoid Media Terms

4.18.5 Guidewords are not Design Criteria

4.18.6 Guideword Moodboards

4.19 User Feedback

4.20 Feedback on Aesthetics

4.21 A/B Testing

5 Approach Exploration: Ecosystem and Context

5.1 System Hierarchy

5.1.1 System Level

5.1.2 Context Level

5.1.3 Quiescent State Level

5.1.4 Section, Content, and Control

5.1.5 Elements

5.2 Device Ecosystems

5.3 Ecosystem Orchestration

5.4 Use Casting

5.5 Postures and Context

5.6 User Stories, Revisited

5.7 The Process of Exploring Context

5.8 Ecosystem Diagram

5.9 Flow Centric Organization

5.10 Data Centric Organization

5.11 The Primary Use Case Test

5.12 Primary Contexts

5.13 Other Organizational Approaches

5.14 Friction

5.15 The Impact of Structure

5.16 Structure Map

5.17 Refining the Blob Scenario

6 Approach Exploration: Tasks and Interactions

6.1 Features to Tasks

6.2 Interaction as a Language

6.3 Postures and Tasks

6.4 Approach Ideation

6.5 Finding Inspiration

6.6 Reconnect with the Big Picture

6.7 Good Climbing Habits

6.8 Prototyping

6.9 Connecting Ideas into Scenarios

6.10 The Sketch Scenario

6.11 Inspiration Boards

6.12 Feedback

7 Structure

7.1 Tasks to Information

7.2 Information Taxonomies

7.3 Labelling

7.4 Card Sorting

7.5 Beyond Hierarchies

7.6 Overview of Information Structures

7.7 Exploring Structure

7.8 Navigation Design

7.9 Design Patterns and Navigation

7.10 Wireframes

7.11 Consider the Primary Use Case

7.12 Wireframe Interface Exploration

7.13 Lo-Fi Wireframes

7.14 Test the Wireframe Flow

7.15 Revise

7.16 Magic Moments Revisited

7.17 The Wireframe Flowboard

7.18 The Lo-Fi (paper) Prototype

7.19 Feedback Should Trigger Ideation

7.20 The Paper Prototype Scenario

7.21 Comprehensive Moodboards and Inspiration Boards

8 Interface

8.1 Considerations, Not Process

8.2 The Content Triangle

8.3 Interface Considerations

8.4 Consider the User’s Situation

8.5 Consider Device

8.6 Virtual vs. Physical

8.7 Physical Controls

8.7.1 Information Coherence

8.7.2 Fit In, but Stand Out

8.7.3 Sensory Agreement

8.7.4 Chunking

8.7.5 Posture Coherence

8.8 Virtual Components and Postures

8.9 Organizing Virtual Controls

8.10 Virtual Control Considerations

8.10.1 Information Coherence

8.10.2 Fit In, but Stand Out

8.10.3 Chunking

8.10.4 Posture Coherence

8.10.5 Sensory Agreement

8.11 Consider Ergonomics and Human Factors

8.12 Consider Usability

8.13 Form Follows Function

8.14 Consider Accessibility and Inclusivity

8.15 Consider Flexibility Versus Usability

8.16 Consider Hick’s Law

8.17 Consider Performance Load and Cognitive Overload

8.18 Consider Reducing Navigational Depth

8.19 Surfacing

8.20 Surface the Fun

8.21 Menulessness

8.22 Match Control with Proficiency

8.23 Consider Progressive Disclosure

8.24 Consider Process Behavior

8.25 Consider Mental Models

8.26 Consider Metaphor

8.27 Consider Interface Patterns

8.28 Consider Interface Guidelines

8.29 Reaching Refinement

9 Refinement

9.1 Mid-Fidelity Wireframes or Mockups

9.2 Secondary Use Cases: The Critical Alternates

9.3 User Flow

9.4 Red-lining User Flows

9.5 Mid-Fidelity Wireframe Flowboard

9.6 The Structural Prototype

9.7 The Design Scenario

9.8 Introducing Aesthetics

9.9 Iconography: Image and Meaning

9.10 Exploratory Comps

10 Microinteractions

10.1 The Stuff of Interaction Design

10.2 Microinteractions and Behavior Design

10.3 Microinteractions and the Design Process

10.4 The Work Product

10.5 The Elements of a Microinteraction

10.6 Triggers

10.6.1 Affordances

10.6.2 Look

10.6.3 Context

10.6.4 Discoverability and Importance

10.6.5 What They Want, When They Want It

10.6.6 Consistency

10.6.7 Surface the Data

10.6.8 Control and Effect

10.7 Rules and Behavior

10.7.1 Know the Goals

10.7.2 Know the Constraints

10.7.3 Know the Context

10.7.4 Assist

10.7.5 Smart Defaults

10.7.6 Absorb Complexity

10.7.7 Perceived Simplicity and Operational Simplicity

10.7.8 Prevent Errors

10.7.9 Age Gracefully

10.7.10 Behavioral Orchestration

10.7.11 Maintain User Flow

10.7.12 Action Language Cohesion

10.7.13 Responsiveness

10.7.14 Flow and Sense

10.7.15 The Brand Experience

10.8 Feedback Considerations

10.8.1 Appropriate Mapping

10.8.2 Illuminate Behavior, Yet Don’t Over Inform

10.8.3 Inform at the Right Time

10.8.4 Make Microcopy Clear

10.8.5 Don’t Be Arbitrary

10.8.6 Be Considerate

10.8.7 Less Is More

10.8.8 Use the Overlooked

10.8.9 Personality

10.8.10 Agee With Context

10.9 Forms of Feedback

10.9.1 Indicators

10.9.2 Text

10.9.3 Image-Based Feedback

10.9.4 Animated Feedback

10.9.5 Auditory Feedback

10.9.6 Tactile and Somatosensory Feedback

10.9.7 Multi-modal Feedback

10.10 High Fidelity Wireframes

10.11 Physical Refinement

10.12 Spot Prototyping

10.13 Interaction Scenario

10.14 Style Analysis

10.15 Icon Families

10.16 Critical Interfaces

11 Behavior

11.1 Considering Complex Behaviors

11.2 Identify Objects

11.3 Identify Opportunities

11.4 Identify Goals

11.5 Instructionize the Behavior

11.6 Diagramming Behaviors

11.7 Diagramming Complex Behaviors

11.8 Designing from Scratch

11.9 Behavior Considerations

11.10 Black Boxing

11.11 State Tables

11.12 Prototyping Behavior

11.13 Working Prototypes

11.14 Behavior Testing and Feedback

11.15 Continuing the Aesthetic Effort

11.16 Aesthetic Disruption

11.16.1 Reduce

11.16.2 Switch Aesthetics

11.16.3 Master Copy

11.16.4 Be Dramatic

11.17 Refine Your Disruptions

11.18 Icon Refinement

12 Aesthetics

12.1 The Work Product

12.2 Typography

12.3 Picture and Text

12.4 Iconography

12.5 Modularity

12.6 Separation

12.7 Figure-Ground

12.8 Reduce

12.9 Hierarchy

12.10 Negative Space

12.11 Proximity

12.12 Alignment

12.13 Layout in General

12.14 Grid

12.15 Liquid Layouts

12.16 Design Responsively

12.17 Consider Use

12.18 Context

12.19 Tactility

12.20 Arrange Control Appropriately – Fitt’s Law

12.21 Association and Comparison of Content and Control

12.22 Affordances

12.23 Call to Action

12.24 Orchestration and Flow

12.25 Consistency

12.26 Color

12.27 Color, Material, Finish

12.28 Dimensional Coherence

12.29 Standing Out and Fitting In

12.30 Brand Coherence

12.31 Structural Aesthetics and Dynamic Range

12.32 Surprising Usability

12.33 Ockham’s Razor

12.34 Interface Guidelines, Again

12.35 Accessibility Guidelines

12.36 Aesthetic Refinement

12.37 Style Frames

12.38 Style Guides

12.39 The Experience Prototype

12.40 Ozing

13 Expanding Scope

13.1 Why Now?

13.2 The Work Product

13.3 Factorial Iteration

13.4 Context Scoping

13.5 Alternate Cases

13.6 Infrastructure Users

13.7 Consumer Stakeholders

13.8 Extreme Cases

13.9 Handle Extremes with Grace

13.10 Systemic Orchestration

13.11 Interaction Flowboards

13.12 Aesthetic Expansion

13.13 Use Case Prototyping

14 Communication

14.1 Framing the Challenge

14.2 Deliver the Design

14.3 Design Details

14.4 Conclusions

14.5 Installations

14.6 Final Presentation Development

14.6.1 Presentation Preproduction

14.6.2 Pitch Scenario

14.6.3 Commercial Breaks

14.6.4 Pitch Scenario Script

14.6.5 Final Storyboard, Slideshows, and Animatics

14.6.6 Installation Layout and Wall Art

14.6.7 Final Flowboard

14.6.8 Production

14.7 Role of the Installation

14.8 Role of the Wall Art

14.9 Role of the Pitch Scenario

14.10 Role of Appearance Models

14.11 Role of the Presentation Prototype

14.12 The Pitch Presentation

14.13 Takeaways

14.14 Final Delivery

14.15 Further Questions and Responses

14.16 Pitch Orchestration

Conclusion

Bibliography