Centigrade GmbH
Thinking Out of the Box

Markus Weber

Animations in User Interface Design: Essential Nutrient Instead of Eye Candy

January 31st, 2010 by Markus Weber

A prototypical sequence in user interface design proceeds from wireframes to interaction design and finally to visual design. The user interface is successively refined, starting with abstract statics, then specifying the basic dynamic aspects until finally visual specifics are added. This is compatible with the view that visual aspects of a user interface are more or less the icing on the cake – details that should only be taken care of after the foundations for a user-friendly have been laid. But this view may be flawed.

The ever-increasing discussion of the importance of aesthetics for user interface design and usability in general shows that there is more to “visuals” than meets the eye and that visual design actually contributes real value to a user interface and therefore aesthetics are a business requirement (as described in a presentation by Stephen P. Anderson).
A particular instance of “user interface eye candy” is animation. For the purpose of this article, animation shall refer to the animation of user interface controls and widgets in contrast to animated movies and the like, which are, e.g. used in eLearning applications to elaborate models and transfer knowledge.
Animations are more and more used in operating systems like Mac OS X, e.g. by having a jumping icon when an application is started, showing a “genie effect” when maximizing/minimizing an application window or dynamically expanding the corresponding window when a folder is opened. While animation on a user interface can be more or less entertaining – especially for users who have previous experience with non-animated user interfaces – their purpose can go beyond mere amusement. Some of the functions of animation on the user interface are described in the following section. The explanations are illustrated with examples taken from a prototypical user interface for a facility management system. The following animation gives an overview of the full prototype before individual aspects are examined in more detail. The workflow that is visualized includes making some adjustments in a modal dialog, navigating to the source of a problem, which is then resolved by assigning a person from staff to take care of it.

Overview of animated facility management prototype

Overview of animated facility management prototype
Loading...

Animation: Functions

Directing Attention

How animations affect attention is practically experienced by any user who is annoyed by an animated banner on a web page – at least until banner blindness sets in. But that effect of animation can also be put to good purpose. It can, e.g., help making the user aware of system-triggered changes on the user interface that may otherwise go unnoticed. This may be especially true for smaller interface elements appearing or disappearing. In the case of the Mac OS X dock, when an icon disappears, it does so with by getting smaller and fading out instead of abruptly disappearing. This supports the user better in recognizing at which position of the dock the change happens and – if they are quick enough – users can also see which icon is disappearing instead of having a shorter dock from one moment to the other.
The example below shows how the user’s attention is directed to an animated progress bar that may otherwise go unnoticed.

Example: Directing attention with animated progress bar

Example: Directing attention with animated progress bar
Loading...

Improving Orientation

Navigation on a user interface basically boils down to going from one area of interest to another to perform some activity. This can either mean navigating between areas on one screen or navigating between individual screens. The necessity of the latter increases with decreasing screen space. The more the user has to navigate between screens, the bigger the danger of losing orientation because it becomes harder to keep track of interconnections between individual screens and their hierarchy. Animation can provide a sense of orientation by making screen sequence and hierarchy transparent.
Take the iPhone for example. The user navigates through the email application in a hierarchical fashion account – folder – message. This hierarchy is visualized through an animation by letting screens slide from right to the left as the user goes deeper in the hierarchy. This conveys sense of position better than simply replacing one screen with another without any animation.
In the example below, an animated transition between the floor-view and the room-view supports the user’s orientation in the representation of the building, which could easily be lost if the room-view would instantly replace the floor-view without animated transition.

Example: Improving orientation through animated transition

Example: Improving orientation through animated transition
Loading...

Keeping Up the Flow

