The animated mobile NUI               Lessons from DisneyJoannes Vandermeulen and Kristel Van Ael of Namahn               ...
What are the principlesof animation?How can animation enhance the user experience?
Context Project request from Atos Worldline  use of the full potential of the new 16 bit colour display to  create a user-...
Why animation? Animations provide a natural flow Focusing the user’s attention on the action Ordering the information (hie...
In its most basic form,character animationis about storytellingGeorge Maestri
The illusion of motion
Motion blur In the real world, an object leaves an impression of its path in our visual system – a smear.
Motion blur A rule of thumb: if an object moves more than half its size between any two frames, motion blur must be added.
10 Design principles Solid drawing Staging Squash & stretch Arrival and departure Slow in / Slow out Arcs Follow through O...
Does youranimation haveweight, depth andbalance?
Solid drawing
Solid drawing The creation of objects so they appear to have the potential for movement
Solid drawing Giving your animation weight, depth, and balance gives it life
Solid drawing Avoid static symmetry and twin movements
Solid drawing Avoid static symmetry and twin movements
Staging
Staging Making the central idea of an animation completely clear to the viewer.
Squash and stretch
Squash and stretch Defining the rigidity and mass of an object by distorting its shape during an action
Squash and stretch Flipboard vs. Apple iBook
Squash and stretch Pin dropping in Google Maps on iPhone
Arrival and departure
Arrival and departure In real live objects do not appear or disappear suddenly Three variations:  objects fly in from off-...
Arrival and departure Visibility curve
Slow in / Slow out   Ease in / Ease out
Slow in / Slow out Slow-in is a gradual acceleration into a motion from a key position Slow-out is the gradual deceleratio...
Slow in / Slow out
Slow in / Slow out
Slow in / Slow out The principle of slow in and out is applied to the scrolling lists of many mobile UIs.
Arcs
Arcs The movement of most natural motion will be described by a slightly circular path or arc of some kind.
Arcs Arcs applied on the interface of the Nokia Maemo
Arcs Arcs applied on the interface elements of the Android mobile
Follow through
Follow through Objects in the real world do not come to sudden stops, all of the object coming to a standstill at once Exa...
Overlapping action
Overlapping action Overlapping action is the animation principle that captures how parts of an object move at different ra...
Anticipation
Anticipation Anticipation is a technique to alert the viewer to an upcoming action so it is not missed. Exaggerating in or...
Anticipation
Exaggeration
Exaggeration By increasing the salience of certain aspects of the world, the animator gives the audience footholds from wh...
Project team Art Director: Kristel Van Ael Assistant Art Director: Bram Boot Production manager: Alain Schiffeleers Illust...
References The illusion of Life: Disney animation by Ollie Johnston (Author), Frank Thomas Disney Editions, 1995 The Nuts ...
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
The animated mobile NUI: lessons from Disney
Upcoming SlideShare
Loading in …5
×

The animated mobile NUI: lessons from Disney

1,119
-1

Published on

Presentation by Kristel Van Ael and Joannes Vandermeulen of Namahn

Published in: Design, Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,119
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
32
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The animated mobile NUI: lessons from Disney

  1. 1. The animated mobile NUI Lessons from DisneyJoannes Vandermeulen and Kristel Van Ael of Namahn Mobile Monday 17/10/2011
  2. 2. What are the principlesof animation?How can animation enhance the user experience?
  3. 3. Context Project request from Atos Worldline use of the full potential of the new 16 bit colour display to create a user-friendly and appealing interface. Field studies, concept and task flows done by Namahn in 2002 and still standing Focus on colour, typography, iconography and… animation
  4. 4. Why animation? Animations provide a natural flow Focusing the user’s attention on the action Ordering the information (hierarchy) Helping the user to stay oriented Lively and engaging, more appealing
  5. 5. In its most basic form,character animationis about storytellingGeorge Maestri
  6. 6. The illusion of motion
  7. 7. Motion blur In the real world, an object leaves an impression of its path in our visual system – a smear.
  8. 8. Motion blur A rule of thumb: if an object moves more than half its size between any two frames, motion blur must be added.
  9. 9. 10 Design principles Solid drawing Staging Squash & stretch Arrival and departure Slow in / Slow out Arcs Follow through Overlapping Anticipation Exaggeration
  10. 10. Does youranimation haveweight, depth andbalance?
  11. 11. Solid drawing
  12. 12. Solid drawing The creation of objects so they appear to have the potential for movement
  13. 13. Solid drawing Giving your animation weight, depth, and balance gives it life
  14. 14. Solid drawing Avoid static symmetry and twin movements
  15. 15. Solid drawing Avoid static symmetry and twin movements
  16. 16. Staging
  17. 17. Staging Making the central idea of an animation completely clear to the viewer.
  18. 18. Squash and stretch
  19. 19. Squash and stretch Defining the rigidity and mass of an object by distorting its shape during an action
  20. 20. Squash and stretch Flipboard vs. Apple iBook
  21. 21. Squash and stretch Pin dropping in Google Maps on iPhone
  22. 22. Arrival and departure
  23. 23. Arrival and departure In real live objects do not appear or disappear suddenly Three variations: objects fly in from off-screen, objects grow from a point to their full size objects dissolve onto the screen. Objects exit in the opposite way that they entered
  24. 24. Arrival and departure Visibility curve
  25. 25. Slow in / Slow out Ease in / Ease out
  26. 26. Slow in / Slow out Slow-in is a gradual acceleration into a motion from a key position Slow-out is the gradual deceleration out of the motion to a key position In either case this principle refers to the simple fact that objects in the real world do not suddenly start or stop moving
  27. 27. Slow in / Slow out
  28. 28. Slow in / Slow out
  29. 29. Slow in / Slow out The principle of slow in and out is applied to the scrolling lists of many mobile UIs.
  30. 30. Arcs
  31. 31. Arcs The movement of most natural motion will be described by a slightly circular path or arc of some kind.
  32. 32. Arcs Arcs applied on the interface of the Nokia Maemo
  33. 33. Arcs Arcs applied on the interface elements of the Android mobile
  34. 34. Follow through
  35. 35. Follow through Objects in the real world do not come to sudden stops, all of the object coming to a standstill at once Example: objects coming to a stop will wiggle at the end of their motion, as if reacting to a small spring at the end of their travel Combine with overlapping action
  36. 36. Overlapping action
  37. 37. Overlapping action Overlapping action is the animation principle that captures how parts of an object move at different rates. Capturing the nature of the movement as well as the slight variations in timing and speed of these parts makes objects seem more natural. An action should never be brought to a complete stop before starting another action.
  38. 38. Anticipation
  39. 39. Anticipation Anticipation is a technique to alert the viewer to an upcoming action so it is not missed. Exaggerating in order to give the audience a cue about the main action to follow Examples: Contrary movement just before move Retracting slightly before expanding A character looking off screen in the where an important action is about to happen
  40. 40. Anticipation
  41. 41. Exaggeration
  42. 42. Exaggeration By increasing the salience of certain aspects of the world, the animator gives the audience footholds from which to better interpret the nature of the character, action, or situation Paradoxically, only by exaggeration do cartoons achieve more realism.
  43. 43. Project team Art Director: Kristel Van Ael Assistant Art Director: Bram Boot Production manager: Alain Schiffeleers Illustrator: Kurt Cornelis Animation advice: Eric Goossens Animator: Raf Schoenmaekers Producer: Inge De Cock Technical support: Luc Vanoostenryck, Mark Vanophalvens, Wouter Verlinden, Jan Verstrepen
  44. 44. References The illusion of Life: Disney animation by Ollie Johnston (Author), Frank Thomas Disney Editions, 1995 The Nuts and Bolts of Animation by Ed J. Cheetham, Country Music Television – MTV Networks Computer Graphics May 2001, Volume 35, pg 48-52 Animation: From Cartoons to the User Interface by Bay-Wei Chang and David Ungar UIST: User Interface Software and Technology, 1993
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×