Animations in User interfaces


Published on

Published in: Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Squash and stretch – Theballhitting the wall, Winphonescroll to far
  • Animations in User interfaces

    1. 1. ANIMATIONS 1
    2. 2. 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
    3. 3. 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.
    4. 4. 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”
    5. 5. 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
    6. 6. 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
    7. 7. 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?
    8. 8. iTunes on ipad
    9. 9. Disney knew all along Gnfgnfgnfgn Seond level » Third level
    10. 10. Slow in slow out - acceleration anddeceleration
    11. 11. 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.
    12. 12. Quick guide to the priciples Smashing magazine: The Guide To CSS Animation: Principles and Examples principles-and-examples/ Wikipedia - 12 basic principles of animation
    13. 13. 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
    14. 14. Another exable Win phone 7: 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
    15. 15. Flip board Rearranges articles and images, when flipping your tablet  The animation helps you to stay oriented  And it looks good
    16. 16. Last remarks Animations, interaction design, gestures and metaphors should be aligned All should uphold the same metal model
    17. 17. @knorskovkno@mjolner.dkMjølner Informatics A/S Tlf.: +45 70 27 43 43 info@mjolner.dkFinlandsgade 10 CVR: 1257 8970 www.mjolner.dkDK-8200 Aarhus N