Purpose and Style: Using motion with meaning in interfaces

A presentation at From Business To Buttons 2019 in May 2019 in Stockholm, Sweden 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

Great UI animation has purpose and style

Slide 5

Slide 5

Continuity Reinforce mental models of the interface and show how content is related

Slide 6

Slide 7

Slide 8

Slide 8

Feedback Letting users know that something has happened

Slide 9

Slide 10

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 14

Direct Attention Leading the eye and calling attention to changes and important items

Slide 15

Slide 16

Slide 17

Slide 17

Choreography Many moving pieces, and “real” expectations

Slide 18

Slide 18

Accelerate into an action Tip: use “ease-in” easing for exits

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

Match velocities, not duration

Slide 23

Slide 23

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