Squash and stretch – Theballhitting the wall, Winphonescroll to far
Animations in User interfaces
Animations 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
Why now 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 important for mobile? 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? 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? Think “one eyeball, one thumb” In noisy surrounding there is a need for good feedback that can be recognized without thinking
Example: iTunes on iPad1. Press a cover and cover flips (pop op)2. Close cover – It rotates back into place3. Press a link Cover rotates back into place Then a transition, Screen moves to the left. Topbar stays put4. Back, the previous screen come back from the left (Spatial memory)5. ”Tell a friend” – new mail apears from bottom6. Link to new program – Transition, the whole screen (with topbar) disapears into the back on the left side7. 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?
Disney knew all along Gnfgnfgnfgn Seond level » Third level
Slow in slow out - acceleration anddeceleration
Always mimic the physical world 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.
Quick guide to the priciples 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
Mjølner Bank – Showing relation 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
Another exable 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
Flip board Rearranges articles and images, when flipping your tablet The animation helps you to stay oriented And it looks good
Last remarks Animations, interaction design, gestures and metaphors should be aligned All should uphold the same metal model