Role of Animation

in User Interface
with examples from existing softwares & applications
 FEEDBACK TRANSITION
Prompt, Notify, Response, Alert etc.
Appear, Disappear, Hide etc.

Diagram showing
the interaction between
feedback and transitions for
effective communication
through animation

Any appealing and well-designed interface, be it mobile, web or desktop softwares will be made of finely planned
animations which will govern transitions and feedback in such a way to create a convenient flow for information and
messaging between the system and the user.

These transitions are all governed by and can be summarized broadly under the 12 principle os animation by Disney,
namely Squash and stretch, Anticipation, Staging, Straight ahead action and pose to pose, Follow through and
overlapping action, Slow in and slow out, Arcs, Secondary action, Timing, Exaggeration, Solid drawing, Appeal.

There is a distinct advantage of each of these priciples as they play a great role in not only movies and general
animation but also in UI animation. Used effectively, they can increase cognition and understanding of an interface
ten-folds and if not paid close attention to, can defeat the purpose of the best softwares.

The above infographic shows a relation between the two broad UI animation behaviors in User Interface language.
Each complementing the other in a tandem that if broken, can lead to huge understanding problems of views and
information motion in a software program. Transitions managing various kinds of feedback from either side, the user
or the system.
Windows 7 has various subtle animations which add to the viewing and browsing experience. One such is the
taskbar preview which allows you to take a quick peek at what the state of a certain window is.

The taskbar is full of excellent examples of animation, 2 of them being a preview pop-up and an
application launch wherein the icon takes the dominant color of the icon and animates the icon
briefly.

The window resize is

another example of
animation that conveys
the potential placing
and sizing of a window.
Clear examples of these principle justly and beautifully used by the the best softwares of the world are present on the
web, in our mobiles or even our television sets and the games that we play on sreen. We would safely admit that
without these smooth transitions and motions in all the applications, the experience of all these would be anywhere
near to what we have today.

To name a few as references, we could go by the following list and see how they are as impacttful as they are:

The Dock in Macintosh The genie effect

these and various other examples in the behavior of the OS have clearly created an identity and a pattern of motion
of the overall interface.

Spotlight
Animation principles
applied to User Interface
Solidity, Exaggeration, Reinformcement
Animation principles applied to the User Interface
Chang and Ungar list three cartoon animation principles that apply to interface animation, namely:

SOLIDITY EXAGGERATING REINFORCE

Elements/Interface makes the interface the illusion of reality
should seem more
solid interesting

The principles of animation that apply to user interface animation design

Applications that present a direct manipulation interaction usually provide visual feedback to suggest the effect of the
interaction. However, simple feedback techniques based on drawing object outlines tend to give the impression that
a direct manipulation operation is happening to a surrogate object, rather than the real thing. The drawing of a
full-featured object during the operation gives the object solidity, but can still fail to convey a sense of substance;
somehow it seems too easy to manipulate the object. To be convincing, solid-seeming objects must do more than
look solid; they must also feel solid. Cartoon animators often use techniques that mimic physical effects, such as
inertia and friction, to reinforce the illusion of substance. Cartoon objects start moving slowly and come to a gradual
stop, they move in curves rather than along straight lines, and they stretch and squash to suggest interaction with
their environment.

For interface objects that move spontaneously or along predefined paths, the application of animation techniques is
straightforward. But in the context of direct manipulation, where users are in control of object movements, animated
interface designers are faced with a dilemma: the need for immediate and accurate response to user actions is at
odds with the need for objects to have realistic-seeming behavior. If a user tries to rapidly drag an object across the
screen, for example, how should the interface represent the inertia of the object resisting its movement? Or if a user
tries to move an object that is fixed in position, how should the interface suggest the restraint? The approach we take
is to consider how a cartoon animator would depict such behavior. For example, to suggest movement caused by
someone dragging an object, an animator could show the object distorted in the direction of the pull, as if the object
is reluctant to change. To suggest an attempt to move a fixed object, the animator could show the object leaning in
the direction of the pull, while its base stays fixed in place.With techniques like these an application can create the
illusion of a greater sense of substance for its objects, while allowing users to feel that they are in control.
On the lines of Chang and Ungar’s principles for using cartoon animation in user interfaces, we have defined four new
principles for animating direct manipulation operations.

The principle of attachment states that the objects being manipulated should at all times remain attached to the
pointer, which maintains the impression that the user is always in control of the action.

The principle of reluctance states that objects should, in general, seem reluctant to change, which reinforces the
illusion of substance by suggesting that changing an object requires effort on the part of the user.

The principle of smoothness states that objects must change in a continuous fashion, which reduces cognitive
load by removing large and unexpected changes in visual information presented to the user.

The principle of anticipation states that the result of a user’s action must be obvious at all times, which reduces
cognitive load by supplying additional visual information and minimizing the use of short-term memory.

The priciple of reluctance applied to an otherwise normal operation of dragging an object.

This clearly gives the feeling of heavy mass about the object, apart from making the transition
look interesting.

The priciple of reluctance and smoothness applied to scaling an object.

All edges and corners scale out smoothly and with a little reluctance, again
making the object appear bulky and solid.
The Windows 7 user interface
The Windows 7 user interface is a mashup of interesting transitions that contribute majorly to the visual appeal of
the entire interface apart from the interesting typography exercise. The inspiration is that of a revolving door (figure
1) with child objects hinged to the pole in the center..

Interestingly, all the objects do not come into focus together. The way in which they come into focus is shown in
figure 3. On similar lines, the way an object is selected is also clearly depicted by the selected object disappearing at
the last, in any screen.

WP7 : The Revolving Door

The revolving door metaphor that is

behind the WP& interface. The panels
(views) are hinged to a central pole and a
come in focus one-by-one.

a The inner screen panels

b The main screen panels

The panels move in place one
by one in a rhythm to create
visceral value as well as
keeping the eye in tandem with
what has been selected (in case
a selection has been made).
The iPhone user interface
The iPhone / iPad interface is based on a plane which has objects curving in to gather or sliding in to take focus for
feedback, as one of the modes of animation. It does not have a very complex structure or framework but manages
to be pleasing as well as conspicous in the flow and is a nice example of balance between transitions and feedback.

iPhone : gather

come together to the

center from the corners
iPhone : emerge
When an application is selected, the screen gives
way to let the aplication enlarge (apparently)
and emerge from the centre.

iPhone : slide
Slide between views happens to
bring in or phase out the keypad
or bring in features of
applications.