A Brief Introduction to Animation, UI and the Visual Cortex

A Brief Introduction to
Animation, UI
the Visual Cortex+
with
@RachelNabors

It’s true. RacheltheGreat.com

ibm.com/design/language/framework/interac=on/mo=on.shtml

cracked.com/ar=cle_15239_the-‐5-‐most-‐annoying-‐banner-‐ads-‐internet_p5.html

@rachelnabors
Animation is a
visual representation of a
rate of change over time.
=me
loca=on

Dropdown courtesy of Codrops, btw.

In-‐betweening
From anima2on, extrapola2ng between two key frames.

“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.”
Scott E. Hudson and John T. Stasko (1993)

APPLIED TO
USER INTERFACES
Anima&on

You use anima=on to indicate an element’s…
Direction Solidity Momentum

biology.allaboutbirds.org/features/fancymales/fancy-‐males

polygon.com/a/xbox-‐one-‐review

• Causality
• Feedback
• Loca2on
• Progression
• Transi2on
• Physics
Does the anima=on reinforce at least two of these?

I thought it was cute
the first time but by the 70th…
It’s annoying!

–a Shaker saying
“Don’t make something unless
it is both necessary and useful; but if it is
both necessary and useful, don’t hesitate to
make it beautiful.”
deligh.ul

WebAnimationWeekly.com
Always available at @RachelNabors
or over a hot cup of tea!

A Brief Introduction to Animation, UI and the Visual Cortex

Recommandé

Recommandé

Contenu connexe

Similaire à A Brief Introduction to Animation, UI and the Visual Cortex

Similaire à A Brief Introduction to Animation, UI and the Visual Cortex (20)

Plus de Rachel Nabors

Plus de Rachel Nabors (10)

Dernier

Dernier (20)

A Brief Introduction to Animation, UI and the Visual Cortex