animation and the future of ux

Download Animation and the Future of UX

Post on 01-Dec-2014

2.540 views

Category:

Design

0 download

Embed Size (px)

DESCRIPTION

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.

TRANSCRIPT

  • 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