CSS has added features that allow us to recognize the current environment of the user’s certain user expectations and qualities. One of those new features can be particularly useful for graphic designing and web designing for more inclusive motion on the web. One of the highly used features specifically is the preferred-reduced-motion media function. This brings a new dimension to Motion Graphic Designing.
Why Reduce Motion?
Back in 2013, the introduction of iOS7 sparked an awareness in the graphic designing and web designing community. Any movement on the screen may have physical implications for people with movement sensitivities, even though it was part of an interface. The big smartphone and desktop operating systems have added features for individuals. The screens minimize the amount of motion they experience in their operating systems in the years since then.
In our work, the design choices we make around animation directly impact how our work impacts individuals with sensitivities to motion. Type of motion is likely and ways to minimize them with our design choices allow us to get better for the audience. It helps to construct an environment that is healthy for our audience. It will not cause unintended harm. Animation may also have a positive influence on our UX efforts. But it is up to us to ensure that we use it responsibly, just as we are trying to use our other design resources responsibly.
Prefers Reduced Motion On The Web
It now has good browser support for the preferred-reduced-motion media feature. Edge, Firefox, Chrome, Safari, Opera, iOS Safari, Android Browsers, and Chrome for Android are supported in the latest versions. The level of support we have makes it something you can use entirely in manufacturing. Even, if this function isn’t supported by someone’s browser, nothing bad happens. It will just be overlooked, and things will proceed as before.
The Prefers Reduced Motion Media Feature In Practice
Deciding how to use the prefers-reduced-motion media feature is where we have room for solutions to be created. Solutions, that best fit our products and content context. You’ll want to define any possible motion effects on your site for most web projects first. Then apply the prefers-reduced-motion media feature to give a reduced version of that effect. Let’s look in more depth at each move.
-
IDENTIFYING POTENTIALLY TRIGGERING MOTION
Go through some standard user flows for your site or product to find any possibly triggering motion that you may have. And take a closer look at the motion effects used: Do you have any interactions that have big movements? Any big zooms, spinning effects, or effects of parallax? For those with motion sensitivities, any of those types of animated effects are very likely to be troublesome. Animated effects such as color fades, opacity changes, and slight scale changes are unlikely to be problematic. If in doubt, adding the impact in question to your “to minimize” list to err on the side of caution can’t hurt.
-
CREATE A REDUCED MOTION VERSION
Next, for these potentially triggering results, you want to assess the most suitable reduced motion condition. Can you modify the animation easily for reduced motion requests to use a non-motion effect like an opacity fade or crossfade? Can you maintain the sense of the material by pausing the motion or eliminating the effect fully for decreased motion? An important factor in deciding what would be the most appropriate reduced version will be the role of the motion in question. You don’t want to delete material accidentally or worsen the overall experience.
It’s important for content creators to make the work more inclusive. Make it up by taking advantage of the prefers-reduced-motion media. With movement on the internet, we can be completely articulate and innovative while being responsible and inclusive as well.
But the level of consciousness is still something that we have to be, well, aware of. In their OS settings, not everyone who might need reduced movement is aware of the option. Perhaps even fewer individuals know that as so few websites actually take advantage of it. It can also impact content in their browser. The more we use the prefers-reduced-motion media feature and provide it with a quality reduced motion experience, the more meaningful it will be for those who need it.
