Pros & Cons of Carousels

A carousel (or slider) is web component which groups multiple pieces of content into a series of slides, and then only shows a portion of that content at one time.

In this article, we aim to give site owners and content authors a quick history of the carousel, the potential downsides and recommendations for when and when not to use a carousel.

Why carousels became popular

Carousels rose to popularity in the early days of the web, at the time we believed they helped solve several big design and content architecture challenges:

Carousels allow designers to compress more content into a smaller area

This was considered to be very important in an era of web design when we believed that users rarely scrolled down the page. Attempting to squeeze as much content "above the fold" became a priority. We now know that scrolling is the easiest action for a user to perform, and that keeping content above a certain pixel threshold isn't as important as we once thought.

We thought carousels helped us resolve content priority conflicts

It's quite common to build sites with multiple stakeholders which all want their content to be prioritised. Carousels allow multiple pieces of content to exist "at the top", so they became a solution for appeasing multiple parties when conflicts arose.

Carousels look impressive

Compressing multiple pieces of content into a carousel saves a lot of space, so it then becomes acceptable to expend those space savings on larger, more impactful images in the carousel. Many site authors also believe that animation makes carousels feel more 'interactive' than other display systems.

What are the downsides?

The big issue is that we found out carousels don't actually solve the problems we thought they did - they just hide them.

In 2013 Nielsen Norman Group released several articles, referencing data from the university of Notre Dame which demonstrated that only about 1% of users were interacting with their carousels, which meant 99% of their users didn't see the content on slide 2 or slide 3 etc.

This research demonstrated that carousels weren't solving the problems we thought they were solving. Carousels didn't effectively "compress more content into smaller area", or solve content prioritisation conflicts - they were effectively removing most of the information from the user.

Since those original articles, other UX research teams have published more research. Some show higher - yet still very low interaction rates for certain types of carousels. Although the overall trend is pretty clear: Users avoid interacting with carousels and most of the content being placed in them is being lost.

Attempting to solve the hidden content issues with auto-advance

In an attempt to expose the hidden content on non-initial slides many site owners started adding auto-advance timers to carousels. These timers had number of downsides.

• Users with poor literacy and users with english as a second language struggled to read the information before the slides changed.
• Many users attempted to click on the slide content only to have it change just before clicking, which caused users to end up on the wrong page. This issue was even worse for users with poor motor control.
• Users with cognitive issues had difficulty with the large sliding movements of the carousel.
• The automatic animation triggered more "Banner blindness" - a phenomenon where users ignore a section of website that they believe to be advertising.

Are carousels are always a bad idea?

Not necessarily. In some cases it is acceptable that users can skip over sections of content in a page, and only engage with them if desired. A well designed carousel can be a good solution in scenarios like these.

Additionally, since the initial research it has been discovered that a number of factors impact the interaction rates of the carousel. These factors include:

• The design of the carousel and placement of UI controls.
• The type of device the carousel appears on.
• The type of content in the carousel.

As a content author, it is likely up to you to determine if the type of content is a good fit for a carousel. Lets explore that further:

What content is a good fit for a carousel?

Good carousel content is:

1. Skippable: Users are likely to miss most of the content inside a carousel, so the information in carousels should be optional.
2. Desirable: Operating a carousel has a higher interaction cost than scrolling . i.e. it's harder for a user to explore a carousel vs continuing scrolling down the page. To overcome this, the user must really want to see what the carousel contains.
3. Predictable: Users should have a reasonable expectation what will appear when they navigate a carousel. If a user doesn't know what to expect they are navigating blind.

Good carousels example 1: Netflix

One reason Netflix carousels work well is that Netflix is most commonly used on smart TVs and tablets. It is easier to use carousels on these devices versus a mouse driven interface.

Netflix separates carousels into categories like "90's Sci-Fi films" or "Horror series like 'The Haunting of Hill House'.

These carousel work because the content is:

1. Skippable: Users don't need to see everything available, and can jump over entire sections which they aren't interested in.
2. Desirable: Users explore category carousels after expressing interest in a particular category.
3. Predictable: The user has a reasonable expectation of what sort of content will appear in the category.

Good carousels example 2: Ebay Product images

Another good potential carousel implementation is displaying multiple product images on a shopping page.

These carousel work because the content is:

1. Skippable: The user isn't required to see at all the images.
2. Desirable: The user has expressed interest in the product and is more likely to do the additional work to operate the carousel to confirm it's what they're looking for.****
3. Predictable: The user expects the other items in the carousel are more images of the product

More good use cases for a carousel

• Most small image galleries can work as a carousels. Bigger galleries tend to work better as a thumbnail grid instead, where users can quickly scan for select the images they want to see versus moving through everything in a sequence.
• Testimonials and Reviews These can get quite long and often contain repeated sentiments, however it's not expected users read all of them, so placing them in a carousel is acceptable.
• Related content: An example would be at the end of a news article where similar articles are suggested. A carousel accommodated a larger number of suggestions in a smaller content area. This is good for the percentage of users who want to read more, while the users who aren't interested can skip over this compressed section.

Carousels on mobile and tablets

Carousels are a more favourable solution on certain types of devices. These include:

• Smart TVs, where the D-pad style movement buttons makes scrolling horizontally as easy as scrolling vertically.
• Smaller, touch based screens, where swiping horizontally is as easy as scrolling vertically.
  

The benefits of carousels are increased on smaller touch based screens like mobile phones. On narrower screens the text line length is reduced and text wraps over more lines, which forces pages to get significantly longer and require more work to scroll. Compacting some skippable content areas into carousels can be beneficial to overall page navigation

What content shouldn't go in a carousel.

Don't put content you want a user to see in a carousel. Most users will only see what's on the first slide.

For this reason, the popular homepage header carousel is usually a bad idea. These carousels perform poorly because the content

1. The content is often not skippable. The fact this information has been featured on the homepage suggests the site owner wishes for their users to see it.
2. The content is often not predictable. These carousels usually contain any content from any section of the site the author wants to promote. This means the user can not predict what they will see in the carousel.
3. The content is often not desirable The content placed in homepage carousel is often content the site owner wishes to promote, this may not align with what the user is looking for.

The traditional homepage carousel performs poorly because the majority of website users have some sort of goal in mind when they land on a website homepage. The homepage carousel requests that users work harder to blindly navigate an unclear collection of content. In response users tend to bypass the carousel, by scrolling past it, or by using tools like site navigation or keyword search.