Clarissa Peterson: Animations are used a lot on the web, especially in the last few years since it’s become a lot easier to create animations just using CSS.

But certain types of movement on the screen can cause dizziness or even physical pain for some people, so it’s important to know how to prevent this. In this tutorial, you’ll learn how users can be affected by motion on a web page and what types of animations cause problems for users with disabilities. (Big Idea) You’ve probably gotten a feeling of dizziness or vertigo from seeing movement sometime in your life.

Some of us get motion sickness just riding in cars and looking out the window. Or you may remember spinning too fast on the merry-go-round when you were a child. Even just a weird sense of perspective, such as looking out the window on a high floor of a building, can cause your head to spin a bit.

Some people are really sensitive to movement and can get these feelings just from looking at certain things on a computer screen. This often has to do with problems in the inner ear and is generally referred to as a vestibular disorder. People with migraines also sometimes have problems with motion.

Another group of users to consider is people who have ADHD, attention deficit hyperactivity disorder. (Best Practice) Although movement on the screen won’t make them physically ill, any motion, especially if the motion is repetitive, can make it difficult for the user to concentrate on reading or on performing tasks on a web page.

For example, parallax effects often caused problems for people with vestibular disorders. And even people without a vestibular disorder are sometimes bothered by them. Parallax is basically when you have a background image on the screen that moves at a different speed than the foreground image, creating a kind of 3D effect. This is one of those things that is easier to understand if you see it. So I’ll show an example.

If you do have a vestibular disorder, please close your eyes for a few seconds. On this website, the illustrations move sideways as you scroll up and down. The foreground and background images are going at different speeds. It’s even worse if you accidentally scroll too fast.

It is safe to open your eyes. (Big Idea) In the past few years, parallax effects have become a trendy thing to have on your website. But having one on your site really serves no useful purpose, other than making your site look cool. And since there are plenty of other ways to do that, I would suggest avoiding parallax entirely, if at all possible.

Another type of movement on the page that can cause trouble is videos. You should avoid having any videos autoplay on your site. Users should be able to choose if they want to watch them or not. And don’t worry. (Best Practice) If people do want to see your videos, they can easily press the Play button.

Carousels that autoplay have the same issue. A carousel, also called a slider, is when you have several slides that replace each other every few seconds. Often they have an animation that makes them appear to slide off the page. For example, on this side, it is switching automatically between two slides. This is bad for users who may have a problem with motion.

It’s also going to cause difficulty for anyone who is a slow reader. Because of a disability or any other reason, they may not have the time to read the slide before it switches if there’s a lot of text or content on it. (Best Practice) If you do decide to add a carousel, you should not have it autoplay by default. Just start it with displaying the first slide, and let the user choose when to switch to a different slide.

Even better, just put all the content elsewhere on the same page, instead of trying to fit it all in the so-called above the fold area at the top of the page. Users know how to scroll down to find more content. Other types of animation can cause issues for users with disabilities, for example, buttons that move or change when you click on them.

(Best Practice) A very small amount of animation can be good, so it’s clear to the user that an action has taken place. But a larger animation is usually unnecessary and if done in the wrong way, can be harmful. If you look online, you can find tons of examples of neat things that you can do with animation. (Big Idea) But keep in mind that with animation, more is not necessarily better. There are lots of other ways to make your website look great, other than with grand animations.

And not making people sick should definitely be a higher priority than putting fancy things on your site. For more tips, check out our Resources section for links to articles and other tutorials that can help you expand on the concepts we’ve covered here. Thanks so much for watching. Don’t forget to check out the other Take 5 videos, as well as the entire course catalog here at Gymnasium.