Extracted from:

Designed for Use, Second Edition

This PDF file contains pages extracted from Designed for Use, Second Edition,
published by the Pragmatic Bookshelf. For more information or to purchase a
paperback or PDF copy, please visit [Link]
Note: This extract contains some colored text (particularly in code listing). This
is available only in online versions of the books. The printed versions are black
and white. Pagination might vary between the online and printed versions; the
content is otherwise identical.
Copyright © 2016 The Pragmatic Programmers, LLC.

All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted,

in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise,
without the prior consent of the publisher.

The Pragmatic Bookshelf

Dallas, Texas • Raleigh, North Carolina
Designed for Use, Second Edition

Lukas Mathis

The Pragmatic Bookshelf

Dallas, Texas • Raleigh, North Carolina
Many of the designations used by manufacturers and sellers to distinguish their products
are claimed as trademarks. Where those designations appear in this book, and The Pragmatic
Programmers, LLC was aware of a trademark claim, the designations have been printed in
initial capital letters or in all capitals. The Pragmatic Starter Kit, The Pragmatic Programmer,
Pragmatic Programming, Pragmatic Bookshelf, PragProg and the linking g device are trade-
marks of The Pragmatic Programmers, LLC.
Every precaution was taken in the preparation of this book. However, the publisher assumes
no responsibility for errors or omissions, or for damages that may result from the use of
information (including program listings) contained herein.
Our Pragmatic courses, workshops, and other products can help you and your team create
better software and have more fun. For more information, as well as the latest Pragmatic
titles, please visit us at [Link]

The team that produced this book includes:

Michael Swaine (editor)
Potomac Indexing, LLC (index)
Nicole Abramowitz (copyedit)
Dave Thomas (layout)
Janet Furlow (producer)

For customer support, please contact support@[Link].

For international rights, please contact rights@[Link].

Copyright © 2016 The Pragmatic Programmers, LLC.

All rights reserved.

No part of this publication may be reproduced, stored in a retrieval system, or transmitted,

in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise,
without the prior consent of the publisher.

Printed in the United States of America.

ISBN-13: 978-1-68050-160-5
Encoded using the finest acid-free high-entropy binary digits.
Book version: P1.0—April 2016
For Regula and Werner
 CHAPTER 18

Animations
Working with a modern computer is an immensely visual experience. Almost
everything we do results in visible, graphical changes on our screens. When
we write a letter, images and characters appear. When we look for something
on the Web, the content of our browser window changes to represent the web
page we’re currently visiting. When we read email, messages open and close.

Modern user interfaces make use of both very small visual changes (a single
dot next to a message disappearing or reappearing because we read a message
or chose to mark it as unread) and very large visual changes (everything on
our screen changing because we opened a different website). It’s often easy
either to miss changes or to be confused by the magnitude of a change.

Animations, when used properly, can help users understand what is happen-
ing on their computers. Animations can help explain the causal relationships
between two different visual states of a screen, and they can draw attention
to changes that might otherwise go unnoticed. Animations can even help
people form a correct mental model of how a product works.

Explaining State Changes

Visual state changes can easily disorient people. If you’re running a usability
test or just teaching somebody how to use a product, often it doesn’t take
long until you hear someone ask, “What just happened?”

• Click HERE to purchase this book now. discuss

 Chapter 18. Animations •8

If you hear somebody say “What did I just do?” or “Where did this go?” or
“How do I get back?” it’s possible that you’ve found a problem that could be
solved with an animation.

Animating the change between the two states makes the state change and
the relationship between the two states obvious.

Directing User Attention

When people get confused by large state changes, they usually react by asking
themselves what just happened. When they miss small state changes, their
reaction is typically along the lines of “Did I just do something, or not? Did
it take?”

Here’s something you’ve probably experienced. You click a link to download

a file, and nothing happens. So, you click again. Still nothing. It isn’t until
you’ve clicked a few more times that you notice that you’ve downloaded the
same file half a dozen times; the computer just didn’t tell you about it:

You can solve problems of this type by animating the state change, with the
goal being to exaggerate the change. When somebody initiates a download,
it’s a good idea to show an exaggerated animation that guides the user’s eyes
from the link to the download window:

• Click HERE to purchase this book now. discuss

 Avoid Unimportant Animations •9

