Presented at: All Things Open 2019 Presented by: Vanessa Alvarez, Alkami Technology

1. I N U S E R I N T E R F A C E S
T H E M A I N R O L E O F
Animations

2. in/vanessaalvarez
Vanessa
Alvarez
Proud Dog Mom
@alvarezvanessa
@vanealvarezocho

4. Graphic Designer
Animations 🤩

5. Sarah
Drasner
https://codepen.io/sdras/

6. HOW?

8. WHY?

9. 9
Bad
Reputation

12. 12
Nice-to-have

13. Rachel
Nabors
Val
Head
Animation at Work Designing Interface
Animation

14. Goal

15. 15
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

16. 16
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

17. 17
Reduce Cognitive Load

18. 18
A B

19. 19
A B

21. Dropdown
With No
Transition

22. In-Between
States

23. Dropdown
With
Transitionhttps://www.lulus.com/

24. Contact Form
https://codepen.io/sdras/pen/qOdwdB

25. Erasmus University
Rotterdam
University of
New Mexico
Animations reduce cognitive
load for problem solving task
Students learning a specific
skill with animated study
outperformed other groups.

26. 26
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

27. 27
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

28. 28
Feedback

29. Generic
Loader

30. Customized
Loader

31. Customized
Loader

33. Placeholder

34. Quick
Waiting
https://material.io/design/motion/#usage

36. Negative
Feedbackhttps://material.io/design/motion/#usage

37. Negative
Feedback

38. 38
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

39. 39
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

40. 40
Attention

41. Direct
Attention

42. 4

43. Visual
Attention
With Motion
https://material.io/design/motion/#usage

44. 44
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

45. 45
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

46. 46
Demonstrate

47. On Board
How to use

48. On Board
New Feature

49. 49
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

50. 50
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

51. 51
Express Your Brand

52. Adjectives

53. Audits

54. Guidelines

60. 60
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

61. 61
Reduce Cognitive Load
Feedback
Attention
Demonstrate
Express Your Brand

62. Communicate

65. Accessibility

67. role
title
tabindex
aria-labelledby
aria-describedby
etc…

68. Conclusion

69. Does my animation have a purpose?
How is my animation benefitting
the user?
Is my animation annoying?
I’m I making my user nauseous?
is it Accessible?

70. Thank you

71. 71
Resources
https://www.viget.com/articles/experiments-in-loading-how-long-will-you-wait/
https://abookapart.com/products/animation-at-work
https://learnux.io/course/usability/animation-in-interface-design
https://www.amazon.com/Designing-Interface-Animation-Improving-Experience-ebook/dp/B01J4NKSZA/
ref=sr_1_1?s=books&ie=UTF8&qid=1549342300&sr=1-1&keywords=val+head
https://codepen.io/dsenneff/details/2c3e5bc86b372d5424b00edaf4990173
https://codepen.io/agathaco/pen/NyQgQX
https://www.invisionapp.com/inside-design/importance-good-animation-ux/