WIXLIB

DESIGNING INTERFACE ANIMATIONMeaningful Motion for User Experienceby VAL HE ADForeword by Ethan Marcotte

CONTENTSHow to Use This BookFrequently Asked QuestionsForewordIntroductionivviixvxviPA RT I: THE CASE F OR A N I M AT I ONCHAP TER 1Why You Can’t Ignore Animation3Animation Has Brain BenefitsAnimation CommunicatesAnimation Connects ContextsUI ChoreographyAnimation Grabs AttentionStaying on Point57891213CHAP TER 2xYou Already Know More AboutAnimation Than You Think15Not Just for CartoonsTiming (and Spacing) Really Are EverythingFollow-Through and Overlapping ActionAnticipationSecondary ActionArcsSquash and StretchSlow In and Slow OutExaggerationSolid DrawingStraight Ahead and Pose to PoseAppealStaging17182528303133343637373839

Developing an Eye for AnimationStaying on Point3941CHAP TER 3Modern Principles ofInteractive Animation43Have a Known PurposeDon’t Create ObstaclesAvoid Animation That Becomes an ObstacleKeep Animations FlexibleBe Quick, Be Readable: TimingPerformance MattersStaying on Point44454548525558PA RT II: USING A N I M AT I ON TO SOLV E D E S I G N P R O B L E M SCHAP TER 4Using Animation to Orient andGive Context61Create a Mental Model of What’s Out of ViewOrient Interface Layers with AnimationOrient the User to Off-Screen Objects with AnimationGuide TasksInform Context ChangesAnimate Context Changes in ContentAnimate Context Changes in InteractionsStaying on Point6262676972727577CHAP TER 5Using Animation to Direct Focusand Attention79Direct Attention to the Most Important ContentDirect the Eye with Motion8083Contentsxi

Think Eye FlowHold Attention with Visual ContinuityAttract Attention with Contrast in AnimationStaying on Point86879193CHAP TER 6Using Animation to Show Causeand EffectGuide Tasks by Hinting at AffordancesCue by Exposing Additional ActionsCue the Onboarding Process with AnimationPreview the Effect of an ActionHandle Errors with Cause-and-EffectAnimationsConfirm an Action’s EffectStaying on Point959799102103106108112CHAP TER 7Using Animation for FeedbackAnimate Effective Error MessagesVisually Confirm Tasks Without Losing Your PlaceLoader Animations That Convey ProgressContextually Fit Loader Animations,Not Generic SpinnersMake Waiting Go by FasterStaying on Point113114116118120122123CHAP TER 8Using Animation to DemonstrateDemonstrate FunctionalityDemonstrate with Animations in theOnboarding ProcessxiiContents125126128

Show Personality and PurposeAnimate Conceptual IllustrationsStaying on Point130135137CHAP TER 9Using Animation to Express Your Brand139How Your Brand Moves Tells Its StoryDefining Your Brand in Motion from the Bottom UpThe Motion AuditEvaluate Your Existing Animation’s DesignEvaluate Your Existing Animation’s PurposeDefine Your Brand in Motion from the Top DownThe Words You Use to Describe Your BrandReferencing Motion from Real LifeStaying on Point140141141143144144145149151PA RT III: ANI M AT I ON I N YOU R WOR K A N D P R O C E SSCHAP TER 10Where Animation Fits in YourDesign ProcessStarting the Animation Discussion Earlyin Your ProcessIdentifying Where Animation Could BeMost HelpfulSketching and Storyboarding Animation IdeasThe Purpose of StoryboardsWhen to Use StoryboardsDo You Have to Use Storyboards forInterface Animation?Create Animation PrototypesWhen to Use Animation Prototypes155156157157160160162163163Contentsxiii

Animation in Your Style GuideWhy Document Animation?Always CommunicateStaying on Point165166172173CHAP TER 11Prototyping Your Animation Ideas175Low Fidelity: Sketches and StoryboardsMedium to High Fidelity: Motion CompsHigh Fidelity: Interactive PrototypesPrototyping Web Animation in RWDHow Many Prototypes Should You Make?Staying on Point177178185191192193CHAP TER 12Animating Responsibly195Your Brain on AnimationAnimation and Vestibular DisordersAnimation, Epilepsy, and MigrainesAnimation and Motor ControlAnimation and Screen ReadersThe WCAG on AnimationProgressive Enhancement and AnimationStaying on 211Acknowledgments221About the Author222Contents

PART IThe Case forAnimationThe next three chapters in Part I, “The Case for Animation,” willoutline the reasons why you should consider animation in yourUX design process, how looking to the past animation greatscan make you better at designing animation, and how to plananimations that behave well in interactions. This is the information you can use to convince your boss or teammates (ormaybe even yourself?) that animation is something worth usingand looking into.

CHAPTER 1Why YouCan’t IgnoreAnimationAnimation Has Brain Benefits5Animation Communicates7Animation Connects Contexts8UI Choreography9Animation Grabs Attention12Staying on Point13

