Animation and the Future of UX

Download Animation and the Future of UX

Post on 01-Dec-2014




0 download


Award-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 3. surgery. 4. 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 31. Got questions? Stay in touch! ! @RachelNabors |