An opinionated, user-first approach to designing animation

Used thoughtfully, animation can inform a user of change or hint at how to interact with an interface. However, animation can also be misused — to an extent that frequently detracts from a user’s experience in a website or application.

The following are guidelines for using animation cleanly and clearly, while reducing disruption to users.

Introduction

As a designer or developer it’s easy to get carried away with designing slick or impressive animations. Sometimes we justify this by painting our use of animations as fun for users. Unfortunately this has the potential to be a barrier to usability and accessibility. Animation is a powerful user interface affordance that demands visual attention, and it must therefore be used in a way that respects the user — lest we forget the lesson of the <marquee> and <blink> elements.

Consider animating

  • Modals opening and closing. Typical modals are centrally placed and disconnected from the viewport’s edges. Consider fading modals in and out rather than sliding them. Fading doesn’t suggest motion, but a modal may not need it.
  • Panels and menus sliding in. If a panel sits flush against the viewport’s edge, sliding is an appropriate animation. Sliding is most relevant if it hints at a touch gesture — swiping from or to the side — that provides an additional method of invoking or dismissing the panel.
  • Scrolling. Clicking an anchor link and immediately jumping halfway down the page can cause a user to lose their spatial context. A smoothly-eased scroll, neither too fast nor too slow, can be useful as a hint to your user of where you’ve taken them.
  • Changing content. Adding or removing a small amount of content from view can be easy to miss. An animation can both draw attention to the change and maintain a user’s spatial context if there’s jumpiness to the layout resulting from the content change. For this reason, components such as accordions and error messages often benefit from subtle animation.
  • Feedback for user interaction. Any dragging or touch input should be smooth and follow the path of a user’s gesture.

Beneficial animations

  • Are functional. Every use of animation should be purposeful. Animation without purpose only has the potential to distract.
  • Are quick and unobtrusive. Take care not to distract users or cause discomfort with obtrusive or visually disconcerting animations. Animations grab attention easily. The pleasant surprise of first noticing an animation quickly wears off if it makes routine actions take longer to complete.
  • Take a short path. When animating a panel for a portrait-oriented mobile device, sliding in from the side is less distracting than sliding in from the bottom. There’s less distance to cover, so the animation can be completed more quickly without needing to move any faster.
  • Take a consistent path. Modals and panels flying in from multiple directions are shocking and distracting. Be skeptical of assuming multiple paths will lead to a spacial understanding of your application’s patterns. It’s easier for a user to understand and expect that all overlays appear from the left than to process that modals slide from the top, tooltips from the right, and navigation menus from the left. When it comes to animation, surprises are obtrusive and disorienting.
  • Have a single transformation, excluding opacity. Slide or grow, but don’t do both. Animations with multiple transformations are a red flag for potential friction with users.
Related articles

Exploring responsive grid systems for complex but structured layouts.

2018
CSS UI patterns
HTML + CSS

Using the flag or media pattern for locking up graphics and text for comments, alerts, and more.

2018
CSS UI patterns
HTML + CSS

A hidden element within a link can stretch the link’s focus outline to the edge of the viewport — and beyond.

2017
Firefox
HTML + CSS