Jumping off the Carousel

Posted by in Posts

In my last post, I wrote about the hamburger menu and how recent usability testing both in our office and by other user experience (UX) teams have discovered it’s not quite ready for primetime. Like the hamburger menu, carousels (we often call them rotators or sliders, not to be confused with a static hero image) were also a topic much decried at the UX Mobile Immersion conference, although for different reasons.

If you visited the link at the end of the hamburger post, you’ll see at least one reason why. Should I Use a Carousel is a cheeky example of the worst offense of many carousels—auto-rotation. Of course, this is a problem much more annoying with carousels that include copy, so keep that caveat in mind for the next few minutes.

The Nielsen Norman Group (NNG) ran a usability study in which the user failed to find what she was looking for—despite the fact that it was in 98-point type at the top of the page. The reason? NNG concluded that because the information was in an auto-rotating carousel, it was ignored.

For accessibility, our own best practices have been to add a pause button to auto-rotating content carousels, in order to provide the user with “control over the timing of content changes” as Section 508 standards mandate. NNG notes that there are other usability problems, however:

  • 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 won’t be able to understand a panel if it’s displayed only briefly.
  • If there are 5 items in the carousel, each item is only being shown 20% of the time, lessening a user’s chance of finding what they’re looking for in the carousel.
  • It’s just plain annoying for users to lose control of the user interface when things move around of their own accord.

Problem 2: Ineffective

So are all our problems solved with removing auto-rotation from our carousels? Not necessarily. Another reason for carousel-bashing, both at the conference, and in the industry in general, is their actual lack of effectiveness. When the stats are parsed, the conclusions have shown over and over that other than the first item on a carousel—whether static or auto-rotating—everything else is ignored. In a General Services Administration listserv thread from earlier this year, a content manager from the U.S. Food and Drug Administration’s (FDA) Web and Digital Media group shared that of the 10% of their site’s traffic that start from their home page (rather than skipping to specific content from a search engine) fewer than 1% clicked on the carousel at all. (She then added to a classic search engine optimization (SEO) joke: “Where are the best places to hide a dead body? 1. The second page of Google search results. 2. Page 3 of a carousel.)

 quote asking "Where are the best places to hide a dead body? 1. The second page of Google search results. 2. Page 3 of a carousel." by Susan Schulken FDA Web and Digital Media

Even when the carousels do not auto-rotate and do not contain crucial site information or dense copy, but are used for things like branding, thought leadership, and service promotion, they still do not trigger the interaction that sites may be hoping for. This survey of carousel click-through stats on three B2B sites squares up with the FDA stats:

A chart showing carousel clicks as less than 1% for three different types of usage.

Survey of B2B websites using carousels from Search Engine Land

I know, I know, one problem (ineffectiveness) seems to be solved by the other (auto-rotation). If users aren’t seeing things on other slides of the carousel, we need to force them to see them by auto-rotating. In case you were thinking that, remember the NNG study—users ignored even what was on the very first slide. Carousels have quickly become the latest victim of banner-blindness. As with ad-like graphics in sidebars, carousels are often skipped over by users who don’t expect to find useful information in them.

What we can do

“Wait,” you’re saying, “this all makes amazing sense, but my client doesn’t care and just wants a carousel on their homepage!” Fear not! There are things we can recommend either as alternatives to carousels or as improvements if we can’t avoid them.

Alternative

A static hero image! A single well-designed hero image—one that is information-rich and looks like it’s part of the site, not an advertisement—is less likely to be ignored than a distracting carousel.

Improvements

  • Manual advance – rather than the auto-rotation that causes such problems for carousels, with obvious navigation and visual cues that there is more, you can leave the navigation through the various slides of the carousel up to the user.
  • Make navigation obvious – Brad Frost has some great tips about this and using “The Overflow Pattern” to make it clear that there is more content to be had
  • Good content – this is always implied, but for carousels, make sure the presented items are compelling and align with top tasks for the site. That is, don’t add a carousel just to have one, pushing all your important content down the page
  • Only load what you need – one of the SEO issues for some carousels is their slow page load speed. We can keep the number of items in a carousel to a minimum (remember, most users never see anything beyond the first item anyway).

And the final tip, in the spirit of our office’s focus on user-centered design, is to test. Do usability studies to find out if users are seeing the content in the carousels. Analyze stats after sites have gone live to see if users are clicking the carousel. Work with a Web Content Producer to make sure the content hierarchy is clear and the message is focused, perhaps eliminating the need for 5 separate-but-equally important-high-level messages. Work with designers who can offer ideas on how to communicate what’s important without using carousels.

Resources

1 Comment

  1. Design debate: are image carousels UX assets or liabilities?
    February 28, 2017

    […] designer Erica Augustine wrote a great post on this […]