Rethinking Carousels: Going Around in Circles

I'll personally make no secret of the fact that I'm not a big fan of carousels (or sliders) in web development, although I have encountered and developed many over the course of my career. While they are visually engaging and can often be used as a solution where external influences like content creators and editors want to put much more content into a page than it can realistically carry, carousels are rarely the most effective or user‑friendly way to present content to the end‑user.

They often suffer from low user engagement (especially the elements towards the end of a carousel, which the end‑user may rarely ever see), can be fraught with accessibility and usability issues, and may detract from your website's overall user experience.

Because it's a topic that comes up often (and one I have been discussing in great detail and have conceded to implement with a client of mine recently), it seemed like a good topic to write a bit more information about and maybe discuss some effective alternatives.

I should say that I don't intend for this to be a deep dive into great detail, but more of an overview because I'm sure we all have better things to be doing than discussing the finer details of a scrolling horizontal panel!

Carousel Fundamentals

Carousels can come in all shapes and sizes. Fundamentally, though, what we are doing with a carousel is taking a set of data (or content) and displaying it by putting it all together in one long single line which overflows off the edge of the page so the user can't see it all at once, and then offering a mechanism that allows the user to explore the hidden parts.

There can be different configurations where a single element within the carousel takes up the entire page, or several are shown at once. They can progress automatically or require the user to interact with them before they transition to the next screen (where it might only move a single element's width or a full screen's width at a time). They can be used for just images or more complex content, too. Some of them go up and down, and some of them go side to side. Some of them animate, and some of them just jump from one position to the next.

The fundamentals, though, are that a carousel is a grouping of similar content pieces, displayed together on the screen, where the user cannot see them all at once because the space that the carousel occupies is smaller than the space the content needs to be displayed.

An Example

Here is a quick screen recording of my most recent carousel implementation, specifically designed to display some of the featured destinations that the airline flies to. In reality, the content creators wanted to show forty so this was a viable alternative to overloading the homepage:

Depending on how far into the future you read this and how they have opted to configure the page today, you may well be able to see it in person on their homepage.

The Drawbacks of Carousels

Engagement

From the projects I've worked on, it is very clear that the majority of users do not interact with content past the first slide. They will often see the carousel and may interact with the elements within it, but user engagement in actually moving the carousel to another slide is often much less than half a percent of visitors to the page.

Control

I strongly believe that any interface should not move unless it has been interacted with. That could be any number of different interaction types, from scrolling into view to swiping or tapping. An element that moves on its own can be frustrating and distracting; it draws users' attention away from any other messaging you have on‑page, whilst also potentially automatically hiding away content that the user might have otherwise been interested in.

Accessibility

Much like modals, carousels are very challenging to develop in a fashion that is accessible for users using assistive technology. That's not to say that it is impossible ‑ I'd certainly like to think that my developments consider this very carefully ‑ but there are also a lot of developers and plugins out there that aren't nearly as considerate, and that leads to websites that simply do not support an important demographic within their users.

Performance

When the alternatives (which I'll get to in a minute) can be as simple as a grid on the page, something like a carousel (with all the complexity, JavaScript, and general bloat that comes with it) can have a pronounced impact on overall page performance. Some of this comes down to implementation again, but as an example, an image carousel with twenty images in it may mean that a visitor's browser is attempting to download all twenty images at once, blocking the rest of the page from loading.

SEO

This is one that it's easy to make decision‑makers care about. Content hidden on later slides in a carousel may not be effectively indexed by search engines, which may have a knock‑on effect in reducing access (and indexing) to pages down‑stream, as well as reduce the relevant content on the page itself that search engines consider when deciding whether your page is suitable for a search term.

Carousel Alternatives

So with all of that said, what are the alternatives?

Static Featured Content

Rather than throwing a large collection of content at the data, focus on the single most important one and feature it prominently on the page. This way, you can be sure that every visitor will see it without the need for interaction. If there's more than one item of content that needs to be featured, you could combine this with some randomisation so that each item gets displayed in that featured area at different times. I would offer a little caution here: don't make the change too frequent; you do not want visitors coming back to the page and finding that the content they were interested in has gone...

Grid or Card Layouts

You see this a lot in e‑commerce, and especially in product listing pages. Place all of your items of content on the page together in a grid‑type layout and allow the user to see everything at once. Use the ordering of the grid to determine where elements that are deemed most important go (usually towards the top), and then let the user see and decide what interests them specifically without having to scroll through multiple items in a carousel that they aren't interested in first.

Accordions

Admittedly, this doesn't resolve some of the issues I've outlined above, but sometimes accordion menus can allow users to expand and collapse elements of content as they see fit. It gives you an opportunity to display more content at once and allows the user to decide which they want to see more of.

Tabs

With the same caveats as accordions, tabs allow you to neatly organise your content, reduce clutter on the page, and still allow the user freedom to decide what it is that they are interested in seeing more of.

Vertical Scrolling

This goes in hand with the idea of placing your content in a grid. If your content is bigger, and there aren't too many of them, then you may find simply placing each content item on the page and allowing the user to scroll through them reduces the friction a carousel otherwise introduces, allowing them to digest the content at their own pace.

Galleries or Thumbnails

When it comes to presenting images, a gallery will allow your user to select and expand the specific image that they are interested in, giving them control over their own viewing experience.

A Confession

You may have noticed throughout all of this, that the bottom of this very page is nothing more than a carousel of related articles. I confess: I'm a hypocrite. I use the carousel to try and present to my visitors related articles, or other articles that they might find interesting having read this one. I've been recording interactions on it for nearly a year at the time of writing and surprisingly, people do seem to scroll through them.

However, I deliberately order the items in there (using a little seeded randomisation magic), with the most relevant articles first. For me, on my personal website, it really makes no odds whether a user decides to move further than the first slide or not. It was also a nice technical challenge to try and build what I feel is close to the best solution a carousel can offer my users.