Motion & AnimationA New Mobile UX Design Material

Advertisement

Growing up, weekends were about worship in the Hinman household. Sunday mornings were reserved for a laborious worship ritual dictated by my parents. It required dressing up in uncomfortable clothes, going to church and pretending to listen to long-winded sermons about Jesus (while I drew doodles in the hymnals).

Saturday, however, was reserved as my day of worship, and I was a proud and dedicated disciple of the church of Saturday Morning Cartoons. Every Saturday, rain or shine, healthy or sick, I’d jump out of bed, run downstairs to the living room, plant myself in front of the TV, and celebrate the gospel of Wonder Woman, Captain Caveman, Scooby Doo and Papa Smurf for hours on end. While my parents were far from enthusiastic about my choice of religion, they tolerated it as a form of quid pro quo for Sunday church attendance.

Little did either of us know that those hours of fanatical dedication to the gospel of Saturday morning cartoon programming would eventually turn into a valuable vocational asset. I imagine that many of you reading this are members of the very same congregation — the group of us who recognize the subtle yet important religious differences between still-frame cartoons (like those found in the funnies section of the Sunday newspaper) and the animated TV cartoons before, which we gladly took the communion of orange juice and cereal every Saturday morning. We are the ones who understand what adding movement to something flat and lifeless can do. Movement breathes life into everything it touches.

Wonder Woman1

Scooby Doo2
Animated cartoons such as Wonder Woman, Scooby Doo and Captain Caveman taught me how movement can breathe life into drawings.

Adding movement to anything — whether a series of drawings or the transitions between the screens in a digital experience — is not just as easy as “adding water.” It’s an art that requires patience, an eye for subtlety and careful study of how objects and people move through space and time.

Transitions and subtle motion-based animations are emerging as a new and compelling mobile design material, worthy of being learned and being used with efficiency and grace. The addition of movement to a mobile experience can provide clarity, information about context and, frankly, a dash of joy and fun. However, too much animation or funky transitions can destroy a perfectly good mobile experience. This makes understanding the guiding principles behind the art of animation the best first step to artfully applying motion to your design work.

The people who understand this better than anyone are the legions of brilliant animators who have worked at Walt Disney. Thankfully for us, two animators by the names of Ollie Johnston and Frank Thomas decided to put pen to paper and share with the world the basic animation principles used by Disney animators during the filmmaking process in their book, The Illusion of Life: Disney Animation3.

You may wonder what animation has to do with the mobile user experience. While the art form of animation was once the provenance of animated films and television, it has found its way into the computer and digital user experience realms. Artful animation has all but invaded the mobile user experience field. Whether it is the transitions between screens of a mobile experience or the behaviors applied to UI elements that can be interacted with using gestures, motion has become a significant mobile design element. It’s a design material you can use to help guide users through the mobile experiences you create.

Taking cues from Johnston and Thomas, this chapter explains the 12 basic principles of animation, borrowed from their 1981 book The Illusion of Life: Disney Animation. Although originally developed for animated film and television, these principles are completely applicable to screened-based experiences, too. If applied with subtlety and finesse, motion can elevate your mobile work, giving it that little touch of magic that you experienced every Saturday morning as a child.

The Illusion Of Life Disney Animation4
The Illusion of Life: Disney Animation, by Frank Thomas and Ollie Johnston, outlines 12 basic principles of animation.

Here are the 12 basic principles of animation:

  1. Squash and stretch
  2. Anticipation
  3. Staging
  4. Straight ahead and pose-to-pose
  5. Follow through and overlapping action
  6. Slow in and out
  7. Arcs
  8. Secondary action
  9. Timing
  10. Exaggeration
  11. Solid Drawing
  12. Appeal

The 12 Principles Of Animation

Principle 1: Squash and Stretch

People and objects have an inherent mass. When an object moves, the quality of the movement often indicates the rigidity of the object. Manmade real-world objects, such as a bookshelf or wooden chair, are rigid and have little flexibility. Soft surfaces, such as clothing, organic objects and plant leaves, have less rigidity and higher flexibility. Squash and stretch is the animation principle used to accurately express the rigidity of an object.

