animation and the future of ux

with @RachelNabors

Animation &

the Future of UX

old comics live at

RachelTheGreat.com

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.

Resources

rachelnabors.com/anim

ation-ux

Got questions?Stay in touch!

@RachelNabors |

RachelNabors.com