Transcript
Page 1: Animation and the Future of UX

with @RachelNabors

Animation &

the Future of UX

Page 2: Animation and the Future of UX

old comics live at

RachelTheGreat.com

Page 3: Animation and the Future of UX

surgery.

Page 4: Animation and the Future of UX
Page 5: Animation and the Future of UX
Page 6: Animation and the Future of UX

TinMagpie.com

Page 7: Animation and the Future of UX
Page 8: Animation and the Future of UX

Animation & the Mind

Offloading mental “busywork”

Page 9: Animation and the Future of UX
Page 11: Animation and the Future of UX

inbetweening: extrapolating states between two frames

Page 12: Animation and the Future of UX
Page 13: Animation and the Future of UX

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.”

Page 14: Animation and the Future of UX
Page 15: Animation and the Future of UX

TODAY, ANIMATION

IS CRITICAL TO

COMMUNICATION

AND INTERACTION.

Page 16: Animation and the Future of UX

touch put animation front and center

Page 17: Animation and the Future of UX

Animation guides users through interactions using…

Relationships Structure Cause & Effect

Page 18: Animation and the Future of UX

ANIMATIONS ADD

CONTEXTUAL

INFORMATION

WHERE THERE IS

NONE BY DEFAULT.

Page 19: Animation and the Future of UX

Animation Theory

The Illusion of Life

Page 20: Animation and the Future of UX

Causality

Page 21: Animation and the Future of UX
Page 22: Animation and the Future of UX
Page 23: Animation and the Future of UX

Feedback

Page 24: Animation and the Future of UX
Page 25: Animation and the Future of UX
Page 26: Animation and the Future of UX

Relationships

Page 27: Animation and the Future of UX
Page 28: Animation and the Future of UX
Page 29: Animation and the Future of UX

Progression

Page 30: Animation and the Future of UX
Page 31: Animation and the Future of UX
Page 32: Animation and the Future of UX

Physics

Page 33: Animation and the Future of UX
Page 34: Animation and the Future of UX
Page 35: Animation and the Future of UX

Transition

Page 36: Animation and the Future of UX
Page 37: Animation and the Future of UX
Page 38: Animation and the Future of UX

Animation in Practice

Case Studies

Page 39: Animation and the Future of UX
Page 40: Animation and the Future of UX
Page 41: Animation and the Future of UX
Page 42: Animation and the Future of UX
Page 43: Animation and the Future of UX
Page 44: Animation and the Future of UX

Animation in your

Process

Where it all fits

Page 45: Animation and the Future of UX

ANIMATION BELONGS TO

YOU

Page 46: Animation and the Future of UX
Page 47: Animation and the Future of UX
Page 48: Animation and the Future of UX
Page 49: Animation and the Future of UX
Page 50: Animation and the Future of UX
Page 51: Animation and the Future of UX

storyboards: communication tool began at Disney

Page 52: Animation and the Future of UX

STORYBOARDS &

PROTOTYPES COST

MONEY BECAUSE

THEY SAVE MONEY.

Page 53: Animation and the Future of UX

Animation Recap!

Page 54: Animation and the Future of UX

Animation guides users through interactions using…

Relationships Structure Cause & Effect

Page 55: Animation and the Future of UX

Which are shown by demonstrating…

• Causality

• Feedback

• Relationships

• Progression

• Physics

• Transitions

Page 56: Animation and the Future of UX

Animations free users from thinking about states.

Page 57: Animation and the Future of UX

Think about animation early.

Page 58: Animation and the Future of UX

Resources

rachelnabors.com/anim

ation-ux

Page 59: Animation and the Future of UX

Got questions?Stay in touch!

@RachelNabors |

RachelNabors.com


Top Related