Appearance Effects and Motion
Although effects like blur, transparency, and movement are valuable ways to communicate information, some people find them distracting or uncomfortable and others can’t perceive the effects at all. Avoid using appearance effects as the only way to communicate important information, so that people can enjoy your app regardless of how they interact with their devices.
Transparency and Blur
Change blurring and transparency when users turn on Reduce Transparency. For example, areas of blurred content and translucency should become mostly opaque. For best results, use a color value in the opaque area that’s different from the original color value you used when the area was blurred or translucent.
Don’t require animations unless they’re vital to your app’s purpose. In general, people should be able to use your app without relying on any animations.
Play tightened animations when Reduce Motion is on. People can turn on Reduce Motion if they tend to get distracted or experience dizziness or nausea when viewing animations that include effects such as zooming, scaling, spinning, or peripheral motion. In response to this setting, consider tightening the physics of your animations so that they remain rich and engaging, but have reduced motion. For example:
- Tighten springs to reduce bounce effects or track 1:1 with the user’s finger
- Avoid animating depth changes in z-axis layers
- Avoid animating into or out of blurs
- Replace a slide with a fade to avoid motion
Let people control video and other motion effects. Avoid autoplaying video or effects without also providing a button or other way to control them.
Be cautious when displaying moving or blinking elements. Although subtle movement and blinking can draw the user’s attention, these effects can also be distracting and they aren’t useful for people with visual disabilities. Worse, some blinking elements can cause epileptic episodes. In all cases, avoid using movement and blinking as the only way to convey information.