Motion plays a crucial role in design as it guides users while using our product and helps orientate them by depicting how UI elements are connected to each other. However, we should also consider whether motion can cause discomfort to users.
Certain groups of users may not be able to safely experience certain types of motion due to vestibular disorders, vision problems, and epilepsy. Unsafe animations can lead to dizziness, migraines, imbalance, nausea, or even worse for these people. Examples of risky motion include horizontal animations while scrolling vertically, large areas of motion, or having elements moving at different speeds, such as the parallax effect. To avoid this, it is important to ensure that all animations are easy to understand, have a clear purpose, and are simple to follow.
In conclusion, the safety of our users is of utmost importance when it comes to motion in design. All animations should be accessible to everyone, regardless of their physical abilities. If not, our animations could turn from helpful to dangerous.
Recommendation
Soul recommends using the following suggestions to make motion accessible.
- Avoid animations that cover up large screens
- Avoid horizontal scroll while users are scrolling vertically
- Avoid moving elements at different speeds, such as the parallax effect
- Avoid automatic animations; let users trigger motion instead
- Avoid animations where there is no user focus
- Limit flashes three times or less per second
- Avoid roughy bounces
- Make sure animations don't interfere with screen magnifiers
- Be certain code is accurate according to the screen reader for motion accessibility
Safe motion
- Fade in/out
- Color transitions
- Slides
- Scaling
- Expanding
Risky motion
- Parallax
- Too bouncing animations
- Fast effects
- Zoom in/out while scrolling
- Scale-up/down while scrolling
- Rotating while scrolling
Reduced motion preference
The prefers-reduced-motion CSS media feature is used to detect if a user has enabled a setting on their device to minimize the amount of non-essential motion. The setting is used to convey to the browser on the device that the user prefers an interface that removes, reduces, or replaces motion-based animations.
Such animations can trigger discomfort for those with vestibular motion disorders. Animations such as scaling or panning large objects can be vestibular motion triggers.
Follow a link below to read more information.