The explosion of prototyping tools in the past few years has given designers an opportunity to create detailed interactions. Designers are spending hours and days learning these tools. However, many designers get lost in the technical details of the prototyping tool of choice. Designers must take a step back and ask what is the goal or purpose of the animation. By animating with intent, motion is used as a tool for communication. Designers should avoid using frivolous animation that get in the way of the user.

Designers can take advantage of animation to solve design problems such as showing continuity and relationships between objects via entry and exit animations. From reducing the cognitive load to improving decision making, meaningful animations can delight and inform users.

Reducing Cognitive Load

Cognitive load is the amount of mental effort needed to complete a task. Wikipedia says “heavy cognitive load can have negative effects on task completion.” When users are on a site, they’re flooded with information. As a result, they have selective attention a.k.a ‘tunnel vision’, meaning they focus directly on the area of the screen that they are working on; therefore, users will not see everything on the screen.

As designers, it is important to create an interface that is easy to use. This frees up the user’s mental effort to complete their task. How can designers achieve this with animation? Motion, when used well, reduces user confusion by effectively communicating user feedback. Additionally, by freeing up the user’s mind, attention can be drawn to more important things such as the page’s “call to action”.

Attract User’s Attention

NNgroup states, “an effective way to use animation is to attract the user’s attention.” The benefit of drawing the user’s attention is to guide their focus to show hierarchy and relationships between screens and elements on the screen.

The animation does not have to take place directly in the user’s view. NNgroup article explains that movement in the peripheral view can attract the user’s attention quicker due to our biology of recognizing potential danger in the periphery. However, users have learned not to pay attention to banners or pop-ups that traditionally live in sidebars and headers of defined sizes, so designers must make sure UI and animations do not follow those patterns. Designers can avoid banner blindness by minimizing the amount of motion happening at a single time and animating elements located where users believe relevant information lies.

Visual Hierarchy

Animating the order that page elements load on the screen can display the visual hierarchy of the page. Using a subtle animation will show the user the layout of the page and what to focus on which reduces the cognitive load.

Additionally, by using the same animation for different elements, it becomes easy for the user to understand that the elements are grouped and can perform similar actions. The human mind is always looking to create patterns.

Making Better Decisions

Motion in microinteractions (transition of a single object) and macrointeractions (transition between objects) can give users context and show continuity through the system. Motion can also teach users new interactions or gestures. Animation, when done well, allows the user to understand quickly how the information fits together and as a result can make better decisions.

Animation allows discoverability. Transitions between states can communicate the functionality of a single object. For example, a menu icon can transition to a close icon to show the user how the same button can complete two actions.

Animation helps users build better mental maps of spatial information. With small screens, this is crucial. A user can get lost easily in the maze of screens. However, animation lets users learn how to use the app by retracing their steps between screens. For example, the user drills down to a page by swiping right. Some users will discover that to return to the main page, they can swipe left. To ensure discoverability, visual affordances should be used in conjunction with animations.

Onboarding

Animation can help create interactive onboarding. By showing users the right thing at the right time, designers are creating progressive disclosure. Progressive disclosure makes systems easier to learn by reducing the noise and clutter a user has been presented. Subtle animations ease in the new content, while educating the user about how the app works. As a result, this helps users remember what is important.

Creating Delight

Animations are a wonderful way to bring delight to the user and enhance the user experience. However, before attempting to delight users with animations, designers should meet user’s base expectations and try to remove friction first. Otherwise, no amount of delightful animation will impress. Frequency, duration, and speed of an animation affect the user’s perception of the system, which is why designers should consider these when creating an animation.

An ideal place to add animation for delight is when you surprise the user with something they want, for example, free shipping. Animation should also not get in the way of the user.

Frequency

Designers should consider how often will the user see this animation. The first time the animation may seem novel and can delight the user. However, novel and delightful can become an annoyance afterwhile. NNgroup found during user testing sessions; participants commented: “this [animation] was nice the first time, but now it’s getting annoying.”

Duration

Designers should be aware of how long users are willing to wait for an animation or any action before they abandon the task. NNgroup studies show that anything up to 100ms appears instantaneous to users. Comprehending animation takes a bit long, the time ranges from 150ms — 350ms. The general animation duration guidelines, according to Val Head, are to have it run between 200ms-500ms. As this is a guideline, the goal is to make animations look natural. Users identify with what looks familiar, so in the end it is up to the designer’s best judgement. There is a fine line when it comes to how long an animation should run, too quick and the user may miss it, too slow and the user may perceive the system as slow.

Speed

The speed of the overall animation can affect the perceived performance. Slower animations will lead users to perceive the overall system is slow as well. However, animations can be used to hide delays and by keeping the user engaged the perceived performance increases.

Loading animations keeps the user occupied with visual feedback and as a result, users perceive a shorter wait time. The number of cycles in an animation can also increase the perceived speed. Facebook has a skeleton content loading animation, which is an elegant solution to the traditional loading spinner. A study by Viget found that people would wait longer for branded loading animation over generic ones to complete.

Accessibility

Designers should remember to consider animation accessibility. For individuals with vestibular disorders, motion can cause dizziness, vertigo or nausea. This is one of the reasons Apple iOS7 has the option to turn off animated transitions and moving backgrounds. Parallax scrolling, a method where the background moves slower than the foreground, is an example of motion which can induce nausea if not used correctly. To solve this, designers may not want ‘big’ animations to autoplay. If the user starts the animation, they will be more prepared and not caught off guard.

Web Accessibility recommends ensuring the animated content is described in text form; this allows users to access the content which benefits the visually impaired and users with vestibular disorders. Designers should be aware that in some instances, non-affected users can turn off UI animations to speed up their workflow. For best practices refer to Web Accessibility for creating accessible animations according to the W3C guidelines.

Designers should remember the following to keep best practices in mind:

Checklist:

Goal — What is the animation communicating to the user?

Focus — Where is the user’s current focus — where is the user looking?

Mechanics of Motion:

Frequency — How often will this animation play?

Duration — How long should this animation play?

Speed — How fast should this animation play?

Trigger — How is the animation triggered? By user action? Or automatically?

Accessibility — how will the user experience be affected if the animation is turned off by the user?

Designers may want to take the opportunity to create a motion style guide from the items in the checklist. Content and visuals have style guides, by adding animation to the list, designers can create a consistent overall experience. Material design by Google and Lightning Design by Salesforceare good examples.

References:

Animation for Attention and Comprehension — NNgroup

Val Head — Motion/Animation Designer

Design for Realtime — Percolate Studio

Meaning and Motion podcast

Practical Techniques on Designing Animation — Sarah Drasner