Squash And Stretch5
Organic and soft-surface objects, such as a balloon full of water, have some level of flexibility in their shape. Squash and stretch is the animation principle that helps depict this quality in animation.

Consider using this principle when you decide what feeling you want your mobile experience to evoke as users engage with it. Is your mobile experience a world of solid planes, rigid surfaces and sharp, exact movements? Or is it a world that’s more organic, with softer, pliable surfaces and easy, graceful movements? Squash and stretch can help you express those movements.

Flipboard6

Apple's iBook7
Screen transitions on Flipboard exhibit the principle of squash and stretch to express that the surfaces inside the world of the application are rigid and board-like. By contrast, the screen transitions in Apple’s iBook use the principle of squash and stretch to echo the flexible and organic movement of turning the pages of a real paper book.

Principle 2: Anticipation

When an illustrator depicts a moving object or character, three distinct phases should be considered to make the object’s movement realistic:

  • The preparation for the action,
  • The action itself,
  • The results of the movement.

Whether it’s a baseball batter winding up before a swing or the recoil of a spring before it’s sprung, anticipation is the animation principle used to prepare an object for movement. Anticipation is about orchestrating the components of a scene — lighting, composition or even the form of an object or character — in order to give the viewer a clue of what is about to happen.

Bowler8
The crouch of a bowler, winding up before swinging a bowling ball, is an example of a pose and motion that the principle of anticipation captures.

Similar to its application in animated film and cartoons, when applied to the realm of mobile UX, anticipation is all about giving the user insight into what is about to happen next. For example, the principle could be applied to the visual treatment of the interface as the user opens an application. It could also be applied to the transitions between experiences. Because gesture languages are relatively new to users, the principle of anticipation could also be used to provide affordance for gestural UIs. Anticipation gives clues about the speed and direction that objects in a UI can move and the gestural possibilities of those objects.

Aperture Animation9
The aperture animation found in the camera application of many smartphones prepares the user for the action of taking a photograph.

Palm Pre10
The way the cards in the Palm Pre’s UI move is an affordance for users, giving them insight into the gestural language of the UI.

Window Shade Animation11
The window shade animation on the home screen of the Windows Phone 7 employs the principle of anticipation by giving users a peek into the phone’s dynamic tiled UI.

Principle 3: Staging

People keen on selling property often “stage” a home, meaning they arrange each room in such a way that its purpose is completely clear. The principle of staging in animation is similar, because good staging makes the central idea of an animation completely clear to the viewer. In the world of mobile user experience, the principle of staging is most relevant when considering the transitions between screens and interactions. An interaction that is well staged combines light, color, composition and motion to direct the user’s eye to exactly where it needs to be as they interact with the experience. Well-staged mobile experiences have a sense of flow and ease, whereas poorly staged ones feel disjointed.

Staging12
The well-staged illustration on the right makes the central idea — of two characters engaged in conversation — completely clear. The poorly staged illustration on the left leaves the dynamic between the two characters open to interpretation, making the central idea unclear.

Staging is a subtle yet important consideration when applying animation and motion to a mobile experience. A key challenge in creating natural user interfaces is that they lack a strong conceptual anchor. As a result, users who are new to natural UIs often feel anchorless as they navigate touchscreen experiences. If you apply good, strong staging to the animation and transitions of your mobile experience, then users will likely feel more grounded when they interact with it.

Mobile UX Staging13
Good staging used in the iPad version of Keynote enables users to see exactly where the file they are currently working on lives in the application’s file structure. This subtle use of staging makes the user feel grounded in the experience.

Principle 4: Straight-Ahead and Pose-to-Pose

Straight ahead and pose to pose are techniques related to the animation drawing process. In order to capture fast dynamic action with unusual movement, animators will use the straight-ahead technique and draw every single frame of an animation. The pose-to-pose drawing technique employs the use of keyframes (i.e. the important frames of a sequence) and in-betweens (i.e. the intermediate frames that express movement between the keyframes).

