animation and the future of ux
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
surgery.
TinMagpie.com
Animation & the Mind
Offloading mental “busywork”
Dropdown demo courtesy of Codrops
inbetweening: extrapolating states between two frames
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.”
TODAY, ANIMATION
IS CRITICAL TO
COMMUNICATION
AND INTERACTION.
touch put animation front and center
Animation guides users through interactions using…
Relationships Structure Cause & Effect
ANIMATIONS ADD
CONTEXTUAL
INFORMATION
WHERE THERE IS
NONE BY DEFAULT.
Animation Theory
The Illusion of Life
Causality
Feedback
Relationships
Progression
Physics
Transition
Animation in Practice
Case Studies
Animation in your
Process
Where it all fits
ANIMATION BELONGS TO
YOU
storyboards: communication tool began at Disney
STORYBOARDS &
PROTOTYPES COST
MONEY BECAUSE
THEY SAVE MONEY.
Animation Recap!
Animation guides users through interactions using…
Relationships Structure Cause & Effect
Which are shown by demonstrating…
• Causality
• Feedback
• Relationships
• Progression
• Physics
• Transitions
Animations free users from thinking about states.
Think about animation early.
Got questions?Stay in touch!
@RachelNabors |
RachelNabors.com