the ux of great animation

44

Upload: val-head

Post on 08-Jan-2017

1.576 views

Category:

Design


0 download

TRANSCRIPT

Great UI animation has purpose and style

http://img.archiexpo.com/images_ae/photo-g/contemporary-chair-polypropylene-charles-ray-eames-80422-3019841.jpg

Animating With Purpose

The Brain Benefits of AnimationReduce cognitive load

Prevent change blindness

Better recall of spacial relationships

Lower perceived load times

Design Problems Animation Can Solve

OrientationReinforce mental models of the interface and

show how content is related.

Guide TasksBy showing cause and effect and cueing

current or potential actions.

DemonstrateShowing how something works or what to

expect in a short amount of time.

Direct AttentionLeading the eye and calling attention to

changes and important items.

Going “Faster”Perceived performance gains by

transitioning content in.

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

viget.com/inspire/experiments-in-loading-how-long-will-you-wait

The Bigger Picture

ChoreographyDesigning all your UI animations

to feel logical and related.

Similar objects animate in similar ways

Entrance informs exit

Match velocities

Cohesive over consistent.

Consistent

Cohesive

Be Inspired!

artofthetitle.com

capptivate.co

vimeo.com/channels/wineaftercoffee

@vlh uianimationewsletter.com