Summary: Moving elements are a powerful tool to attract users’ attention. When designing an animation consider its goal, its frequency of occurrence, and its mechanics.

Thanks to the rise of HTML5 and CSS3 transforms and transitions, animations and movement are becoming increasingly commonplace in modern web design. At a recent web and mobile conference, several of the talks discussed visual design and development considerations for adding interactivity to UI elements. Unfortunately, the majority of conversations around this topic barely address the usability of such animations and what types of motion are most appropriate for different design goals.

Animations and interactivity on web pages usually have one of these user experience objectives:

• Draw attention to and explain changes on the page: Changes in the state of an element, revealing and hiding of content, or shifts to another area of content are all common areas for transitional animations.
• Add fun and whimsy: Elements that fade in, change color, or otherwise move are thought to delight users and to make a design “pop”. Animations and sound effects are especially common on sites geared towards children and teens. (Such ploys often distract children; however, because young audiences are less goal-oriented than adults, these effects annoy them less and are better tolerated.)
• Appear modern and up to date with new design trends: Use of new technology and techniques in web design is not only an exciting exercise for developers, but presumably communicates an updated brand that is current and knowledgeable.

Before adding animations to a web page or application, ensure that their goal and purpose are well defined. When considering an animation, contemplate the following questions:

1. User attention: Where would the user’s attention otherwise be focused at the time when the animation occurs?
2. Goal of the animation: Is it to:
   1. Attract users’ attention: is the object to be animated something the user must notice and act on immediately?
   2. Show continuity in a transition between the states of an object?
   3. Indicate a relationship between objects that are already in the user’s focus of attention?
3. Frequency of the animation: How often will one user encounter it during one session?
4. Mechanics of the animation: Is it:
   1. Directly caused by a user’s action?
   2. Indirectly triggered (upon page load, while scrolling, or by some other unrelated activity)?

Only once these questions are answered can an appropriate animation be designed.

Users’ Attention: Peripheral Motion Demands Attention

Movement in a person’s peripheral vision triggers a stimulus-driven shift in visual attention and is an example of bottom–up processing. This is in contrast to a goal-directed shift (top–down processing), where a person voluntarily adjusts attention to an area of interest. The instinctual attention shift to motion is a remnant of the days when we needed to quickly notice a snake in the grass and other forms of looming danger or potential prey (you can decide into which category the snake belongs).

On a web page, the periphery generally includes any areas outside the F-shaped pattern of reading. Blinking images and video advertisements in the right rail are the most obvious examples of utilizing peripheral animation for business-oriented goals (with their overuse leading to banner blindness and right-rail blindness), but even well-meaning animations can prove to be distracting and annoying (Clippy, we’re looking at you). Notifications appearing near the edges of the screen and promoting related content, recent activity, or the capability of live chat are all examples of peripheral animation that is intended to alert the user to relevant features or content, but in practice can be as interrupting and unwanted as a pop-up window.

How fast visual attention shifts towards a moving object in the periphery depends on the perceived animacy of the object. Factors such as the increasing speed of the object, the magnitude of its shift in position, and, most importantly, whether this motion appears to be self-propelled (rather than caused by an external collision of some sort) all influence the perception of animacy. In terms of interaction design, this means that elements that slide in or otherwise display a shift in position at any degree of speed will attract attention faster than elements that slowly fade into place.

If the goal were to quickly draw attention to the new object, then an animation sliding in from one direction would be very effective. On the other hand, if the goal were to provide access to a contextual feature without interrupting users from their primary task, then a more subtle animation with no position shift would be the better choice. (No animation at all would be the least distracting, and an even better choice if possible.)

Goal: Animation to Aid Comprehension and Understanding

Motion within a person’s current point of focus does not trigger the same visual response as when it occurs in the periphery. Because we already have the user’s attention, we no longer need to attract it and can focus on designing an animation that will increase the user’s ability to understand the UI: how the element is related to other elements, changes in state for the particular element, and so on.

When used for the right reasons, animating an element on the screen can help convey how that element relates to other elements on the page and to any actions that the user has just taken. For example, if a form contains conditional logic, what the user enters in one field may lead to other dependent fields appearing immediately under that input field. (For instance, in many e-commerce checkout forms, if a user indicates different billing and shipping addresses, the fields for the second address are animated and appear underneath as a result of the user’s action.) This animation reinforces the relationship between the triggering field and the dependent fields.

For an animation to effectively convey a cause-and-effect relationship between UI elements, the effect must beginwithin 0.1 seconds of the initial user action. This 0.1-second response time maintains the feeling of direct manipulation and supports the perception that the user action caused the new element to appear.

Frequency: Don’t Get in the User’s Way

Another important aspect to consider when designing an animation is the frequency with which it would likely occur within a single visit of a typical user. Animations that are repeatedly encountered are roadblocks to content and lengthen the amount of time to complete a task. Users do not want to wait and watch a lengthy animation sequence over and over again, especially when it has no purpose other than being “fun” and showing off the coding capabilities of the developer. Remember: just because you can implement an animation, it doesn’t mean that youshould.

We can’t even count the number of times we’ve sat in user testing and heard test participants utter some variant of the following: “this [animation] was nice the first time, but now it’s getting annoying.”

One example of an increasingly common gratuitous animation is the transition associated with revealing a hidden main menu. Hiding the global navigation is in itself bad, but forcing users to sit through an animation each time the main menu needs to be accessed is even worse. While the animation may be cute and visually appealing the first time, the second viewing is tiresome, and the third is downright annoying (and may never occur should the user become frustrated and abandon the site entirely).

For example, the website Newton Running buries its 4 navigational options behind the 3-line “hamburger” menu icon. Clicking the icon triggers an animation that shows the current page zooming out and transforming into a colored square, while other colored squares enter the screen and become the menu options. Once an option is selected, the animation is repeated in reverse and ends with zooming into the newly selected page. Of course there is no way to skip the animation once it has been triggered. Indicating dimensionality is a strongpoint of animations, but in this example the spatial relationship between the pages is meaningless, and the animation is a completely unnecessary roadblock, since the 4 menu options could easily be displayed as static links on the page.

Mechanics: Choosing an Appropriate Animation

If you are using an animation within a design, be sure to choose a speed appropriate to the context and the goal of the animation:

• Slower transitions are less likely to cause an attention shift and are thus less distracting. They are appropriate for animations indirectly triggered by the user or not user initiated in any way. In these situations, the new element should appear with little or no change in position to minimize distraction.
• Fast animations are more likely to attract attention when they happen outside the user’s focus of attention. They are suitable for important elements that users must attend to and act upon.

Fast transitions also waste less of the users’ time and they are appropriate when users are already focused on the element and triggered the animation directly. These types of transitions should however not be jarring nor displace any text that the user may still be reading. While rare, there are times where the UI is too fast, and users cannot register the change to respond accordingly.

Animated UI: Proceed with Caution

Animated user interface elements are tempting and powerful tools, yet they can easily waste a precious currency: users’ attention and time. Employ them sparingly and only when they add meaning to the interaction. Think about whether the animation will cause an attention shift or not and whether the same user is likely to stumble over it again and again. Will the animation reinforce relationships between UI elements? Will users trigger it directly or not? All these aspects matter in the design of a successful animation.

References:

Pratt, J., Radulescu, P., Guo, R.M., & Abrams, R.A. (2010). It’s Alive! Animate motion captures visual attention. Psychological Science, 21, 1724-1730. (Warning: link leads to a PDF file.)

Written by: Aurora Bedford, Nielsen-Norman Group
Posted by: Situated Research