Straight Ahead14
The illustration on top depicts the straight-ahead technique in which every single frame of an animation is rendered. The illustration on the bottom represents the keyframes that will be used in a pose-to-pose animation.

The vast majority of animations and transitions used in mobile experiences employ the pose-to-pose animation technique. Pose-to-pose usually suffices for transitions that are not overly complex and that can be described easily. If you’d like to incorporate unusual or dynamic movement in your experience that can’t be achieved using pose-to-pose, then you’ll likely need to incorporate the straight-ahead technique.

Plants Vs. Zombies15
Popular games such as Plants vs. Zombies16 for the iPad employ pose-to-pose animation techniques.

Fruit Ninja17
Games with more complex movement, as in the iPad game Fruit Ninja18, use straight-ahead animation techniques to capture dynamic motion.

Principle 5: Follow-Through and Overlapping Action

Imagine a big dog with giant jowls shaking his head side to side. The dynamic movement of the flabby skin on his face as he shakes his head to and fro is an example of the fifth animation principle: follow-through and overlapping action. While anticipation has to do with the preparation of an action, follow-through involves the end of an action. Actions rarely come to a sudden and complete stop, but rather come to a gradual end. Follow-through captures how parts of an object (like the dog’s jowls) continue to move even after other parts of the object (like the dog’s head) have stopped moving.

Follow-through19
Follow-through captures how different parts of an object move at different rates (such as a dog’s head moving at a different rate than its ears or jowls).

Now imagine that dog walking down a sidewalk with his owner. His entire body is moving, but the timing of his legs is different than the timing of his tail or head. Overlapping action is the animation principle that captures how parts of an object — such as the dog’s head, tail and legs — move at different rates. Capturing the movement, as well as the slight variations in timing and speed of these parts, makes the objects seem more natural. An action should never be brought to a complete stop before another action has begun. Overlap maintains a flow between self-contained phrases of action.

While UI elements of a mobile experience should work together to form a whole, follow-through and overlapping action can help you define and communicate the relationship between UI elements. Transitions and animations are a great way to express how elements of a UI interrelate.

Windows Mobile20
The transitions to and from the dynamic tiles on a Windows phone employ the principle of overlapping action. The tiles do not travel as one unit, but rather each tile moves at a different rate.

Principle 6: Slow In and Out

Whether it’s a car peeling out from a dead stop or a sprinter bursting out of the blocks and making tracks in a race, objects need time to accelerate and slow down. The sixth animation principle, slow in and out, deals with the spacing required to accurately depict the inherent law of inertia that governs all objects and people.

Objects in the world need time to accelerate and slow down. A strategy to accurately depict this type of motion is to add more frames of the object near the beginning and end of the movement and fewer in the middle.

Inertia21
Adding more frames of the object near the beginning and end of a movement and fewer frames in the middle creates the illusion of the effect of inertia.

This principle works for characters moving between two poses, such as sitting down and standing up, and for inanimate moving objects, such as a bouncing ball. While the experiences we create for mobile UX often live in another world — the world behind the glass of the mobile device — allowing some of the laws of physics to exist in that world will make those experiences more relatable to users. Whether it’s a subtle difference in timing in how a list of data scrolls or the animated transition that appears as an application opens, slow in and out will make the motion phrases of your experience flow in a way that feels natural to the user.

Scrolling List22

Scrolling List23
The principle of slow in and out is applied to the scroll of lists in many mobile UIs. More frames are at the beginning and end of the movement. This effect makes the UI appear as if it is governed by the laws of inertia.

iPhone Home Screen24

iPhone Home Screen25
More frames are at the beginning and end of the scrolling transition of the home screen on the iPhone, making the application icons feel as though they adhere to the laws of inertia.

Principle 7: Arcs

Objects don’t move through space randomly. Instead, they move along relatively predictable paths that are influenced by forces such as thrust, wind resistance and gravity. The outline of a sparkler on the Fourth of July or skid marks on the pavement from a braking car are rare physical traces of these paths; usually, an object’s trajectory is invisible.

Sparkler26
An object’s trajectory is largely invisible, except on rare occasions, such as a lit sparkler whose glowing sparks trace its path.

