Recently, I had the good fortune to attend the workshop “Web Animation 0 to 60”, by Sarah Drasner and Val Head. I came away with a newfound respect for animation on the web.
So, when and why might animation actually be useful?
Spatial awareness is what we humans use to understand the environment and our place within it. This holds both for the physical world around us, and for the websites we visit. Nothing in the real world pops in or out of existence. Instead, things move more-or-less smoothly from one place to another, and from one state to another. We can make life easier for our users by taking advantage of the human tendency to perceive everything in spatial terms. Using animation to create a sense of consistent dimensional space is an excellent way to reduce cognitive load.
In general, there are two types of animation: immersive, and invisible.
Use immersive animations to tell a story, evoke an emotion, or encourage play. They can provide background context or branding material. In most cases, use them sparingly. At best they lose their impact and at worst can be annoying on repeated exposure.
Invisible animations exist without drawing any attention to themselves. They are best for user interface interactions. A well-designed user journey should prevent context switching as much as possible. This lets users maintain flow state and focus on the goal they are trying to achieve. One way to do this is to provide users with an intuitive sense of where things “live”. Animating interactive elements to and from consistent locations off-screen creates the illusion of space and maintains context.
Another way we can help our users is by reducing cognitive leaks. Cognitive leaks occur when the models we use to represent something don’t match well with reality. This is illustrated well by the dials on a cooker - how often do we have to check which burner corresponds to which dial? If we could arrange the dials in the same pattern as the burners, we would spend little time determining which dial controls each burner.
Animation can help prevent these cognitive leaks. We can transition interactive elements between states, rather than interrupting with a modal. This maintains any established mental models.
Leaving animation aside, these principles are useful tools to help us check how much work we’re asking the user to do. I’m excited to work with our designers to integrate some of these principles in upcoming projects!