Make it impossible for the user to miss what’s going on. Google Chrome, for
example, shows a big animated blue arrow when the user clicks a download
link to indicate that a new download has started and where to look for it.

In the book Information Visualization [War04], Colin Ware points out that it
may not be motion itself that attracts attention but the appearance of new
objects. He writes:
When early man was outside a cave, intently chipping a lump of flint into a hand
axe, or when early woman was gathering roots out on the grassland, awareness
of emerging objects in the periphery of vision would have had clear survival value.
Such a movement might have signaled an imminent attack. Of course, the evolu-
tionary advantage goes back much further than this. Monitoring the periphery of
vision for moving predators or prey would provide a survival advantage for most
animals. Thus, the most effective reminder might be an object that moves into
view, disappears, and then reappears every so often.

This behavior is so deeply ingrained in our evolutionary history, it’s impossible

to turn off.

Avoid Unimportant Animations

As we’ve just seen, movement at the periphery of our vision simply can’t be
ignored. Our attention is naturally drawn to it. If there’s a tiger sneaking
through the bushes, you really, really don’t want to be the last person to start

• Click HERE to purchase this book now. discuss

 Chapter 18. Animations • 10

running away. Unfortunately, the part of your brain responsible for this
behavior doesn’t know the difference between a tiger and an animated ad.

This kind of animation can drive people mad and make it impossible for them
to focus on the actual content.

Use animation only if you truly want to interrupt your users and force them
to look at something and if the animation is used to convey relevant informa-
tion. Otherwise, avoid it.

Help Users Form Suitable Mental Models

Animations can be used to influence the user’s mental model of your product.
The information that animations convey should be consistent with the rest
of the user interface. For example, if an animation replaces the screen content
by sliding a new screen in from the right, then the back button should have
an icon of a left-pointing arrow. Otherwise, the icon is at odds with the ani-
mation; the two imply conflicting models.

• Click HERE to purchase this book now. discuss

 Help Users Form Suitable Mental Models • 11

Here’s an example from the iPhone app Kinetic:1

The icons are consistent with the animation. Arrows that point to the right
move the user to the right, and vice versa.

My Android phone’s home button is one example where the animation and
the actual behavior are inconsistent. If I’m in an application and hit the home
button, the animation implies that I’m moving to the right, even though the
home button’s icon—a house—doesn’t imply any spatial relationship.

Indeed, if I then hit the back button, whose arrow icon implies that it should
move me back to the left, nothing happens.

1. It’s an app that helps you keep track of your running. You can learn more at
[Link]

• Click HERE to purchase this book now. discuss

 Chapter 18. Animations • 12

In newer versions of the OS, Google has replaced the home button’s animation.
This simple fix makes it less likely that people will think that the back button
works for jumping back into an application after leaving it via the home button.

Think about the user’s mental model. Use animations wisely to reinforce
correct mental models and dissuade incorrect ones.

Learning from Cartoons

Cartoons have a hundred years of development behind them. Cartoon anima-
tors have come up with a complex visual language that even small children
can easily understand. We can follow cartoons even if they display a large
number of objects or characters at the same time, each exhibiting intricate
behaviors. In their paper “Animation: From Cartoons to the User Interface,”2
Bay-Wei Chang and David Ungar point out a number of lessons we can learn
from cartoons:

Solidity
In the real world, objects are solid: they have mass, inertia, weight, and bal-
ance. These are attributes that people understand intuitively. By replicating
these attributes in your animations, it’s easier for users to figure out what’s
going on.

Let users interact with objects instead of showing outlines or other placehold-
ers during animations. For example, when people drag and drop emails in
some applications, these apps show only a single icon below the mouse cursor
(instead of the dragged messages). This breaks the impression that emails
are solid “things” similar to a paper letter.

2. You can read the paper at [Link]

Chang_AnimationInUI_UIST93.pdf.

• Click HERE to purchase this book now. discuss

 Learning from Cartoons • 13

To make objects appear to be solid, there should be no perceptible lag in your

animations, and movements should seem smooth. In his paper “Principles of
traditional animation applied to 3D computer animation,” Pixar’s chief creative
officer John Lasseter notes:
As the speed of the action increases, so does the distance between positions. When
the distance becomes far enough that the object does not overlap from frame to
frame, the eye then begins to perceive separate images.