While these paths are largely unseen by the human eye, patterns exist for trajectories based on whether the object is organic or mechanical. Objects that are mechanical, such as cars, bicycles and trains, tend to move along straight trajectories, whereas organic objects, such as plants, people and animals, tend to move along arched trajectories. The object you want to animate should reflect these characteristics for greater realism.

When integrating motion into a mobile experience, consider whether the object being animated should reflect organic or mechanical qualities. If the former, then the arc animation principle suggests that the object should move along an arched trajectory. If the latter, then the object would move along a straight path.

Fish And Water27
Natural elements such as the fish and water in this iPhone application move along arched trajectories.

Interface Elements28
Interface elements in the Android mobile platform tend to move along straight lines, giving the UI a mechanical feeling.

Principle 8: Secondary Action

Imagine a squirrel running across your lawn and then leaping into a tree. The movement of the squirrel’s legs (considered the primary action) would be animated to emphasize the animal’s light, nimble, spry gait. The agile, undulating movement of the squirrel’s tail (the secondary action) would be a separate and slightly different type of movement that supports the primary action.

Secondary Action29
The primary action of this animation is the movement of the squirrel’s body and legs. The shape and character of the squirrel’s tail as it moves is the secondary action. Together, they make the animation feel more realistic.

The squirrel’s tail is an example of secondary action, which supports the primary action of an animation sequence without distracting from it. Secondary action is applied to reinforce the mood or enrich the main action of an animated scene. The key to secondary action is that it should emphasize, rather than draw attention from, the main action.

The transition that occurs when a user clicks on a URL in an email, activating the browser on an iPhone, is an example of secondary action. The primary action is the browser window swinging forward into view. The secondary action is the email application receding into the background. Both actions occur simultaneously, but the secondary action of the email application supports the primary action of the browser window.

Mobile UX Secondary Action30
An example of secondary action applied to an animated transition between application windows.

Principle 9: Timing

In animation, as in life, timing is everything. The frustration and awkwardness we feel when objects, characters or life itself move too slow or too fast is a testament to the innate importance of timing. In the world of animation, timing refers to the number of drawings or frames of a given action, which translates to the speed of the action on film. Timing is an important technique to master because it helps define the physical characteristics of an object, such as weight, size and scale. It can also make objects appear to abide by the laws of physics — as seen, say, in the speed of an object when pushed.

In addition to expressing physical characteristics, timing helps communicate the emotional state, mood and personality of an object or character. For example, subtle adjustments in timing can communicate the physicality and mood of the focused and deliberate Wile E. Coyote as he feverishly chases the quick, good-natured Road Runner, who by contrast moves with ease.

Timing31
Timing — the mere speed at which the Road Runner moves — expresses both the physicality of the character (weight, height and scale) and the mood of the chase between the Road Runner and Wile E. Coyote.

Whether it’s the speed at which a list scrolls or the pacing of a transition between screens in a mobile application, timing is subtle yet important to master. Timing, as it applies to the mobile UX, is an art that requires finesse and practice. Take the time to understand what is being communicated through the movement and speed of the interface elements in your design. Also, take time for experimentation and trial and error as you begin to work with animation.

iPad Photo App32

iPad Photo App33
The timing in the iPad’s photo application is akin to the quick shuffling of a deck of cards. It expresses lightness, buoyancy and hyper-realistic speed.

Principle 10: Exaggeration

The principle that I feel brings the most fun to the animation party is exaggeration. It’s the element that makes movement feel dynamic, alive and just plain fun — much like the iconic characters Ren and Stimpy34.

Ren And Stimpy35
Canadian animator John Kricfalusi masterfully used exaggeration in the Ren and Stimpy animated television series.

An animation without some level of exaggeration might look accurate, but will likely feel stiff and mechanical. Mastering this principle involves identifying the relevant design element, figuring out how that element moves, and then tweaking the shape, scale or composition of the element so that it reinforces the movement, while adding a layer of drama. Exaggeration does not necessarily mean extreme distortion.

