Animation Overload

October 3, 2022 3:03 pm | by Craig Webb | Posted in User Experience

I am struck by how some design agencies pack animation into websites. I see if I can discern a particular WordPress theme, or animation library that is behind the visual noise.

Cookie-cutter website animations consist of a combination of lazy-loading, fade-ins and easing techniques. These animation devices are sometimes also combined with parallax scrolling.

Too much animation is distracting. Especially when every element is animated in some way. No particular bit of content has priority. Constant distractions make it hard to focus on the content. Assembling websites with common Bootstrap layout patterns make them look cheap.

The “gee-whiz” factor quickly fades as users struggle to comprehend content through the fog of motion overload.

Now with automated systems and libraries this visual disease will become more ubiquitous. Managers will plop animated components into websites and every widget will jiggle about.

Excessive animation can trigger issues for people with certain disabilities. Users are now offered a preference function to limit website movement on browsers. The necessity of this preference setting is a clear sign of the hazards of animation overuse.

I like content-driven animation. Storytelling is a proper use for content-focused animation. Short animated clips offer content and meaning.

Programs like GreenSock and Three.js do amazing things. D3 information display JavaScripts help to make information transparent and easy to understand.

But animations should not be landing page gatekeepers. Don’t make users wait each time they visit a website. Users who come to fulfill a task grow tired of having to sit through the same sequence again and again.

Animation as an affordance can be useful to inform the user. Affordances tell users they have successfully started a function or completed a task. Animation affordances can be subtle. They do not have to be on every element. Limit affordance animations to assisting users to find destinations.

Contexts for good animation application

1. Animation used as a navigational affordance or user aid
2. Information-driven storytelling featured as a focal piece of content