Slides: http://www.slideshare.net/CrowChick/animation-and-the-future-of-ux-33573726

I used to be a cartoonist and storyteller at the age of 17. I lived in the middle of nowhere. The internet let me connect to others.

Then I needed surgery, so I needed to get a ‘real’ job to pay the expenses. In the USA you don’t have health care normally, only if your employer organizes it for you.

I love story-boarding. I even story-boarded this talk, makes it so much easier to explain things. Everybody is now creating animations.

Animation and the human mind
This is a visual representation of a rate of change over time.
If something doesn’t animate, the brain takes a snapshot of the first and last state and makes up what happened in between.
In animation movies, these in-between states were made by in-betweeners. Mostly done by interns, juniors, or shipped overseas. If you don’t have in-between states, users might not understand what happened.
In the 90s OSs tried to differentiate themselves on animations. A lot of papers have been written about it in those years. If you animate something, the animation gets offloaded to the virtual cortex (GPU of the brain). Keeps the heavy work away from your brain.

Ground rules for animating stuff.

6 principles of UI animation.

Animations add contextual information where there is none by default. An animation guides a user by reinforcing relationships, structure, cause and effect.

Causality
Humans have the ability to see a relation where there is none. For example a bouncing effect with two balls, which are in fact two balls who start after each other.

Feedback
Happens when something is caused by a human action, like clicking a button. Might sometimes be unclear if something happens elsewhere.

Hierarchy
iOS zooming. people were getting dizzy when this was first introduced, but I really liked it. Shows where you came from

Animation
You can never catch op with the little car (Sorry, these notes don’t make much sense without the slides :-)).

Transition
There are no natural transitions in the wild, but some people disagree they are just much slower. Like the sunset or ageing.
mabu.dk They change the color when opening the menu, and hovering over an item. Just too bad the hover color not the same color as the item you jump to.

Physics
Baby’s expect a rolling ball to stop at a point. After two months a baby knows that objects fall.
Easing to accelerate or decelerate.

Animation in practice
Does the animation reinforce at least two of these?
People shouldn’t see animations, because they might not like it after watching it the 70th time.
It might be expensive to off-load animations to the CPU. Is it necessary and useful?
Scroll-jacking. Don’t do that too extensively.

Where does it fit into my process?
In an ideal situation the animations happens between prototypes, because you can test them and show them to users and clients without having to change it all afterwards.

Story-boarding and prototypes cost money because they save money.

Recap:

• Causality
• Feedback
• Location
• Progression
• Transition
• Physics