The Mobile Frontier Blog

Whether it’s a car peeling out from dead
stop, or a sprinter, bursting out of the blocks and making tracks in a race,
objects need time to accelerate and slowdown. The sixth animation principle,
Slow in and Out, deals with the spacing required to accurately depict the
inherit law of inertia that governs all objects and people. Objects in the world need time to accelerate and slow down. A
strategy for accurately depicting this type of motion when creating an
animation is to include more frames of the object near the beginning and end of
a movement, and fewer in the middle. This principle goes for characters moving
between two extreme poses, such as sitting down and standing up, but also for
inanimate, moving objects, such as a bouncing ball.

(Caption: A strategy for accurately
depicting the laws of inertia that govern most objects is to include more
frames of the object near the beginning and end of a movement, and fewer frames
in the middle.)

While the experiences we create for mobile UX often live in another
world – the world behind the glass of our mobile device – allowing some of the
laws of physics to exist in that world makes those experiences more relatable
to users. Whether it’s a subtle timing difference in how a list view of data
scrolls, or the transition between two applications, the principle of slow in
and out (more frames at the beginning and end of a movement) will help your
animations feel more natural and intuitive.

(Caption: The
principle of slow in and out is applied to the scrolling lists of many mobile
UIs. There are more frames at the beginning and end of the movement. This
effect makes the UI appear as if it is governed by the laws of inertia.)

(Caption: There
are more frames at the beginning and end of the scrolling transition of the
home screen of the iPhone, making the application icons movement feel more
natural and intuitive.)

Imagine a big dog with giant jowls – like a Boxer or a Bulldog – 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 is the preparation of an action, follow through deals with the end of an action. Actions rarely
come to a sudden and complete stop, but are generally carried past their
endpoint. Follow through captures how parts of an
object continue to move even after other parts of that object have stopped
moving.

(Caption: Follow through captures how parts of an object (like
the dog’s jowls) continue to move even after other parts of that object (like
the dog’s head) have stopped moving.)

Now imagine that very same dog walking down a sidewalk
with his owner. The dog’s entire body is moving, but different parts of his
body are moving at different rates. The timing of his legs is different than
the timing of the movement of his tail, or head. 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. Overlapping maintains a continual flow between whole phrases of
actions.

A user interface is a collection of small elements that
work together to form a system. Just as parts of a dog’s body move at different
rates, the movement of elements within a UI should move with different yet
appropriate timing. While UI elements of a mobile experience should work
together to form a whole, the principles of follow through and overlapping
action can help define and communicate the nature of the relationships between UI elements. Follow through and
overlapping action are subtle principles that can help express how elements of
a UI interrelate to each other with the use of movement.

Mobile UX Follow Through and Overlapping Action Examples:

(Caption: The
transition animation to and from the dynamic tiles experience on the Windows
Mobile 7 employs the principle of overlapping action. The tiles do not travel
as one unit, but rather each tile moves at a different rate.)

Straight ahead and pose to pose are animation
techniques that refer directly 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 (the important frames of a sequence) and inbetweens (the intermediate frames that
express movement between the keyframes).

