Co-author: Lauren Owen, Web Development Coordinator, UCSC Division of Social Sciences
Quick summary: Carousels are often ineffective and sometimes inaccessible tools to show prioritized content on your web pages. Simplify with a single hero/billboard image with one prioritized message, and update them according to an editorial calendar.
The problem
You want to show several prioritized messages on your web page.
The discussion
Before assuming that a rotating graphic (also known as: carousel, auto forwarding carousel, slideshow, image rotator, etc…) will solve the problem, consider the research into these type of web content tools:
According to many studies, the rotating:
- Can be ineffective and frustrating
- Impacts neurodiverse people negatively
- Has accessibility issues
The Nielsen Norman Group recommends a hero image instead. After using eye tracking technology, they downplayed carousels, saying:
- Moving UI elements usually reduce accessibility, particularly for users with motor skill issues who have difficulty clicking something before it’s taken away.
- Low-literacy users often don’t have enough time to read the information before it’s removed.
- International users also read more slowly if your site is not in their native language, and thus they won’t be able to understand a panel if it’s displayed only briefly.
- Single-item visibility is reduced by having to take turns being on display. The probability that users will spot the item they want is drastically reduced when only one thing is displayed at any given time…
- It’s just plain annoying for users to lose control of the user interface when things move around of their own accord.
- Most important, because it moves, users automatically assume that it might be an advertisement, which makes them more likely to ignore it.
Studies quoted at The Good, a business dedicated to increasing ecommerce conversion rates for leading brands, says:
- The “first slide dominates, receiving 40% of all clicks.
- The second and third positions receive 18% and 11% fewer clicks.”
- “Simply put, if you’re using a carousel, you’re wasting incredibly valuable above-the-fold real estate.”
Smashing Magazine notes auto-rotating carousels hurt accessibility in these ways:
- People need different times to read content.
- Some people, especially people with cognitive impairments such as attention deficit disorder, may experience moving content distracting.
- Screen reader users may not be aware of the rotation.
Suggestions
Knowing that carousels have these issues, look for alternative ways to prioritize the information that you are trying to convey on your web page.
That might include:
- Aim for a more simple design to make sure your prioritized messaging is getting displayed.
- Use a single hero/billboard image (or video if you have access) to prioritize the message that you want to convey, with a clear call to action associated with it.
- Use an editorial calendar to prioritize your message to certain dates/times of the year and change the messaging as needed.
- Decide what is your top prioritized message, and what are lesser priority messages. Build those lesser prioritized messages into content on your page that follows your prioritized message.
- Ask for suggestions from your peers at UCSC, and share your suggestions with others in our community of practice.
Keep learning
- 6 design alternatives to your homepage carousel with examples, Build Create, 2017
- 6 design alternatives to avoid (evil) carousels, UX Planet, 2018
- Effective and accessible alternatives to carousels, Bureau of Internet Accessibility, 2021