Animation

Use of Motion and Animation in C&M Digital Products

Motion and animation are extremely powerful tools in digital products, but to be effective rather than annoying (or worse) moving elements should be deployed with great care.

Animation is actually at work in more places than you may realize on our websites.

• Hover effects on linked items

• Navigation dropdown menu

• Elements that slide into or out of view

• Animated gifs

Humans are absolutely hard-wired to detect peripheral motion (Not a bad thing - this kept our ancestors alive.) Motion basically hijacks our attention. We struggle to look away. And the faster something moves, the more urgent we perceive it as being. 

That’s great if we want to drive an action or call attention to an essential piece of information, but when overused it becomes a mental burden and actually works against our goals.

Misused/overused moving elements (including excessive animation, blinking or flashing) 

• Violates our goal of respecting the user

  • Can cause seizures.

  • Becomes annoying.

• Detracts from the content. 

  • Forces user to spend mental effort sorting through visual noise rather than processing the information it may contain.

• Can slow site performance, which hurts user experience and search engine rankings more than any other single consideration.

To capitalize on the power of movement without burning our users out, we should set a high bar for what warrants decorative animation in our interfaces. Before you use or ask for animation, think hard about what goal you want it to achieve, and remember the following: 

• No content should flash or blink more than three times in one second. (WCAG 2.0 AA)

• Animations should be no longer than 5 seconds or should give users the ability to pause the animation. (WCAG 2.0 AA)

  • Also applies to videos (autoplay)

• Animations should stop after one cycle

• Shoot for a frame rate of 60 FPS 

• Animation speed should be 200-500ms (this applies to gifs as well)

  • The larger the moving thing, the more slowly it should move.