The UX of Great Animation

If you like this presentation – show it...

Slide 0

Slide 1

Slide 2

Slide 3

Slide 4

Great UI animation has purpose and style http://img.archiexpo.com/images_ae/photo-g/contemporary-chair-polypropylene-charles-ray-eames-80422-3019841.jpg

Slide 5

Animating With Purpose

Slide 6

The Brain Benefits of Animation Reduce cognitive load Prevent change blindness Better recall of spacial relationships Lower perceived load times

Slide 7

Design Problems Animation Can Solve

Slide 8

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

Slide 9

Slide 10

Slide 11

Slide 12

Guide Tasks By showing cause and effect and cueing current or potential actions.

Slide 13

Slide 14

Slide 15

Slide 16

Demonstrate Showing how something works or what to expect in a short amount of time.

Slide 17

Slide 18

Slide 19

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

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Going “Faster” Perceived performance gains by 
 transitioning content in.

Slide 25

“Our findings indicate that the psychological mechanism of transitions is completely different from progress bars”

Slide 26

Slide 27

Slide 28


Slide 29

The Bigger Picture

Slide 30

Choreography Designing all your UI animations 
 to feel logical and related.

Slide 31

Similar objects animate in similar ways

Slide 32

Entrance informs exit

Slide 33

Match velocities

Slide 34

Cohesive over consistent.

Slide 35


Slide 36


Slide 37

Slide 38

Be Inspired!

Slide 39


Slide 40


Slide 41


Slide 42

Slide 43

@vlh uianimationewsletter.com

Slide 44