The classic definition of exaggeration, employed by Disney, is to remain true to reality but to present a wilder form. When applying this principle to movement in a mobile experience, exercise a certain level of restraint. If a scene contains several elements, then the exaggeration of those elements should be balanced relative to each other, to avoid confusing or annoying the viewer.

Trampoline36

iPad Transition37

iPad Transition38

iPad Transition39
The transition between the home screen of the iPad and the opening of an application is exaggerated. It makes opening an application feel springy and fun, like bouncing on a trampoline.

Principles 11 and 12: Solid Drawing and Appeal

Of the 12 animation principles outlined by Johnston and Thomas, the last two — solid drawing and appeal — are the most specific to character animation. Thus, they have slightly less relevance to mobile UX. Solid drawing is about honoring the rules of three-dimensional space and giving objects and characters appropriate dimensionality through volume and weight. Solid drawing requires animators to understand the basics of three-dimensional shapes: anatomy, weight, balance, light and shadow.

Solid Drawing40
Solid drawing emphasizes three-dimensional shapes, accurate anatomy and animation that has a sense of weight, balance, light and shadow.

The appeal of an animated character is similar to the charisma of a live actor. A character who is appealing is not necessarily sympathetic — because villains or monsters can also be appealing. The important thing is that the viewer feels the character is real and interesting.

Methods Of Conveying Motion In Your Work

While the 12 principles developed by Johnston and Thomas are helpful for providing a vocabulary for motion and giving a sense of what’s possible, the core question of how to integrate motion into a design remains. The first step is to be aware of motion as a design material. The next step is to begin to integrate motion into the design process. Here are three key places in the design process where you can begin working with the magic of motion:

  • sketching,
  • wireframing,
  • prototyping.

Sketching

The time to start thinking about motion is during the sketching phase of your design process. Similar to how the movement of an animated character expresses its personality, the movement of screens and interface elements are powerful ways to express the personality of the mobile experience you’re creating. Sketching ideas for transitions and movement phrases early on will help you think about the personality that you want your mobile experience to convey and how you can use motion to communicate it.

Sketching41
This motion storyboard sketch for the “opening iTunes details” transition is done with basic sticky notes.

Wireframing

Wireframing is yet another phase in the design process to work out the motion you want to integrate into the mobile experience. Because wireframes often convey the flow of screens, transitions — i.e. the motion between screens — fit naturally into wireframe documents. Using images and illustrations, you can begin to draw out the movements you have in mind. Because wireframes are documents that communicate design ideas to both developers and stakeholders in an organization, simply including motion specifications in the document will make everyone aware of motion and get them talking about it.

Wireframe42
This motion specification in a wireframe document relies on images and illustrations.

Prototyping

Sketching and wireframing motion are good first steps, but nothing beats the real thing. Using prototyping tools whose vocabulary includes motion is one of the most powerful ways to foster your own fluency with motion as a design medium. Tools such as presentation software (Keynote, PowerPoint, etc.) include motion in their vocabulary. Instead of sketching motion, create low-fidelity prototypes using this software, which will help you experiment with motion and communicate your animation ideas more accurately to the design team.

Keynotopia43
Creating prototypes with software such as Keynotopia allows you to animate user interactions and transitions between screens, enabling you to experiment with your motion ideas using the real thing.

Tips For Applying Animation Principles To Your Mobile UX Project

  1. Exercise restraint.
    Few things are more annoying than a mobile experience with too much animation pizazz. While animation is fun and exciting, don’t over-apply it, otherwise you might turn a great experience into a train wreck. Instead, rely on subtlety and finesse to convey motion.
  2. Complementary principles
    Whether it’s a scene in an animated movie or the transitions between screens in a mobile experience, animation principles rarely exist in isolation. Rather, most effective animations are an orchestration of many principles applied together. As your animation skills grow, you’ll learn how to artfully combine these principles like great recipes.
  3. Animation in a supporting role
    In film, animation supports the story. The same is true for mobile UX. Animation should complement the mobile experience, not be the star. Make sure your animation supports the interactions in the experience and doesn’t detract or confuse.

Summary

