animation and the future of ux
out of 59
Post on 01-Dec-2014
Embed Size (px)
DESCRIPTIONAward-winning cartoonist turned front-end developer Rachel Nabors shows the power and beauty of tomorrow's user interfaces and where we need to invest resources now to build them. Explore the relationship between animation and UX, in theory and in practice, and learn how to bring this key component into your design process. This talk debuted at Future of Web Design, London, 2014.
- 1. with @RachelNabors Animation & the Future of UX
- 2. old comics live at RachelTheGreat.com
- 3. surgery.
- 4. TinMagpie.com
- 5. Animation & the Mind Offloading mental busywork
- 6. Dropdown demo courtesy of Codrops
- 7. inbetweening: extrapolating states between two frames
- 8. Scott E. Hudson and John T. Stasko (1993) By offloading interpretation of changes to the perceptual system, animation allows the user to continue thinking about the task domain, with no need to shift contexts to the interface domain. By eliminating sudden visual changes, animation lessens the chance that the user is surprised.
- 9. TODAY, ANIMATION IS CRITICAL TO COMMUNICATION AND INTERACTION.
- 10. touch put animation front and center
- 11. Animation guides users through interactions using Relationships Structure Cause & Effect
- 12. ANIMATIONS ADD CONTEXTUAL INFORMATION WHERE THERE IS NONE BY DEFAULT.
- 13. Animation Theory The Illusion of Life
- 14. Causality
- 15. Feedback
- 16. Relationships
- 17. Progression
- 18. Physics
- 19. Transition
- 20. Animation in Practice Case Studies
- 21. Animation in your Process Where it all fits
- 22. ANIMATION BELONGS TO YOU
- 23. storyboards: communication tool began at Disney
- 24. STORYBOARDS & PROTOTYPES COST MONEY BECAUSE THEY SAVE MONEY.
- 25. Animation Recap!
- 26. Animation guides users through interactions using Relationships Structure Cause & Effect
- 27. Which are shown by demonstrating Causality Feedback Relationships Progression Physics Transitions
- 28. Animations free users from thinking about states.
- 29. Think about animation early.
- 30. Resources rachelnabors.com/animation-ux
- 31. Got questions? Stay in touch! ! @RachelNabors | RachelNabors.com
View more >