Animation & the Web

Less is more – in many ways

As a mantra, I really like the saying "less is more". Because it applies in so many situations, like consumer behavior, possessions, choices (Barry Schwartz' very good TED talk about that), design, chitchat – but also, to segue into what I actually want to say: to many aspects of the web.
Note: All animations come from dribbble, creators are credited in the bottom right of each picture. Along the lines of "less is more", to avoid the whole page blinking and jumping, the animation only starts when you hover over the image.

Being one guilty participant of eagerly making DOM elements wobble and move – because: you can – I’m thinking more and more about how to use animation in a more tasteful reduced way.By now most people are annoyed by blinking ads and obtrusive pop-ups. Thus we should only use animations when they actually fulfill a purpose and contribute to delivering the website's information.

Rachel Nabors already put a lot of thinking into that. In The Web ahead’s episode about Animating the Web, she said (next to many other interesting and smart things):

“If you animate something, it should fulfill at least two purposes.
And you can’t use the word ‘delight’ as either of them.”

So what are those purposes?
In the article Web Animation at Work, Rachel Nabors has a list of 6:

Causality

The website “reacts” to something. Either user input (e.g. click the submit button and the form disappears), or it is showing a spinner until something actually shows. Those animations indicate that two things are related, and that the first somehow caused the second.

Feedback

A response to the user’s actions, e.g. clicking a button and get feedback that it actually worked. Something very very important for usability. Who hasn't experienced yet, that you make a payment or submit a form, but are clueless afterwards if it actually worked or not. Very unsatisfactory.

Relationships

Show where an element belongs to in the bigger context, like an indicator that shows you where you are located regarding the whole page, how far down you already scrolled. Clarifying the relationships is also very important for Infovis purposes. When you for example zoom in or out inside a map, you want to keep track of where the the part you just look at goes to.

Progression

Of course the loading bar, to indicate how far away from being ready we are. But also something like the circle on the video bar that moves along as the content goes; or maybe a survey, where you want the users to know how far they made it already; or of course: timelines.

Physics

Emulating the aesthetics of physical objects may or may not make the experience of the website better. (Skeuomorphs, that’s called when you emulate aesthetics). Emulating the behavior though, will let you very likely understand the message of an animation better, because it reminds us of something familiar and behaves according to the physical world - taking into account gravity, acceleration, bouncing, deflection etc. That way you can make things seem light-weight or rather heavy, depending on their context and urgency.

Transition

When new content is loaded, but it’s still somehow related to the previous one (which very likely is the case within your one website), it makes sense to use transitions. A hard cut that clears out the page and redraws something completely new and different is confusing. So only change what's necessary to be changed and leave the rest. Transitions can also (like Relationships) let you keep track of where you are in the whole picture.

I would add two more. Maybe you could somehow assign them to the ones above, but I think they are important enough to be their own purpose.

Suggestion

When the user has the possibility to interact with something, it has to be clear where to click and how to interact. A button with a drop shadow for example suggests that it is possible to press it because it reminds us of a real-world button. But what if you want to go beyond those conventions? Research shows that most people don't interact with interactive features on web pages (like infographics or data visualizations), because they simply are not aware of their interactivity. Animations could be one (of several) ways to suggest interactivity and even familiarize the user with it, by demonstrating the first steps for example.

Alteration

It is probably somehow part of "Relationship" and "Transition", but because it is very important for Infovis, I felt like seperating it. Imagine a scatterplot where we can navigate through several stages of the values, e.g. over time. If you had jump cuts between the static scatterplots that represent each stage, you couldn't really follow the change there, because you are unable to comprehend which element jumped where. Same for bar charts, pie charts, any charts where the elements change their position, size, shape, or complete representation over time or due to interaction.

Another question we could ask to find out if something should be animated or not is: Does the animation bring up something that wasn't there before? So is more information painted onto the page or is it is already there. If the latter is the case, there's actually no need to animate it and it might rather disturb the reading experience than benefit the user.

There are of course cases, where the animation is not only meant to improve usability, but for example to tell an animated story and, yes, sometimes even to showcase what's possible. The current trend is to use scrolling for navigation and having a lot of animations happening along the way. There are many great examples and many arguably questionable ones, where slow performance and jerky animations spoil the party and make your laptop fan go wild.
The bottom line being:

Animate responsibly and consciously!

And to do that, one should know as much as possible about performance matters, as well as storytelling and usability issues. But luckily there are many great resources out there, that offer support. In Rachel Nabors' article, Web Animation at Work, she names many of those in the last paragraph. Few of my go-to resources are: Chris Coyier's CSS Tricks, many tutorials from Codrops, and for example this article by Paul Lewis and Paul Irish about High Performance Animations.