Purpose and Style: Using motion with meaning in interfaces

A presentation at FITC Spotlight UX in June 2019 in Toronto, ON, Canada by Val Head

Slide 1

Slide 1

Purpose and Style Using motion with meaning in interfaces Val Head β€’ @vlh Author of Designing Interface Animation Senior Design Advocate, Adobe

Slide 2

Slide 2

Designing Interface Animation designinginterfaceanimation.com

Slide 3

Slide 3

What makes good UI animation?

Slide 4

Slide 4

! Purpose & Style πŸ’…

Slide 5

Slide 5

Continuity Reinforce mental models of the interface and where things are

Slide 6

Slide 7

Slide 8

Slide 8

Slide 9

Slide 9

Feedback Letting users know something has happened, and helping them keep track of complex tasks.

Slide 10

Slide 11

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 15

Directing Attention Leading the eye around an interface in a meaningful way

Slide 16

Slide 17

Slide 18

Slide 18

Choreography Many moving pieces, and β€œreal” expectations

Slide 19

Slow down before stopping Tip: use β€œease-out” easing for entrances

Slide 20

Overlap groups of actions Tip: overlapping action (offsets) can also be great for performance!

Slide 21

Similar objects should animate similarly

Slide 22

Slide 22

Entrances should informs exits

Slide 23

Match velocities, not duration

Slide 24

Slide 24

Expressing personality with motion

Slide 25

Slide 25

How we style animation: β€’ Through our easing choices (ease-in, ease-out, ease-in-out, bounce, springs…) β€’ Duration values, offsets β€’ The properties we animate

Slide 26

Slide 26

Aiming for: Calm, Soft, Reassuring Use: opacity, soft blurs, small deltas, easing curves with gradual speed changes

Slide 27

Slide 28

Slide 28

(Some of) The Penner Easing Equations !”#!$%&’%! !”#!()&’%! !”#!$%()&’%! !”#!$%+)”, !”#!()+)”, !”#!$%.)/’0 !”#!().)/’0 !”#!$%().)/’0 !”#!$%+)”- !”#!()+)”- !”#!()+)’% !”#!$%()+)’% !”#!’%1234 !”#!()1234 !”#!$%+)’% See them in action on easings.net !”#!$%()+)”, !”#!$%()+)”-* !”#!$%()*1234

Slide 29

Slide 29

Slide 30

Slide 30

Aiming for: Calm, Soft, Reassuring !”#!$%&’%! !”#!()&’%! !”#!$%()&’%!

Slide 31

Slide 31

Aiming for: Calm, Soft, Reassuring !”#!$%&’”( !”#!)’&’”( !”#!$%)’&’”(

Slide 32

Slide 32

Aiming for: Confident, Stable, Strong Use: Direct movements, straight lines, symmetrical ease-in-outs. Avoid blurs, bounces, and overshoots

Slide 33

Slide 34

Slide 34

Aiming for: Confident, Stable, Strong !”#!$%&’()* !”#!+’,&’()* !”#!$%+’,&’()*

Slide 35

Slide 35

Aiming for: Confident, Stable, Strong !”#!$%&’”() !”#!’)&’”() !”#!$%’)&’”()

Slide 36

Slide 36

Aiming for: Lively, Energetic, Friendly Use: Overshoots, anticipation, β€œsnappy” easing curves.

Slide 37

Slide 38

Slide 38

Aiming for: Lively, Energetic, Friendly !”#!$%&”’( !”#!)+&”’( !”#!$%)+&”’(

Slide 39

Slide 39

Aiming for: Lively, Energetic, Friendly !”#$!%#&’$&()+,-./-.+0-./+*12 !”#$!%#&’$&()+,3-/+,0-+00-/2 !”#$!%#&’$&()+04-+5-+46-/+/52

Slide 40

Slide 40

Slide 41

Slide 41

Aiming for: Playful, Fun, Lighthearted Use: Bounces, shape morphs, squash and stretch

Slide 42

Slide 43

Slide 43

Thank you! Newsletter: uianimationewsletter.com Let’s chat on twitter: @vlh