(Caption:
The first illustration depicts the straight ahead drawing technique in which
every single frame of an animation is rendered. The second illustration
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
will usually suffice for transitions that are not overly complex and 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, you’ll likely need to incorporate the straight
ahead drawing technique in order in order capture the motion you are
envisioning.

(Caption 1.0: Popular games like Plants and Zombies for the iPad employs the use of pose to pose
animation techniques.)

(Caption 2.0: Games with more complex
movement, like the ones found in the iPad game Fruit Ninja, use straight ahead animation techniques to capture
dynamic motion.)

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 – 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. Interactions
that are well staged combine light, color, composition, and motion to direct
the user’s eye to exactly where it needs to be as they interact with an
experience. Well-staged mobile experiences have a sense of flow and ease,
whereas poorly staged ones feel disjointed.

(Caption: The well-staged illustration
makes the central idea – two characters engaged in conversation – completely
clear. The poorly staged illustration leaves the dynamic between the two
characters open for interpretation, making the central idea unclear.)

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

Mobile UX Staging Examples

(Caption:
Good staging used in the iPad version of Keynote allows users to see exactly
where the file they are currently working on lives in the application’s file
structure. This subtle use of staging allows the user to feel grounded in the
experience.)

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

(Caption:
Organic and soft surface objects, such as a balloon filled with water have some
level of flexibility in their shape. Squash and Stretch is the animation
principle that helps depict this character in animation.)

This principle should be used to help communicate the 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
movement? Or is it a world that’s more organic, with softer, pliable surfaces
with easy, graceful movement? Squash and stretch is the principle that can help
you express your decision through movement.

Mobile UX Squash and Stretch Examples

(Caption: Screen transitions in Flipboard use the
principle of squash and stretch to express the surfaces inside the
world of the application are rigid and “board-like”. In 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 an analog book.)

I recently finished the first draft of Chapter 5  –
Animation and Motion: A New Design Material. It struck me as important subject
to cover in the book since motion is becoming an important design component in
all the major mobile platforms, yet most designers don’t have a lot of
experience working with it.

The backbone of the chapter explores the Twelve Basic Principles of
Animation from the
bible on animation – The Illusion of Life: Disney Animation.

I’ve
learned a lot writing this chapter so I thought it would be fun content to
share here. So, for the next 12 days, I’ll be posting a principle a day along
with mobile examples. I’d be thrilled if you provide feedback, share any mobile
examples you’ve seen of the principles in action, or share your experiences
applying animation to your own mobile design work.

Growing up, my sister and I were big fans of Shrinky Dink Kits. I fondly remember the many hours we spent meticulously adding color to outlined images of our favorite cartoon characters printed on the weird, slightly slippery Shrinky Dink plastic paper. While the activity itself was akin to coloring in coloring books, the final product was infinitely cooler. A standard kitchen oven was all that was needed to unlock the magical powers of Shrinky Dinks. Bake the colored paper characters in a hot oven like a batch of cookies and they’d magically turn in to tiny versions of themselves.

Shrinky Dinks and Mobile UX
Shrinky Dinks come to mind when I think of the often-cited screen real estate disparity between mobile devices and personal computers; mobile experiences have substantially less screen real estate to work with than their PC counterparts. A common yet unwise method for dealing with less screen real estate is to employ a Shrinky Dink strategy – to simply shrink a PC experience, load it onto a mobile device and call it a mobile experience. While my fondness for Shrinky Dinks clearly runs deep, miniaturizing a PC experience for a mobile device is a bad idea. It’s a surface solution to a structural problem. Successful PC and mobile experiences are built on fundamentally different conceptual models and leverage different psychological functions of the user. Understanding these differences will help you create better experiences for both contexts.

PC Design Patterns: Anchors, Stacking, and Recognition
All PC experiences have a conceptual anchor – the desktop – from which users can navigate. Similar to a Jenga tower or a stack of papers, PC experiences have a conceptual “bottom” and “top” that’s anchored to the desktop. Like stacks of paper placed on a table, the desktop metaphor enables multiple cascading application windows to be open at once. These open windows can be shifted and shuffled (reinforced by functions like “bring to front” or “send to back”.) This sense of a static anchor coupled with the ability to layer and cascade application windows enables users to traverse between applications with ease and multi-task.

Similar to a Jenga tower, PC experiences have a conceptual “bottom” and “top”, making it easy to stack cascading application windows in a layered fashion.

Users of desktop experiences interact with graphical user interfaces (aka GUIs). Graphical user interfaces are built on the psychological function of recognition. Users click on a menu item, the interface provides a list of actions, the user recognizes the appropriate action and clicks on it. GUIs reliance on recognition gave rise to the term WYSIWYG (What you see is what you get). Users can see all their options and minimal visual differentiation between interface elements is commonly used.

Unfolding, “Topping In” to Information, and Intuition
In contrast, mobile experiences – especially those with touch screens and natural user interfaces – can feel anchorless by comparison. Instead of cascading windows stacked on top of each other, open mobile applications take up the entire screen. Lacking the screen real estate to present all the interface options at once, mobile UIs intelligently truncate and compartmentalize information into bite-size portions that users can navigate in a way that feels intuitive. If PC experiences are anchored, mobile experiences are about movement and unfolding.

Instead of possessing a strong conceptual anchor, mobile experiences unfold and progressively reveal their nature. While PC experiences present all the content and functionality at once, great mobile experiences allow users to “top in” to information, and reveal more content and complexity as the user engages with the application or experiences.

The natural user interfaces (aka NUIs) found on most modern mobile devices are built on the psychological function of intuition. Instead of recognizing an action from a list, users must be able to
sense from the presentation of the interface what is possible. Instead of “what you see is what you get” NUIs are about “what you do is what you get.” Users see their way through GUI experiences, and sense their way through NUI ones. Unlike GUI interfaces with minimal differentiation between interface elements, NUI interfaces typically have fewer options and there is more visual differentiation and hierarchy between the
interface elements.

Patterns are emerging with regard to the way in which mobile experiences unfold. The following examples are some patterns I’ve been tracking.

Mobile experiences that employ the nesting doll pattern are all about funneling users to detailed content. This pattern allows users to toggle easily between an overview screen displaying many pieces of content, to a detail-level view of a specific piece of content. It’s a pattern has a strong sense of forward/ back movement.

Nested Doll Examples: iPhone Email App, BravoTV App, Netflix App

Mobile experiences with a hub and spoke pattern have a strong central anchor point from which users can navigate. Similar to the model of an airport hub, users can bypass the hub and navigate to other “spokes” of the system. However, users interacting with hub and spoke experience often traverse through the hub of the application several times while engaging with the experience. This pattern works best when applied to experiences with large quantities of content or to experiences with a several disparate types of functionality.

Hub and Spoke Examples: Flipboard App, Facebook App, FourSquare App

Just like a bento box from a Japanese restaurant, this pattern carves up the surface area of a mobile device’s screen into small compartments, each portion contributing to the overall experience. This pattern is a good way to express sets of information that are strongly related to each other and is more commonly used on tablets than smartphone experiences.

Similar to the optical refractor used in an optometrist’s office, the filtered view pattern allows users navigate the same data set using different views. It’s a pattern that’s especially well suited for navigating large sets of similar digital media such as music, photos, video, or movies.

Filtered View Examples: iPod on the iPad or iPhone, CoolIris App, Calendar Apps on most smartphones and tablets

What mobile “unfolding” patterns have you been noticing?

Last week I had the opportunity to share some fresh content from **The Mobile Frontier** at [WebVisions 2011](http://www.webvisionsevent.com/) in Portland. Thanks to all who attended the talk and tweeted such kind words – especially to conference organizer Brad Smith for inviting me to be a part of a fantastic event.

Last week I presented the following talk on Mobile Prototyping at Web Directions Unplugged in Seattle. It was a great opportunity to share content from my latest chapter of The Mobile Frontier on prototyping. Thanks to John Allsopp, Maxine Sherrin, and Brian Fling for including me in such an inspiring event.