Table of Contents
Who Should Read this Book? How This Book Is Structured The Companion Web Site
Chapter 1: Planning An Introduction to User Research User Research Is Not Usability Design Lingo: Ethnography Start with User Insights Case Study: Lightning Fast Checkout Making Sense of Your Findings Summary Chapter 2: Inspiration Steal Like an Artist If All Else Fails . . . Summary
An Introduction to User Research User Research Is Not Usability Design Lingo: Ethnography Start with User Insights Case Study: Lightning Fast Checkout Making Sense of Your Findings Summary
User Research Is Not Usability Design Lingo: Ethnography Start with User Insights Case Study: Lightning Fast Checkout Making Sense of Your Findings
Steal Like an Artist If All Else Fails . . . Summary
Chapter 3: Sketching Design Thinking—A Developer’s Kind of Design Sketching—Where It All Begins The Benefits of Sketching When to Sketch Tools for Sketching The Basics of Application Flows Creating an Application Flow What Storyboards Can Do for You When to Use Storyboards Creating a Storyboard Not Sure Where to Begin? Start with a Template Summary Chapter 4: Information Architecture What Is information Architecture, Exactly? The Cost of Usability Information Architecture Deliverables Personas, User Scenarios, and Storyboards Content Models Application Flow Wireframes Gesture Dictionary Information Architecture Is All About the Content Make It Meaningful Information Architecture: Like a Boss in Five Steps Step 1: Define Themes, Goals and Requirements Step 2: Choose a Layout Step 3: Group Similar Items Step 4: Be Consistent Step 5: Reduce Summary Chapter 5: Wireframes Debunking Wireframes Wireframes 101 When Should You Create the Wireframes? Anatomy of a Wireframe Are You Speaking Wireframe? Do’s & Don’ts Tools for Awesome Wireframes Tools for Awesome-er Wireframes Wireframe Techniques Wireframe Technique #1: Creating the Basic Wireframe Wireframe Technique #2: Using Shades of Gray and One Color Wireframe Technique #4: Using the Frame-by-Frame Approach Wireframe Technique #5: Using Bubbles Wireframe Technique #6: Magnifying Details Summary Chapter 6: Prototyping When Should I Prototype? 1. Communicating a New Idea 2. Creating a Proof of Concept 3. Conducting Basic Usability Testing 4. Determining Whether an Idea Is Worth a Bigger Investment What Makes an Effective Prototype? Fake It—Be Clever, Not Complicated Making “Little Bets” Awesome Tools for Prototyping Microsoft SketchFlow Adobe Edge Tools Adobe After Effects Keynote / PowerPoint HTML / JavaScript / CSS3 Axure RP Arduino, Openframeworks, Processing Prototyping Techniques Prototyping Technique #1: Paper Prototypes Prototyping Technique #2: Interactive Wireframes Prototyping Technique #3: Video Prototyping Summary
Design Thinking—A Developer’s Kind of Design Sketching—Where It All Begins The Benefits of Sketching When to Sketch Tools for Sketching The Basics of Application Flows Creating an Application Flow What Storyboards Can Do for You When to Use Storyboards Creating a Storyboard Not Sure Where to Begin? Start with a Template Summary
The Benefits of Sketching When to Sketch Tools for Sketching The Basics of Application Flows Creating an Application Flow What Storyboards Can Do for You When to Use Storyboards Creating a Storyboard Not Sure Where to Begin? Start with a Template
What Is information Architecture, Exactly? The Cost of Usability Information Architecture Deliverables Personas, User Scenarios, and Storyboards Content Models Application Flow Wireframes Gesture Dictionary Information Architecture Is All About the Content Make It Meaningful Information Architecture: Like a Boss in Five Steps Step 1: Define Themes, Goals and Requirements Step 2: Choose a Layout Step 3: Group Similar Items Step 4: Be Consistent Step 5: Reduce Summary
The Cost of Usability
Personas, User Scenarios, and Storyboards Content Models Application Flow Wireframes Gesture Dictionary
Make It Meaningful
Step 1: Define Themes, Goals and Requirements Step 2: Choose a Layout Step 3: Group Similar Items Step 4: Be Consistent Step 5: Reduce
Debunking Wireframes Wireframes 101 When Should You Create the Wireframes? Anatomy of a Wireframe Are You Speaking Wireframe? Do’s & Don’ts Tools for Awesome Wireframes Tools for Awesome-er Wireframes Wireframe Techniques Wireframe Technique #1: Creating the Basic Wireframe Wireframe Technique #2: Using Shades of Gray and One Color Wireframe Technique #4: Using the Frame-by-Frame Approach Wireframe Technique #5: Using Bubbles Wireframe Technique #6: Magnifying Details Summary
When Should You Create the Wireframes? Anatomy of a Wireframe Are You Speaking Wireframe? Do’s & Don’ts Tools for Awesome Wireframes Tools for Awesome-er Wireframes
Wireframe Technique #1: Creating the Basic Wireframe Wireframe Technique #2: Using Shades of Gray and One Color Wireframe Technique #4: Using the Frame-by-Frame Approach Wireframe Technique #5: Using Bubbles Wireframe Technique #6: Magnifying Details
When Should I Prototype? 1. Communicating a New Idea 2. Creating a Proof of Concept 3. Conducting Basic Usability Testing 4. Determining Whether an Idea Is Worth a Bigger Investment What Makes an Effective Prototype? Fake It—Be Clever, Not Complicated Making “Little Bets” Awesome Tools for Prototyping Microsoft SketchFlow Adobe Edge Tools Adobe After Effects Keynote / PowerPoint HTML / JavaScript / CSS3 Axure RP Arduino, Openframeworks, Processing Prototyping Techniques Prototyping Technique #1: Paper Prototypes Prototyping Technique #2: Interactive Wireframes Prototyping Technique #3: Video Prototyping Summary
1. Communicating a New Idea 2. Creating a Proof of Concept 3. Conducting Basic Usability Testing 4. Determining Whether an Idea Is Worth a Bigger Investment
Fake It—Be Clever, Not Complicated
Microsoft SketchFlow Adobe Edge Tools Adobe After Effects Keynote / PowerPoint HTML / JavaScript / CSS3 Axure RP Arduino, Openframeworks, Processing
Prototyping Technique #1: Paper Prototypes Prototyping Technique #2: Interactive Wireframes Prototyping Technique #3: Video Prototyping
Chapter 7: Color Color Basics Color Vocabulary Color Models Cool and Warm Colors The Psychology of Color Contrast Applied Color: A Few Rules of Thumb Stick With Two to Three Colors Start with Solids, Then Move to Gradients Use Shades of a Hue Green Means Go What Makes a Good Color Palette? Shades of Gray Five Color Palettes You Can’t Go Wrong With Color Techniques Color Technique #1: Use a Photograph to Generate a Color Palette Color Technique #2: Code with Color Color Technique #3: Use Photoshop Bonus Color Technique: Use an Algorithm to Find Average Color Summary Chapter 8: Digital Typography First Things First A Lap Around Typography Understanding Type Terminology Font or Typeface—What’s the Difference? Type Classification Serif Typefaces Sans-Serif Typefaces Eight Ways to Improve Your Typography 1. Pick a Scale and Stick with It 2. Use Consistent Spacing 3. Consider the Measure 4. A Little Can Go a Long Way 5. Pick a Good Body Font 6. Use a Single Family 7. Combine Two to Three Typefaces 8. Use a Good Ampersand Summary Chapter 9: Visual Communication It Ain’t That Simple 1. Design As Though You’re Designing for Yourself 2. Be Consistent Five Ways to Clarify Your Design 1. Slap a Grid on It 2. Establish Hierarchy 3. Remove the Junk 4. Check for Parallelism 5. Create Clear Affordances Summary Chapter 10: Motion Animations Look Cool, but Can They Actually Make It Work Better? Transitions, Animations, and Timing Guidelines What’s the Difference Between an Animation and a Transition? Not Too Fast, Not Too Slow, Not Too Many When Should I Use Motion? When Should I Avoid Motion? Fade, Slide, and Scale—Animation’s Super Tools Fade Slide Scale Motion Principles Slow In and Slow Out Squash and Stretch Anticipation Follow-Through and Overlapping Action Arcs Easing Advanced Motion Techniques Follow Cognitive Tomfoolery Summary
Color Basics Color Vocabulary Color Models Cool and Warm Colors The Psychology of Color Contrast Applied Color: A Few Rules of Thumb Stick With Two to Three Colors Start with Solids, Then Move to Gradients Use Shades of a Hue Green Means Go What Makes a Good Color Palette? Shades of Gray Five Color Palettes You Can’t Go Wrong With Color Techniques Color Technique #1: Use a Photograph to Generate a Color Palette Color Technique #2: Code with Color Color Technique #3: Use Photoshop Bonus Color Technique: Use an Algorithm to Find Average Color Summary
Color Vocabulary Color Models Cool and Warm Colors The Psychology of Color Contrast
Stick With Two to Three Colors Start with Solids, Then Move to Gradients Use Shades of a Hue Green Means Go
Shades of Gray
Color Technique #1: Use a Photograph to Generate a Color Palette Color Technique #2: Code with Color Color Technique #3: Use Photoshop Bonus Color Technique: Use an Algorithm to Find Average Color
First Things First A Lap Around Typography Understanding Type Terminology Font or Typeface—What’s the Difference? Type Classification Serif Typefaces Sans-Serif Typefaces Eight Ways to Improve Your Typography 1. Pick a Scale and Stick with It 2. Use Consistent Spacing 3. Consider the Measure 4. A Little Can Go a Long Way 5. Pick a Good Body Font 6. Use a Single Family 7. Combine Two to Three Typefaces 8. Use a Good Ampersand Summary
Understanding Type Terminology
Serif Typefaces Sans-Serif Typefaces
1. Pick a Scale and Stick with It 2. Use Consistent Spacing 3. Consider the Measure 4. A Little Can Go a Long Way 5. Pick a Good Body Font 6. Use a Single Family 7. Combine Two to Three Typefaces 8. Use a Good Ampersand
It Ain’t That Simple 1. Design As Though You’re Designing for Yourself 2. Be Consistent Five Ways to Clarify Your Design 1. Slap a Grid on It 2. Establish Hierarchy 3. Remove the Junk 4. Check for Parallelism 5. Create Clear Affordances Summary
1. Design As Though You’re Designing for Yourself 2. Be Consistent
1. Slap a Grid on It 2. Establish Hierarchy 3. Remove the Junk 4. Check for Parallelism 5. Create Clear Affordances
Animations Look Cool, but Can They Actually Make It Work Better? Transitions, Animations, and Timing Guidelines What’s the Difference Between an Animation and a Transition? Not Too Fast, Not Too Slow, Not Too Many When Should I Use Motion? When Should I Avoid Motion? Fade, Slide, and Scale—Animation’s Super Tools Fade Slide Scale Motion Principles Slow In and Slow Out Squash and Stretch Anticipation Follow-Through and Overlapping Action Arcs Easing Advanced Motion Techniques Follow Cognitive Tomfoolery Summary
What’s the Difference Between an Animation and a Transition? Not Too Fast, Not Too Slow, Not Too Many When Should I Use Motion? When Should I Avoid Motion?
Fade Slide Scale
Slow In and Slow Out Squash and Stretch Anticipation Follow-Through and Overlapping Action Arcs Easing
Follow Cognitive Tomfoolery
Chapter 11: Interaction Design Principles An Introduction to Interaction Design Getting In the Flow Ways to Facilitate Flow Learnability Versus Usability Designing for Usability Designing for Learnability Ergonomics Muscle Fatigue Field of View and Peripheral Vision Environment and Lighting Conditions Optimal Touch Targets Occlusion Summary Chapter 12: Design Patterns Why Use Design Patterns? Other Design Pattern Resources The Patterns Auto Focus Drag and Drop Auto Save Blank Slate Progress Indicators Use Good Target Sizes A Button Is a Button Is a Button Avoid Modal States unless It’s Critical to Use Them Direct Manipulation Group Like Items Continuous Scrolling Size to Importance Visualization Glance-View Dashboard Error-Proof Controls Get Me Out of Here Right/Left Input Alignment Super Search Simple Task, Simple UI; Complex Task, Complex UI Sync Position Contrast Your Fonts Summary
An Introduction to Interaction Design Getting In the Flow Ways to Facilitate Flow Learnability Versus Usability Designing for Usability Designing for Learnability Ergonomics Muscle Fatigue Field of View and Peripheral Vision Environment and Lighting Conditions Optimal Touch Targets Occlusion Summary
Ways to Facilitate Flow
Designing for Usability Designing for Learnability
Muscle Fatigue Field of View and Peripheral Vision Environment and Lighting Conditions Optimal Touch Targets Occlusion
Why Use Design Patterns? Other Design Pattern Resources The Patterns Auto Focus Drag and Drop Auto Save Blank Slate Progress Indicators Use Good Target Sizes A Button Is a Button Is a Button Avoid Modal States unless It’s Critical to Use Them Direct Manipulation Group Like Items Continuous Scrolling Size to Importance Visualization Glance-View Dashboard Error-Proof Controls Get Me Out of Here Right/Left Input Alignment Super Search Simple Task, Simple UI; Complex Task, Complex UI Sync Position Contrast Your Fonts Summary
Other Design Pattern Resources
Auto Focus Drag and Drop Auto Save Blank Slate Progress Indicators Use Good Target Sizes A Button Is a Button Is a Button Avoid Modal States unless It’s Critical to Use Them Direct Manipulation Group Like Items Continuous Scrolling Size to Importance Visualization Glance-View Dashboard Error-Proof Controls Get Me Out of Here Right/Left Input Alignment Super Search Simple Task, Simple UI; Complex Task, Complex UI Sync Position Contrast Your Fonts