A presentation at FITC Spotlight UX in in Toronto, ON, Canada by Val Head
Purpose and Style Using motion with meaning in interfaces Val Head β’ @vlh Author of Designing Interface Animation Senior Design Advocate, Adobe
Designing Interface Animation designinginterfaceanimation.com
What makes good UI animation?
! Purpose & Style π
Continuity Reinforce mental models of the interface and where things are
Feedback Letting users know something has happened, and helping them keep track of complex tasks.
Directing Attention Leading the eye around an interface in a meaningful way
Choreography Many moving pieces, and βrealβ expectations
Slow down before stopping Tip: use βease-outβ easing for entrances
Overlap groups of actions Tip: overlapping action (offsets) can also be great for performance!
Similar objects should animate similarly
Entrances should informs exits
Match velocities, not duration
Expressing personality with motion
How we style animation: β’ Through our easing choices (ease-in, ease-out, ease-in-out, bounce, springsβ¦) β’ Duration values, offsets β’ The properties we animate
Aiming for: Calm, Soft, Reassuring Use: opacity, soft blurs, small deltas, easing curves with gradual speed changes
(Some of) The Penner Easing Equations !β#!$%&β%! !β#!()&β%! !β#!$%()&β%! !β#!$%+)β, !β#!()+)β, !β#!$%.)/β0 !β#!().)/β0 !β#!$%().)/β0 !β#!$%+)β- !β#!()+)β- !β#!()+)β% !β#!$%()+)β% !β#!β%1234 !β#!()1234 !β#!$%+)β% See them in action on easings.net !β#!$%()+)β, !β#!$%()+)β-* !β#!$%()*1234
Aiming for: Calm, Soft, Reassuring !β#!$%&β%! !β#!()&β%! !β#!$%()&β%!
Aiming for: Calm, Soft, Reassuring !β#!$%&ββ( !β#!)β&ββ( !β#!$%)β&ββ(
Aiming for: Confident, Stable, Strong Use: Direct movements, straight lines, symmetrical ease-in-outs. Avoid blurs, bounces, and overshoots
Aiming for: Confident, Stable, Strong !β#!$%&β()* !β#!+β,&β()* !β#!$%+β,&β()*
Aiming for: Confident, Stable, Strong !β#!$%&ββ() !β#!β)&ββ() !β#!$%β)&ββ()
Aiming for: Lively, Energetic, Friendly Use: Overshoots, anticipation, βsnappyβ easing curves.
Aiming for: Lively, Energetic, Friendly !β#!$%&ββ( !β#!)+&ββ( !β#!$%)+&ββ(
Aiming for: Lively, Energetic, Friendly !β#$!%#&β$&()+,-./-.+0-./+*12 !β#$!%#&β$&()+,3-/+,0-+00-/2 !β#$!%#&β$&()+04-+5-+46-/+/52
Aiming for: Playful, Fun, Lighthearted Use: Bounces, shape morphs, squash and stretch
Thank you! Newsletter: uianimationnewsletter.com Letβs chat on twitter: @vlh
Hereβs what was said about this presentation on social media.
for free. You
can too.