This document discusses the importance and benefits of animations, especially for mobile interfaces. It notes that animations provide feedback, draw attention, and can guide users. For mobile, animations are even more important because they compensate for the smaller screen size and "one thumb" interaction. When designed based on principles like mimicking the physical world, animations help users understand an interface without extra thought. Examples from Apple, Windows Phone, and Flipboard are given to illustrate how animations can assist users and create a cohesive experience across screens.

1. ANIMATIONS
1

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

8. iTunes on ipad

9.  Gnfgnfgnfgn
Seond level
» Third level
Disney knew all along

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

17. Mjølner Informatics A/S
Finlandsgade 10
DK-8200 Aarhus N
Tlf.: +45 70 27 43 43
CVR: 1257 8970
info@mjolner.dk
www.mjolner.dk
@knorskov
kno@mjolner.dk