“Flow” is a concept of human experience that has been researched in psychology for quite some time: “Flow is the mental state of operation in which the person is fully immersed in what he or she is doing by a feeling of energized focus, full involvement, and success in the process of the activity.” (http://en.wikipedia.org/wiki/Flow_(psychology))
Animations can help in connecting what would otherwise be disconnected experiences and thus in maintaining the user’s flow. One case of this has been mentioned in the preceding section: through employing animation when navigating between screens the flow is kept up instead of interrupting it with an abrupt screen of large parts of the screen display. In other cases, animation may be used to bridge a necessary pause (e.g. due to technical reasons) in an organic way, e.g. by fading out a screen element while another one is still loaded.

Animation: Dimensions

Animation on the user interface can be classified on several dimensions, some of which shall be described in this section.

“Modal” vs. “Non-Modal”

The distinction between modal and non-modal animations is borrowed from the terminology in regard to dialogs. In case of a modal animation, users have to wait until it has completed before they can continue their interaction, a non-modal animation does not interfere with the time-course of user-system interaction. Modal animations can further be divided in interface-modal and object-modal animation, where interface-modal animations block interaction with the whole user interface until they are completed, whereas object-modal animations only make the corresponding object non-responsive to user actions. The iPhone navigation animation in emails mentioned above is an example of an interface-modal animation.
The example below shows how staff-members are assigned to a problem source by dropping them onto a target area. Until the drop-animation is completed, the user cannot interact with the respective object, but the rest of the user interface is not blocked. Therefore, the animation that goes along with the drop-process can be qualified as an object-modal animation.

Example: Object-modal animation

Example: Object-modal animation
Loading...

Speed

Animations of user interface elements can vary in speed from very slow to almost instant change from beginning to end state. Both extremes may be detrimental: while a transition that is too abrupt may go unnoticed or break an otherwise coherent user experience, a transition that takes too long may disrupt flow because of waiting times that are forced upon the user. In general, animations should be used in a way that contributes to an overall responsive appearance of the user interface, which means that in most cases they lie on the faster end of the speed spectrum. This is especially true for “modal animations”.
The first example below shows an animated transition in its normal speed, whereas the second example contains a slowed-down version of the same animation. In addition to the effect that the slow animation leads to a rather sluggish user interface, it can also confuse the user because, ironically, the slow speed makes it possible to attend to many details of the animation that would not be consciously perceived at faster speed: the slow animation can lead to information overload.
Example: Animation at normal speed

Example: Animation at normal speed
Loading...

Example: Animation at reduced speed

Example: Animation at reduced speed
Loading...

Spatial Extent

Another dimension on which animations can vary is the amount of screen space they take to unfold. If, e.g., an object is moved on screen, the corresponding animation can extend over a significant screen area whereas the notification bubbles found in the Windows taskbar take only a small portion of the visible display to unfold. The balance between spatial extent and visibility must be kept in mind when designing animation. The position of the animation on the visible display is a relevant factor in this context – simplified: the more peripheral an animation is placed, the larger it should be in order to be noticed. The “attention-grabbing” effect of animations (see above), however, still allows keeping peripheral animations smaller than their respective static counterparts would need to be to catch the user’s attention.
The example below shows an animated error message of moderate size.

Example: Animated error message

Example: Animated error message
Loading...

Synchronized vs. Unsynchronized

An animation can be autonomous in the sense that once started it runs independently of other events on the user interface or it can be synchronized with processes that unfold at the same time, e.g. with user actions or with other animations. Synchronicity of animations has to be balanced carefully in order to maintain a coherent user experience and keep the user immersed in the “world” of the user interface. Even a slight offset between animations that should be synchronous can significantly impair the overall “feel” and “destroy the illusion”.
The example below shows how the animations of sliders are synchronized to each other (and the actions of the user) in order to make the relationship between them clear.

Example: Synchronized sliders

Example: Synchronized sliders
Loading...

“Visual Spikes”: Animation in Prototypes

Since animation can fulfill essential functions regarding user experience, it may be necessary to integrate animations relatively early in the design process in certain cases, e.g. to evaluate a prototype or to present it to stakeholders. Animation should be included whenever it is likely that feedback gathered (from representative users or other stakeholders) may be significantly distorted when animations are excluded.
It is obvious that paper prototypes and wireframes or not suited for this purpose. The considerable effort that is required form creating tailored animations should therefore be focused. In “visual spikes”, the essential aspects of animations are designed and integrated into a larger prototype.
For a usability test, the visual spike may take the form of one screen that is visually designed and equipped with the intended animation. For the usability testing sessions, it must then be ensured that the screen is introduced at an appropriate point in the overall testing plan. Introducing it too early, e.g., may result in participants focusing on visual aspects in later stages of the test where it may be inappropriate, especially when prototypes are of more abstract nature compared to the visual spike.

Conclusion

As demonstrated in this article, there’s more to animations than initially meets the eye. Animations can fulfill essential purposes in a user interface such as directing the user’s attention or improving orientation. If animations are well thought out, they can thus positively affect usability.
Since animations are more than mere eye candy, they should be integrated appropriately in the user interface design process, i.e. they should be integrated into prototypes for usability testing or for presentation to stakeholders. Giving attention to animations at the appropriate stages of the design process instead of just at the end ensures that they can used to maximum benefit.