5 Reasons to Stop Using Carousels, Now

Motion on websites makes me sick. To me, automatic carousels are the equivalent of the GeoCities sites from 20 years ago that would start blasting you with some awful music on page load. The only people who liked the auto-music were the people who made the webpages, and the only people who like carousels are the content owners.

I’m not the first to lament this antiquated website trope. I’m particularly fond of yourcarouselsucks.com; the name says it all and provides a great example. The third slide proclaims:

“We have tested carousels many times and the results are crystal-clear: It is a poor way of presenting content and blocks website sales.”

The next slide demonstrates the first problem with carousels.

1) They move automatically

Oops, did the carousel move on before you could finish? That sucks, right?
Screenshot from yourcarouselsucks.com

When a slide moves forward, not only do I have to fight a wave to nausea, but I have to squelch my frustration with moving the carousel back to finish reading. And if it only has backwards and forwards arrows…

2) They don’t stop

More often than not, I encounter carousels that do not have a pause feature. When I was working with an agency during my company’s last redesign project, I had to point out their code was missing a pause feature—and this was a huge agency.

Some expect the user to click something non-pause-button-like to stop the carousel on a particular slide. Not intuitive, and not useful when you just want it to stop!

screen shot of the Zappos.com home page with a carousel
Screenshot: Zappos.com homepage

3) They have tiny hit areas

It’s common to use little, close together, almost hidden circles as a way to indicate how many slides are in the carousel and to allow the user to jump between slides. These hit areas are hard to click with a mouse, and maddeningly difficult not to fat finger on a phone or table. I frequently end up clicking or tapping the slide and get taken to another page when all I was trying to do was make the damn thing stop.

screen shot of the amazon.com home page with a carousel that has little white circles for navigating the carousel slides
Screenshot: Amazon.com homepage

4) They are plagued with accessibility problems

Even when carousels provide controls, they often do not work for users with disabilities. Take the below example from Sears.com.

Screenshot image of the homepage of sears.com showing a carousel
Screenshot: Sears.com homepage
  • The back and forward navigation controls are hidden unless you mouse over the slide
  • The ‘pause’ button has such poor contrast and is so small, it’s easily overlooked
  • There is no way to interact with the carousel controls using a keyboard
  • The markup used to construct the carousel does not identify it or have meaningful button text, there’s no way to skip it, and the rest of the slides and content are hidden
screenshot of what the Sears.com carousel looks like without CSS enabled
Screenshot: Sears.com carousel markup

5) No one likes them, other than your Marketing department

The most compelling reason to stop using carousels is that they annoy users and reduce visibility of your most important piece of page real estate.

Accordions and carousels should show a new panel only when users ask for it. Otherwise, it should stand still and let users read the information in peace, without having the rug yanked from under them.

Not convinced? Please do a usability study of your site’s homepage and let me know how it goes.

Sharing Images and Videos Isn’t Inclusive

A huge part of social media platforms is the ability to share images and videos. But I’ve yet to see one that takes people with visual impairments into account by enabling users to add alt tags and descriptions to multimedia assets.

Let’s look at Twitter for a moment. People more and more are using using images and the words within them to supplement their tweets.

The alt tag for all Twitter images is “Embedded image permalink”. Hardly descriptive or useful when every image has the same alt text. In the Tweet above, we see a cat but also words and meanings in the objects around him: a sign with YOLNT (you only live nine times); a book by Jonathan Frazen titled Freedom; and a bottle of Gordon’s gin. People who can’t see this image miss out on much of the intended meaning of the tweet.

In some instances, the entire purpose of the tweet is contained in the image. Look at this example from The Oatmeal where he has attached an image containing an entire comic. (Even providing a link to his website wouldn’t help because he does not provide alt text for his comics.)

Sharing platforms really need to enable users to provide alt text for images and descriptions for videos, even if they don’t choose to use them.

Supporting Deaf Users of the Web

Many of us encounter situations daily where we are not able to fully utilize our sense of hearing. Some people work in noisy warehouses or factories where headphones are mandatory; others work in office cubicles on computers that do not have speakers. Now imagine that were the case all the time, every day—no speech, no music, no warning sirens—no sound.  That is the reality for an estimated 360 million people worldwide—over 5% of the population—who experience disabling hearing loss according to the World Health Organization’s 2015 fact sheet on deafness and hearing loss, including 2-4 of every 1000 people in the United States. This translates to more than 1,000,000 Americans over the age of five who are considered functionally deaf or “those identified as either unable to hear normal conversation at all, even with the use of a hearing aid, or as deaf.” The following are some accessibility points to consider in order to better support these users.

deaf icon

Use of Sounds

Relying on sound alone isolates and potentially endangers users who are functionally deaf. Providing no visual indicators can lead to confusion in using systems where these users would receive no feedback on errors or successes in a process.  It is also necessary to provide a context for the visual indicator of an auditory event, not just that one has occurred because without context, a visual indicator is just as useless as if none had been provided at all.

Text Equivalents of Auditory Material

Besides including contextual visual indicators along with auditory indicators to improve system access for functionally deaf users, visual equivalents need to be included in any communication that contains auditory cues, such as video and audio material, as outlined by the Web Content Accessibility Guidelines. No official, user-tested standards for captioning or subtitling exist but for an in-depth look at issues with captioning and suggested best practices, visit the Captioning Sucks! website of the Open & Closed Project. Providing text equivalents includes providing subtitles for podcasts, streaming online video and any other contexts in software or systems where auditory material is being presented.  Beyond simple transcripts, it is important to provide meaningful subtitles that facilitate comprehension.

Video and Sign Language

For those who use sign language—though not all people who are deaf or hearing impaired do—providing sign language interpretations of content in addition to subtitles can improve access. Keep in mind the same issues as with translation as text equivalents since sign languages vary across the globe. With an increase in broadband access and video sharing sites, more and more people are able not only to consume content but create their own using sign language to communicate online.

When it comes to providing avenues for deaf users of sign language to communicate with one another remotely, providing video options via webcams is crucial. One deaf ASL instructor couldn’t emphasize enough how video phone technology with devices like smartphones and Skype has dramatically improved sign language users’ ability to communicate easily, compared to relay services and TTY.

Writing with the Deaf in Mind

Lisa Herrod’s 2008 article for A List Apart, Deafness and the User Experience, is a must-read for anyone concerned about creating content for d/Deaf users. Her guidelines when writing for the web include

  • Use headings and subheadings
  • Use plain language whenever possible
  • Avoid unnecessary jargon and slang
  • Provide a glossary of specialized vocabulary

Providing written content in clear and concise terms that leave little room for misinterpretation help all people accessing content, not just those with disabilities.

Conclusion

An in-depth examination and understanding of the needs of deaf users is crucial to creating systems that allow fair and equal access.  A lack of public awareness and familiarity with the needs of deaf people is still common which can lead to oversights in serving these users.  We should educate video creators on tools available for embedding subtitles and encourage integration into projects.

An awareness of the information poverty deaf users experience can help designers build systems that go beyond a reliance on sound—using textual equivalents for all auditory material as well as conveying meaning with clear, concise language—in order to provide improved access to this often overlooked group.