As a rule of thumb, if an object moves more than half its size between frames,
stretching the object in the direction of motion or adding motion blur to the
animation allows users to see the object as solid, even though it actually
jumps from place to place.3

In the real world, solid objects never just pop into existence out of nowhere.
Chang and Ungar recommend that to maintain the illusion of solidity, objects
should fly in from offscreen, grow from a point, or fade in (and exit the screen
the same way).

Exaggeration
You can take liberty with what’s possible in reality to make what’s happening
on the screen more obvious. Exaggerating the important parts of an animation
can sometimes make the animation feel more realistic. Similar to taking a
step back before taking a leap, it can be a good idea to start an animation
with a small movement that is contrary to the main movement of the anima-
tion. This is a specific form of exaggeration called anticipatory movement.

John Lasseter notes “without anticipation many actions are abrupt, stiff and
unnatural.”

Acceleration and Deceleration

Real objects don’t start out at a specific speed; they have to accelerate to that
speed. So, it makes sense to start animations slowly, speed them up, and

3. As Keith Lang, COO and co-designer of Skitch points out, motion blur can also make
animations more aesthetically pleasing: [Link]
[Link].

• Click HERE to purchase this book now. discuss

 Chapter 18. Animations • 14

then slow them down again toward the end (sometimes called ease-in and
ease-out). This logic also applies to growing and shrinking animations.

Similarly, real-world objects rarely travel in straight lines. When you throw
a ball, it flies in an arc. For some kinds of animations, it makes sense to
mimic that behavior. For example, when you buy a Mac application in early
versions of Mac OS X’s App Store, it flies into the Dock in an arc. Newer ver-
sions don’t add apps to the Dock anymore, and have removed that animation.

Finally, real-world objects such as springs sometimes overshoot their target

and bounce back. Replicating this kind of behavior can also reinforce the
physicality of an object.

After introducing the first iPhone at the Macworld Conference & Expo 2007
keynote and showing the device’s smooth, bouncy scrolling, Steve Jobs told
the following little anecdote:
I was giving a demo to somebody a little while ago, who had never seen this before,
inside Apple. I finished the demo, and he told me this. He said, you had me at
scrolling.

Paying attention to these kinds of details turns a merely acceptable, workable

device into a delightful experience.

User Interfaces Are Not Cartoons

It’s important to remember that the goal is not to turn the user interface into
a cartoon but to make it easier for people to understand how it works by using
the same kinds of tools that cartoons use.

Don’t use these tools, and animations in general, just because they look cute
or flashy. For example, some mobile platforms provide animated home-screen
wallpapers. Although it would be possible to use this feature in meaningful
ways, in practice most of these wallpapers just serve as a distraction and do
not show any useful information or provide any useful functionality.

It’s sometimes OK to use animations to make a product more fun to use, even
though the animations provide no tangible benefit. However, keep in mind
that animations are distracting. Attempting to make a product more fun at
the expense of its usability typically doesn’t work (see Fun vs. Usability, on
page ? for more thoughts on that).

• Click HERE to purchase this book now. discuss

 Takeaway Points • 15

Takeaway Points
• Use animations to draw attention to small or otherwise unnoticeable
changes.

• Use animations to make large state changes understandable.

• Animations, especially at the edge of vision, are attention magnets. Don’t

abuse them; it’ll drive people crazy.

• You can use animations to reinforce the user’s mental model of your
product.

• Cartoons have a visual language for animation that we can use: objects
should be solid and accelerate and decelerate realistically, and movement
should sometimes be exaggerated.

Further Reading
Information Visualization [War04] by Colin Ware has some information on
animations. Bay-Wei Chang and David Ungar’s paper “Animation: From
Cartoons to the User Interface”4 is also a great resource.

Markus Weber talks about using animation in user interface design in his
blog.5 Keith Lang has written about using animation in user interfaces.6 Max
Steenbergen also tackles this topic in his blog.7

And finally, John Lasseter’s paper “Principles of traditional animation applied

to 3D computer animation” contains invaluable information on how to use
animation.8

4. It can be found at [Link]

InUI_UIST93.pdf.
5. At [Link]
eye-candy/.
6. At [Link] He also points out that
people may be blind to certain kinds of changes in his essay “The Art of Expectations”
at [Link]
7. At [Link]
8. You can find it at [Link]

• Click HERE to purchase this book now. discuss