UI & UX Considerations: The Effective Use of Transitions and Animations

One of my colleagues recently shared a post by Codrops about creative button styles that illustrates some of the CSS animation techniques that are available to us today. As designers, we need to be conscious of when we should be using them and why.

Transitions and animations that don’t help the user better understand the purpose of the UI element will come off as superfluous and gimmicky. For example, it’s hard to imagine a situation in which it would be appropriate to use the spinning star on this page of icon hover effects.  The star icon is commonly associated with the mental model of “favourites”, but the spinning doesn’t enforce that purpose for the user. In contrast, a case can be made for the spinning gear. The animation works well because the gear is typically associated with “settings”; it implies adjustments can be made through this control by connecting it with the mental model of tightening physical configurations.

While it feels trivial to dress up something as simple as a UI control and concern ourselves with which way an icon is spinning, there are times when going that extra mile will significantly improve the user experience.

There are two main reasons why transitions and animations as user interface techniques are worth considering:

1. They create delightful user experiences.

In our efforts to provide value for the user, sometimes we forget we’re also in a position to provide them joy. For example, “pull-to-refresh” is now a common pattern in the mobile context to refresh the page. The Polar app saw that touchpoint as an opportunity to have a little fun. Going back to the creative button styles, the green heart in the second last set of buttons radiates a bright red heart when the user clicks on it. It adds a playful element, but more importantly, it also re-enforces the connotation of love. It’s a functional design decision, and also a relatively inexpensive way to add engagement.

2. They increase “learnability” (with the user).

It can be a bit of a guessing game as to which UI elements on web applications can be interacted with and what their function is, especially in an environment where flat design is becoming more and more prominent.

Animations and transitions, triggered through hovering, scrolling, pulling, swiping or any myriad of gestures, is a way to signal to the user that they can interact with an UI element and how it relates to the rest of the application… if the animation reinforces the action that the user is taking.

In the iPhone’s mail application (iOS6), when you archive an email, the email “crumples” and is then moved into the “shoebox” indicating to the user not only the result of their action, but also where he can retrieve the email. While you can argue that this effect isn’t needed, the visual cue can help you better remember the action, its consequence, and hints at how you may undo it. As the psychologist Jerome Bruner of NYU has described in studies, people only remember 10% of what they hear and 20% of what they read, but about 80% of what they see and do.[i] Transition effects in particular can reinforce what action was taken.

As a final takeaway, it is important to note, animations should never be critical to the user’s understanding of the application. If the user misses the transition because they are visually impaired or their attention is elsewhere, they should be able to obtain the equivalent information in another way.

For more on transitions and animations in user experience design, see:

Smart Transitions In User Experience Design: http://uxdesign.smashingmagazine.com/2013/10/23/smart-transitions-in-user-experience-design/

Research on the effectiveness of subtle animation to draw attention?: http://ux.stackexchange.com/questions/35034/research-on-the-effectiveness-of-subtle-animation-to-draw-attention

[i] Source: Jerome Bruner, as cited by Paul Martin Lester in, “Syntactic Theory of Visual Communication”

It's only fair to share...
Share on FacebookGoogle+Tweet about this on TwitterShare on LinkedIn

Leave a Reply