Once reserved for cartoons and movies, motion is a new and powerful design material in the mobile UX landscape. In addition to bringing focus and clarity, it can add a bit of character and even magic to the experiences you create. While any new design material can be time-consuming to learn, getting up to speed on animation and motion will probably feel intuitive and not feel like a chore, and it will make all those hours of watching Saturday morning cartoons as a child seem like a wise investment.

To sum up:

  • Transitions and subtle motion-based animations are emerging as a new and compelling mobile design material that can add efficiency and grace. The addition of movement to a mobile experience can bring clarity, information about context and a dash of joy and fun.
  • Although originally developed for animated film and television, the 12 basic principles of animation from the 1981 book The Illusion of Life: Disney Animation apply to screen-based experiences, too. These principles are listed below.
    1. Squash and stretch
    2. Anticipation
    3. Staging
    4. Straight ahead and pose to pose
    5. Follow-through and overlapping action
    6. Slow in and out
    7. Arcs
    8. Secondary action
    9. Timing
    10. Exaggeration
    11. Solid drawing
    12. Appeal
  • Three key point in the design process where you can begin working with the magic of motion are sketching, wireframing and prototyping.

This article is an excerpt of The Mobile Frontier44written by Rachel Hinman (Rosenfeld Media, 2012).

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/wp-content/uploads/2012/07/07.01.jpg
  2. 2 http://www.smashingmagazine.com/wp-content/uploads/2012/07/07.031.jpg
  3. 3 http://www.amazon.com/The-ILLUSION-OF-LIFE-ANIMATION/dp/0786860707
  4. 4 http://www.smashingmagazine.com/wp-content/uploads/2012/07/07.04.jpg
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2012/07/07.05.jpg
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2012/07/07.06.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2012/07/07.07.jpg
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2012/07/07.08.jpg
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.09.jpg
  10. 10 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.11.jpg
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.10.jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.12.jpg
  13. 13 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.13.jpg
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.14.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.15.jpg
  16. 16 http://www.popcap.com/games/plants-vs-zombies/home
  17. 17 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.16.jpg
  18. 18 http://www.halfbrick.com/our-games/fruit-ninja/
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.17.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.18.jpg
  21. 21 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.19.jpg
  22. 22 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.20.jpg
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.21.jpg
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.22.jpg
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.23.jpg
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.24.jpg
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.25.jpg
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.26.jpg
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.27.jpg
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.28.jpg
  31. 31 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.29.jpg
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.31.jpg
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.32.jpg
  34. 34 http://en.wikipedia.org/wiki/The_Ren_%26_Stimpy_Show
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.33.jpg
  36. 36 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.34.jpg
  37. 37 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.35.jpg
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.36.jpg
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.37.jpg
  40. 40 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.38.jpg
  41. 41 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.39.jpg
  42. 42 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.40.jpg
  43. 43 http://www.smashingmagazine.com/wp-content/uploads/2012/08/07.41.jpg
  44. 44 http://www.amazon.com/Mobile-Frontier-Rachel-Hinman/dp/1933820551

↑ Back to topShare on Twitter

Rachel Hinman is a researcher, designer and a recognized thought leader in the mobile user experience field. She is currently a senior research scientist with the Interaction and Experience Research Group at Intel and the author of The Mobile Frontier.

