Motion and animation can add delight and lead to wonderful experiences.
Motion design principles published by Amy and Eric from the UX team in 2018. These timely principles are still relevant and applicable to motion UI work.
Excerpt from the article:
- Quick: Animations should be fast and nimble and never keep the user waiting longer than they need to. The aim is to prioritize user perceived performance over technical benchmarks.
- Informative: Motion should help ease the user through the experience. It should aid the flow of actions, giving clear guidance for user orientation: spatial or temporal.
- Whimsical: Even though most people would not associate whimsy with a browser, we wanted to incorporate some playful elements as part of Firefox’s personality (and maybe ourselves).
Firefox has a motion team?! Yes we do! – Firefox UX
Motion may sometimes feel like an afterthought or worse yet “polish”. For the release of Firefox Quantum (one of our most significant releases to date), we wanted to ensure that ...
WCAG success criterion for different animation criteria (from W3C.org):
Provide users enough time to read and use content.
SC 2.2.2 Pause, stop, hide Learn more
For moving, blinking, scrolling, or auto-updating information, all of the following are true:
Moving, blinking, scrolling
For any moving, blinking or scrolling information that (1) starts automatically, (2) lasts more than five seconds, and (3) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it unless the movement, blinking, or scrolling is part of an activity where it is essential; and
For any auto-updating information that (1) starts automatically and (2) is presented in parallel with other content, there is a mechanism for the user to pause, stop, or hide it or to control the frequency of the update unless the auto-updating is part of an activity where it is essential.
Do not design content in a way that is known to cause seizures or physical reactions.
SC 2.3.1 Three Flashes or Below Threshold Learn more
SC 2.3.3 Animation from interactions Learn more
Animated content can cause motion sickness and also be distracting. Users should be able to minimize animations. prefers-reduced-motion is a CSS media feature that can detect if a user has “reduced motion” settings enabled on their device so that developers can provide them an alternative CSS animation with reduced down motion. See Guideline 2.3 Seizures and Physical Reactions to learn more.
In Firefox, this setting is honored if (from MDN):
- In GTK/GNOME: Settings > Accessibility > Seeing > Reduced animation is turned on.
- In older versions of GNOME, GNOME Tweaks > General tab (or Appearance, depending on version) > Animations is turned off.
- Alternatively, add gtk-enable-animations = false to the [Settings] block of the GTK 3 configuration file.
- In Plasma/KDE: System Settings > Workspace Behavior -> General Behavior > "Animation speed" is set all the way to right to "Instant".
- In Windows 10: Settings > Ease of Access > Display > Show animations in Windows.
- In Windows 11: Settings > Accessibility > Visual Effects > Animation Effects
- In macOS: System Preferences > Accessibility > Display > Reduce motion.
- In iOS: Settings > Accessibility > Motion.
- In Android 9+: Settings > Accessibility > Remove animations.
- In Firefox about:config: Add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion. Changes to this preference take effect immediately.
A tool that helps to measure the effect of an animation on users with photosensitive epilepsy - PEAT. The Trace Center’s Photosensitive Epilepsy Analysis Tool (PEAT) is a free, downloadable resource for developers to identify seizure risks in their web content and software. It is especially helpful for borderline cases where an animation is larger/faster.
Many thanks to the designers and developers who have shared the information we’ve collected in these motion guidelines today: Amy Lee, Eric Pang, and Anna Yeddi.