Animations can help solve design problems by orienting users, guiding tasks, demonstrating how things work, and directing attention. They reduce cognitive load and improve recall of information. Well-designed animations feel logical, choreographed, and cohesive rather than just consistent. Sources provided inspire the use of animation to benefit users.

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

6. Animating With Purpose

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

8. Design Problems
Animation Can Solve

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

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

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

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

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

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

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

30. The Bigger Picture

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

32. Similar objects animate in similar ways

33. Entrance informs exit

34. Match velocities

35. Cohesive over consistent.

36. Consistent

37. Cohesive

39. Be Inspired!

40. artofthetitle.com

41. capptivate.co

42. vimeo.com/channels/wineaftercoffee

44. @vlh
uianimationewsletter.com