Designing Interface Animation: Meaningful Motion for User Experience: Improving the User Experience Through Animation

✍ Scribed by Val Head

• Publisher: Rosenfeld Media
• Year: 2016
• Tongue: English
• Leaves: 266
• Edition: 1
• Category: Library

✦ Synopsis

Effective interface animation deftly combines form and function to improve feedback, aid in orientation, direct attention, show causality, and express your brand's personality. Designing Interface Animation shows you how to create web animation that balances purpose and style while blending seamlessly into the user's experience. This book is a crash course in motion design theory and practice for web designers, UX professionals, and front-end developers alike.

✦ Table of Contents

Title Page
Copyright Page
Contents
How to Use This Book
Frequently Asked Questions
Foreword
Introduction
Part I: The Case for Animation
Chapter 1: Why You Can’t Ignore Animation
Animation Has Brain Benefits
Animation Communicates
Animation Connects Contexts
UI Choreography
Animation Grabs Attention
Staying on Point
Chapter 2: You Already Know More About Animation Than You Think
Not Just for Cartoons
Timing (and Spacing) Really Are Everything
Follow-Through and Overlapping Action
Anticipation
Secondary Action
Arcs
Squash and Stretch
Slow In and Slow Out
Exaggeration
Solid Drawing
Straight Ahead and Pose to Pose
Appeal
Staging
Developing an Eye for Animation
Staying on Point
Chapter 3: Modern Principles of Interactive Animation
Have a Known Purpose
Don’t Create Obstacles
Avoid Animation That Becomes an Obstacle
Keep Animations Flexible
Be Quick, Be Readable: Timing
Performance Matters
Staying on Point
Part II: Using Animation to Solve Design Problems
Chapter 4: Using Animation to Orient and Give Context
Create a Mental Model of What’s Out of View
Orient Interface Layers with Animation
Orient the User to Off-Screen Objects with Animation
Guide Tasks
Inform Context Changes
Animate Context Changes in Content
Animate Context Changes in Interactions
Staying on Point
Chapter 5: Using Animation to Direct Focus and Attention
Direct Attention to the Most Important Content
Direct the Eye with Motion
Think Eye Flow
Hold Attention with Visual Continuity
Attract Attention with Contrast in Animation
Staying on Point
Chapter 6: Using Animation to Show Cause and Effect
Guide Tasks by Hinting at Affordances
Cue by Exposing Additional Actions
Cue the Onboarding Process with Animation
Preview the Effect of an Action
Handle Errors with Cause-and-Effect Animations
Confirm an Action’s Effect
Staying on Point
Chapter 7: Using Animation for Feedback
Animate Effective Error Messages
Visually Confirm Tasks Without Losing Your Place
Loader Animations That Convey Progress
Contextually Fit Loader Animations, Not Generic Spinners
Make Waiting Go by Faster
Staying on Point
Chapter 8: Using Animation to Demonstrate
Demonstrate Functionality
Demonstrate with Animations in the Onboarding Process
Show Personality and Purpose
Animate Conceptual Illustrations
Staying on Point
Chapter 9: Using Animation to Express Your Brand
How Your Brand Moves Tells Its Story
Defining Your Brand in Motion from the Bottom Up
The Motion Audit
Evaluate Your Existing Animation’s Design
Evaluate Your Existing Animation’s Purpose
Define Your Brand in Motion from the Top Down
The Words You Use to Describe Your Brand
Referencing Motion from Real Life
Staying on Point
Part III: ANIMATION IN YOUR WORK AND PROCESS
Chapter 10: Where Animation Fits in Your Design Process
Starting the Animation Discussion Early in Your Process
Identifying Where Animation Could Be Most Helpful
Sketching and Storyboarding Animation Ideas
The Purpose of Storyboards
When to Use Storyboards
Do You Have to Use Storyboards for Interface Animation?
Create Animation Prototypes
When to Use Animation Prototypes
Animation in Your Style Guide
Why Document Animation?
Always Communicate
Staying on Point
Chapter 11: Prototyping Your Animation Ideas
Low Fidelity: Sketches and Storyboards
Medium to High Fidelity: Motion Comps
High Fidelity: Interactive Prototypes
Prototyping Web Animation in RWD
How Many Prototypes Should You Make?
Staying on Point
Chapter 12: Animating Responsibly
Your Brain on Animation
Animation and Vestibular Disorders
Animation, Epilepsy, and Migraines
Animation and Motor Control
Animation and Screen Readers
The WCAG on Animation
Progressive Enhancement and Animation
Staying on Point
Conclusion
Index
Acknowledgments
About the Author
Footnote