The recent advancements in the animation field aren’t the onlyreason there’s a growing interest in web animation right now.A bigger reason is the fact that much of the audience haschanged its attitude toward the screens.Thanks to the popularity of smartphones and the blurring oflines between phones, tablets, and computers, the expectations ofwhat interacting with an interface should feel like have changed.These small pocket-sized computers have become a part of dailylife, and their interfaces feel more alive with their gestures, depth,and animation.The increased use of interface animations started with smartphonesand native apps, but now they can be found almost everywhere. Evenmajor operating systems like Windows and OSX have begun usinganimation as a core part of their design and interactions.In comparison, static interfaces—the kind that the web defaulted tofor so long, due to a lack of options—can feel dated and even a bitdull. When compared, at best, they seem to lack the sophisticationof interfaces that include animation as part of their design. At worst,static interfaces feel broken and frustrating. Well-designed animation is becoming part of the definition of sophisticated, current, andtrustworthy design. Teams like the people behind Stripe Checkouthave purposely used animation in their design efforts with the goalof designing a more sophisticated product.1 It’s a big reason why somany designers have started to look at animation more seriously. Ifyour design goals include an interface that feels modern and sophisticated, well-designed animation is one of the ways to get there.Recognizing that animation can make your designs feel modernand sophisticated is probably what got you curious about interfaceanimation in the first place, too. The reasons why animation has thateffect, and where animation can have the most positive impact, area bit more nebulous. So let’s look under the hood at the reasons whyanimation can make an interface feel more intuitive and easier to use.1 Improve the Payment Experience with Animations: http://rfld.me/1qVnubI.4Chapter 1

Animation Has Brain BenefitsSometimes, you might feel that an animated solution you’ve come upwith is easier to understand or follow than the non-animated version, but you can’t put your finger on exactly why. Actually, your gutfeeling is right, and it’s more than just a feeling—there’s research toback it up as well.Once you start digging, you’ll find a surprising number of academicstudies have been done on the effectiveness of animation on differentkinds of learning outcomes. One common theme that comes up in anumber of research studies is that animating between the differentstates of your interface can reduce cognitive load for your users.Essentially, animating an element’s movement makes that change inposition visible on-screen, which means that your users don’t have tokeep track of where things have moved. The effort they would haveused to track the object is essentially off-loaded from their brain tothe visible animation on-screen. They expend less energy keepingtrack of where things are, and can then focus their efforts on moreimportant things, such as your content or the task at hand. That’sdefinitely a win-win situation.TIP COGN I T I VE LOA D DE F I N EDCognitive load refers to the total amount of mental effort beingused in working memory.A number of academic studies have researched different ways thatanimation can potentially reduce cognitive load. Among them,two studies from Erasmus University Rotterdam (2007) found thatwell-designed animation could reduce extraneous cognitive loadfor problem-solving tasks.2 It also found that cueing techniques incomplex animations could enhance learning performance and freeup learners’ working memory resources to focus on learning moreefficiently.3 A similar study from the University of New Mexico42 Making Instructional Animations More Effective: A Cognitive Load Approach,Paul Ayres and Fred Paas: http://rfld.me/1ScKuLV.3 Attention Cueing as a Means to Enhance Learning from an Animation,B.B. de Koning (Björn), H.K. Tabbers (Huib), R.M.J.P. Rikers (Remy),and G.W.C. Paas (Fred) 2008-04-10: http://rfld.me/1S9UUtF.4 Optimising Learning from Animations by Minimising Cognitive Load:Cognitive and Affective Consequences of Signalling and SegmentationMethods, Roxana Moreno: http://rfld.me/1YvF54j.Why You Can’t Ignore Animation5

showed that students learning a specific skill with animated study aidsoutperformed other groups and reported lower levels of cognitive load.The results of these studies, and others like them, can back up thatgut feeling you get when an animated interface just feels easier touse. It feels easier because you, as the user, have to do less work tokeep track of what’s happening on-screen—a huge advantage ofwell-designed animation. Of course, the results of those studies don’tmean that every interface out there can be improved with animationalone. But they do prove that there is a strong potential for animationto be beneficial in the right context. (See Chapters 4-8.)Reducing cognitive load is a big plus, but the potential brain benefitsof animation don’t stop there. Other studies have shown that animation can improve decision-making capabilities5 and even help peoplelearn and remember spatial relationships.6 Helping users keeptrack of spatial relationships is a big plus. Spatial relationships inan interface become more and more important as you find yourselfdesigning for different-sized screens. The limited screen real estateon smaller screens means that it’s just not possible to have everyavailable interface item on-screen at all times. Animation can helpmake it clear which items have moved off-screen and where they canbe found again.Establishing spatial relationships with animation can be equallyhelpful for interfaces that have different content on different layers aswell. It doesn’t have to be limited to objects that are out of view to theleft and right of the screen. It can also be more temporal and relatedto which layer in a stack of layers you’re currently viewing. Transitioning between the layers can help demonstrate what order thelayers of the interface are stacked in and how your users can navigatebetween them.That’s the highlight reel of academic research on animation as itapplies to interface design. If you find these facts interesting, you canfollow the nearly endless trail of research papers by looking at eachstudy’s references list. Not all of the references apply as directly tointerface animation as the ones mentioned here, but they all revealsome interesting facts about human behavior and computers.5 Does Animation in User Interfaces Improve Decision Making?Cleotilde Gonzalez: http://rfld.me/1Qa1VbH.6 Does Animation Help Users Build Mental Maps of Spatial Information?Benjamin B. Bederson, and Angela Boltman: http://rfld.me/23IkGwh.6Chapter 1