2. Animations are not just bling!
Those that are will often end up being a nuisance
Why animations
They are very good at feedback
Teasing - They can draw attention to important elements
They can be assisting – Guiding while the user moves along
Explaining – Before the user starts to use a UI
A part of giving a full experience
Of course they do add some bling
Animations
3. Especially important on small mobile devices
When using touch gestures animations are naturally next
Apple has already set the bar with iPhone, iPad and even the
early iPods. Also an important part of the Win phones Metro style
Now everyone is doing it – Without, it seems something is missing
Support in css, so now web apps can also easily have nice
animations.
Why now
4. Because Luke W sais so:
Embracing constraints (rather than fighting them) will ultimately
get you to better designs.
80% of the screen space from the desktop is missing
Think “one eyeball, one thumb”
Why important for mobile?
5. Embrace constraints - 80% of screen space is
missing
The screen size is small, so large parts of the screen (if not all)
will change often
Animations and transitions become the glue that hold together
the interactions across screens.
Assisting animations can show the user the relation between
elements of the screen
Why important for mobile?
6. Think “one eyeball, one thumb”
In noisy surrounding there is a need for good feedback that can be
recognized without thinking
Why important for mobile?
7. 1. Press a cover and cover flips (pop op)
2. Close cover – It rotates back into place
3. Press a link
Cover rotates back into place
Then a transition, Screen moves to the left. Topbar stays put
4. Back, the previous screen come back from the left
(Spatial memory)
5. ”Tell a friend” – new mail apears from bottom
6. Link to new program – Transition, the whole screen
(with topbar) disapears into the back on the left side
7. 4 fingers to go back to iTunes, feedback-bounce showing
that your gesture is understood, but has no effect
Why is iTunes not placed to the left? This is the way it disapered?
Example: iTunes on iPad
10. Slow in slow out - acceleration and
deceleration
11. By mimicking the physical world and the laws of
physics, people can understand without thinking
Rune Nørager calls this the Human Wetware or human Bios
Always uphold this “contract” and the user will
have an anticipation of how the next elements
and screens in the UI can be interacted with.
Always mimic the physical world
12. Smashing magazine: The Guide To CSS
Animation: Principles and Examples
http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-
principles-and-examples/
Wikipedia - 12 basic principles of animation
http://en.wikipedia.org/wiki/12_basic_principles_of_animation
Quick guide to the priciples
13. Assisting animation showing
relation between elements
Scrolling the overview
Drag up – the old total will move up,
new total appearing from bottom
Drag down – the old total will move
down, new total appearing from top
Mjølner Bank – Showing relation
14. Win phone 7:
http://www.youtube.com/watch?v=EUeNCzRhhDE&feature=player_embedded
1. Teasers
2. Follow through (one the 12 Disney principles)
3. Everything that can be pushed moves to the background
4. New “panorama screens” lets you se some of the content to the
left as it opens. Both a teaser and gives orientation
5. When the “w” is pressed in the phonebook, the persons under
“v” moves up – Again orientation – where am I, what’s around
me
Another exable
15. Rearranges articles and images, when flipping
your tablet
The animation helps you to stay oriented
And it looks good
Flip board
16. Animations, interaction design, gestures and
metaphors should be aligned
All should uphold the same metal model
Last remarks
