Purpose and Style: Using motion with meaning in interfaces

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

Designing Interface Animation designinginterfaceanimation.com

Slide 3

What makes good UI animation?

Slide 4

! Purpose & Style 💅

Slide 5

Continuity Reinforce mental models of the interface and where things are

Slide 6

Slide 7

Slide 8

Slide 9

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

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

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

Slide 16

Slide 17

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

Entrances should informs exits

Slide 23

Match velocities, not duration

Slide 24

Expressing personality with motion

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

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

Slide 27

Slide 28

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