Advertising
  1. 1

    Fantastic! These rules when properly followed make a world of difference. And also give names to the things that don’t feel right. It’s incredibly helpful to know these terms and phrases so you can effectively communicate what is and isn’t working in UI animation. Otherwise you end up speaking in generalities and vague feelings.

    4
  2. 2

    Nice article. Connections that I’ve often overlooked – even though I work with both areas. I guess certain things become a bit subconcious.

    For me, the key is to ensure you don’t patronise with the motion you employ.

    3
  3. 3

    So glad to see somebody else embracing traditional animation techniques! I’ve been a big fan of animation and have been delving into the medium’s visual techniques for years. I honestly never learned formally how to storyboard “the UX way”–my technique is adapted heavily from animation, and I daresay it lends a lot more movement and flexibility to my work (which has been primarily for interactive web/desktop products, but it absolutely applies to mobile as well). It’s fantastic that you’re referencing The Illusion of Life–I scored a used copy a few years ago and it’s really a treasure trove of information. Thanks for this!

    1
  4. 4

    Animation is definitely coming up big in UX, especially in mobile, where the real estate is so expensive, sometimes the only way we could te a user what is happening is by providing animation. Kind of like keyframing between two points. For a great experience it is essential.

    However, animation can not be learned by simply reading about the principles and figuring out how the software works. It comes from practice, and observing how the real world works. Best animators spend a lot of time on the field trying to see how animals, people and objects behave – and that is truly the best way to know how it should look on the screen. This is one of the few cases where your intuition will serve much better than any theory and numbers.

    If you would like to create your own animation in UI, spend some time making actual cartoons (I did: http://films.artsocket.com/ ). If you are hiring someone, at least spend some time learning the principles (above) and watch tutorials online – generally, get in to it.

    Hope this helps,
    -d.

    4
  5. 5

    I’m a faithful follower of SmashingMag, but I don’t usually comment. This is such a great article. Very inspiring, grab me from the first sentence. Congrats Rachel Hinman!

    0
  6. 6

    I’m a huge fan of animation where it helps to enhance the user experience – it’s something I try to incorporate every time I need to ‘tell a story’ on a website or web app that I’m developing. Great to see this article with some nice solid examples and references. Much appreciated.

    1
  7. 7

    Thanks for taking the time to write a really great article.

    0
  8. 8

    That Ren & Stimpy drawing used in this article was not done by John Kricfalusi. Not even close. He has a great blog where he freely gives animation advice. He’s probably one of the few who really knows traditional 2D animation. Check it out at johnkstuff.blogspot.com

    1
  9. 9

    Didn’t someone already write an article on the 12 principles like this? Nice to see more animation articles anyway!

    1
  10. 10

    For those wanting to delve deeper, I recommend reading Richard Williams’ The Animator’s Survival Kit – a good foundation for character modelling, physics, walk cycles etc – and covers a lot of what was discussed in the article. He also has a rather pricey set of DVD tutorials that expand on it, available from his website.

    If you want to go to the roots of the ‘retro’ Kricfalusi style, check out Amid Amidi’s blog (and book) Cartoon Modern, which explores not just the groovy minimal-modern style of 50s/60s animation, but also how modernist European painters fled the Nazis and ended up working at animation studios like UPA and Warner Brothers…

    0
  11. 11

    This is a fantastic article – the theory is well explained and the application clearly illustrated. Many thanks!

    0
  12. 12

    If you want to remember the order of these principles, use the phrase “FAST AS PASSES!”

    0
  13. 13

    I’ve included this as part of my UX class for years, such a great book with great background of HOW Disney got to these techniques and amazing drawings and stories. Worth EVERY penny. Never forget sound design in your plans as well.

    0
  14. 14

    Thank you for this! I have been trying to say thing for a while now but never so elegantly. I took animation for a few years in highschool and got a small job making animations after. Now I am a UX designer but I still see the importants of story and animation principles in UX lacking.

    Brovo, bravo!!!!!

    0
  15. 15

    I’m a 3D animator and aprove this post :D

    0
  16. 16

    Great article! I would have really loved to have seen some animated examples, though. Some animated GIFs would have complemented the still images nicely.

    0
  17. 17

    This is a great resource for using animation is design. The 12 principles are so helpful, especially the section on prototyping using tools like Keynotopia. Thanks!

    Kate
    katemats.com

    0
  18. 18

    A nice article on compiling animation principles in mobile UX designs. It will definitely help the designers in using these principles in their designs. Thanks much!

    0
  19. 19

    Great article on the use and importance of animation in digital design – a subject that is very dear to me. I’ve recently written a number of articles on the subject specifically for Mobile Interaction Design.

    The Magic of Transitions and Animation in Mobile Interaction Design – j.mp/14dqxfN

    0
  20. 20

    Just a note, the linked animations are no longer found and turn up errors.

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top