The workshop was entertaining, packed with information, and well-run. Even a technical glitch beyond their control was resolved quickly and with grace. Laying the groundwork for attendees from a wide variety of backgrounds, Val and Sarah built a solid foundation of theory. We received many helpful resources and assets tailored to the session. Attendees -- no matter their level of experience -- were up and running quickly for the practical sections of the workshop.
I've gained a deeper understanding of when and why to use animation. I'm excited to try out the tools they shared with us. Some of them turned out, to my delight, to be old friends. The cognitive impacts of animation were of particular interest to me.
Animation is a tool that exemplifies the old adage, “with great power comes great responsibility.” Sarah and Val acknowledged that it can sometimes lead to a bad user experience. But they presented a strong argument that this doesn't mean we should hate animation -- we should instead hate bad animation.
“Bad animation” occurs when its design and implementation get left to the end of a project, or shoehorned in without proper planning. When carefully considered from the outset animation can provide great benefits.
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.
See the Pen Responsive Huggy Laser Panda Factory by Sarah Drasner (@sdras) on CodePen.
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!