Using motion on your website can be helpful for some and harmful to others. There’s a delicate balance that should be considered when creating a website that includes motion. Animations, or blinking and moving content can quickly shift from helpful to harmful in the blink of an eye.
This topic affects me personally for two reasons. First, I have ADHD and navigating websites with rotating ads in the sidebar, endlessly moving content or parallax effects make the website nearly impossible for me to navigate. I get easily distracted by the shiny stuff that is flashing and never engage with the content (or worse, abandon the website to research DIY rechargable batteries…based on actual events). When it comes to “ads”, I honestly believe that is takes advantage of my disability to get a sale. So moving content on sites is a huge blocker for me.
Second, moving content makes people sick… literally, physically sick. I, also, suffer from this on sites that use parallax effects. I get a mild headache and nausea. Parallax sites quite literally make me want to throw up. It’s not just me either, up to 35% of the people that visit your site suffer from some form of vestibular disorder. Apple was in the news for making people sick with iOS 7. Reducing motion to only what is needed or important is important for a vast number of our users.
Considering that an overuse of motion can cause over 1/3 of your users to become sick, it’s very important to give the control to the user with regards to how much motion they experience.
Don’t: Overdo it
Carefully think about why you are using motion. Is it to indicate the completion of an action? Such as collapsing or expanding an accordion, “bouncing” a shopping cart when an item has been added. These are all pretty small motion indicators that, when used with other visual and non-visual indicators help the user to know that an action has been initiated and completed.
Where this can go awry is when every action or movement on a page causes the page to bounce, expand or move. This can become extremely distracting and reduces the effectiveness and intent of the motion.
When you use motion, use it deliberately and in small meaningful quantities.
Don’t: Let it repeat indefinitely
The Web Content Accessibility Guidelines (2.2.2 Pause, Stop, Hide) require that anything that is longer than 5 seconds should have a means for the user to pause, stop or hide the content. The inability to pause, stop or hide moving content happens a lot on pages that do parallax scrolling combined with video content. Often times, there is no way to stop the endlessly repeating videos that come onto screen (and stay on screen) when the user scrolls.
Let’s talk about auto-rotating carousels for a moment. Apart from them being pretty useless, they have less than 5-15% combined engagement on all slides after the first. The auto-play feature is problematic for all users, but it becomes especially problematic for users who are distractible or worse for the website it prevents people from getting the content they wanted after the slide moves. For those without distractibility they experience what is known as banner blindness. Conversion experts say that less than 1% of users even engage with them. Of the rest, around 90% of clicks are only on the first slide. Basically, you put things in a carousel that you want people to ignore (Neilson Group Study). The best approach is to use a static banner instead of a carousel and place smaller “cards” below the banner that contains the information that would have been in the secondary slides. This has been proven to increase engagement with the secondary content at much higher rates than when the content was hidden behind a carousel. OK… I’ll step down from my soapbox. In short, if you must use a carousel, then don’t make it auto-play.
Do: Provide a means for users to enable or prevent the motion.
What if the page didn’t have an abundance of motion unless the user asked for it? Since such a large portion of users are impacted by motion on webpages, it would be better and safer to make the default experience the one that doesn’t make users physically sick.
From a purely psychological (and marketing) standpoint, if I become sick every time I see your product, then eventually I will associate your product with that very real feeling. Parallax designs and heavy use of movement are conditioning people to associate sickness and headaches with your product. This greatly reduces the value and attractiveness of your product.
(Edit 5/18) The Animal Crossing: New Horizons website provides a way for the user to pause the animation on the site.
(Edit 5/18) T-mobile has an entire accessibility popup that has a toggle to “Stop moving elements”. Unfortunately, it doesn’t stop all moving elements, but it does help with some.
Do: Use the “prefers-reduced-motion” media query
For users that know about it, there was a very handy media query that was introduced for CSS: “prefers-reduced-motion”. This is an extremely handy query that allows you to stop all motion on the page for users that have this setting enabled. Windows 10 and MacOS both have the ability to toggle this setting. Think about how you can best enable this in your designs, but don’t rely on the consumers of your product to know that this feature even exists.
(edit 5/18) The following Codepen is a Reduced Motion Spinner I made that provides an equivalent non-motion option for users that prefer reduced motion.
See the Pen Reduced Motion Spinner by Jason Ament (@JasonAment) on CodePen.
Conclusion
Don’t use motion excessively on your websites or applications. While being a novel and “fun” way to present content it has the adverse impact of making users distracted or physically ill. When you use it, use it with intent and purpose and moderation. If you must use it, provide ways for users to Pause, Stop, Hide the moving content.