How To

Should I Use a Homepage Carousel?

“Can we use one of those interactive thingies that lets us show visitors important offers and announcements on the homepage?”

That is one of the most common requests we get from clients. What they are referring to in web-parlance is a carousel, but may interchangeably be called a slider, gallery, or slideshow. You have seen them on nearly every website. Unfortunately, data tracking activity indicates that are rarely used by website visitors. And self-report usability research tells the story of frustrated website visitors. Regardless, these sliders keep on sliding along from redesign to redesign. Why would an unused, frustrating feature exist on nearly every website?

Why Use a Carousel on your Homepage?

A carousel is a way to display multiple images or panels of content in a single space. They are called a carousel because once you get to the last panel you are going to see the first panel again, giving the illusion of a merry-go-round.

Carousels usually get plastered, er placed, onto a homepage for the following reasons:

  • Lots of content or visuals. Carousels were originally utilized as a means to view a gallery of images like in a slideshow. A carousel is a logical, easy-to-use means to peruse such a collection of visual content.
  • Unclear messaging. Carousels are an easy way to for sales/marketing to shove their latest offers in the face of website visitors. It’s usually the biggest, most visually attractive real estate on the page; surely visitors will click on one of them, right?
  • Corporate politics. Use of a carousel indicates departments are jockeying for a place on the homepage. It is usually preceded by a departmental head saying “we need more than just a link or the visitor won’t see it.” The assumption is that unless every piece of content on the page is equally sized, positioned, and visually striking, a visitor won’t ever see it.
  • Cheap web design/development. There are hundreds of carousel modules available, many of which are free. Using a carousel is cost-effective (read: cheap) way to satisfy client demands for interactivity and animation on a homepage.

Why Carousels Don’t Work on Homepages

Many of the reasons why carousels are used in the homepage are bad ones, so it isn’t a surprise that nearly all research indicates that they are unused and unliked.

Carousels are used only about 1% of the time

While your mileage may vary, when we look at a website’s analytics we discover that the homepage carousel is usually only selected 1% of the time. Given that the carousel is nearly a third of the screen, that seems like an ineffective use of space. But it gets worse — the second and third panels attract get 3-4% of the clicks … from that 1%! With click rates of less than a tenth of 1%, why even load that bandwidth-slowing content on a homepage? Unfortunately, tracking use of a homepage carousel isn’t a default configuration for website analytics, so many simply don’t know this data point.

Notre Dame Homepage Carousel Click-Rate

Visitors ignore carousels

Many companies elect to “animate” their homepage carousels to make sure their visitors see all the offers; by “animate” we mean “auto-play.” A study by Nielsen Group found that users missed the target action of a website despite it being in 98-point font, a colorful image, and taking up nearly half the page. How? Because the panel auto-rotated instead of staying still. Because the visitor learned to treat carousels on homepages like an ad, and ignore them. Because the content was content-free — it included meaningless copy instead of clear and clickable call to actions.
Siemens Homepage Carousel

Carousels are not accessible.

Carousels pose accessibility issues for keyboard and screen reader users. While there may be some markup or code workarounds, rarely are they employed by the carousel developer. In other words, users are both literally and figuratively blind to content you think is the most important for them.

How to make Carousels Effective

Not all homepage carousels are bad; it is possible to deploy effective & attractive homepage carousels. By example, recently the Center for Civil and Human Rights requested that SHERPA — an Atlanta-based web design & development firm — use a carousel on their homepage. Below is what we produced:

Center for Civil Rights Homepage Carouself Example by SHERPA

Our approach was made effective for several reasons:

  1. Helpful content. Rather than push offers and specials, we ensured that the original release of the homepage carousel panels all spoke to they key reasons why someone was on the website — to buy tickets, become a member, or learn about the exhibits. We will be sure to help them fight the temptation to splash an special event or offer there!
  2. Clear messaging. We made sure that the offer from each panel was clear and present from every “view”; the imagery sets the tone while the copy succinctly communicates the message.
  3. No auto-animate. We had to push back on the request to animate, but the result is clear — the user maintains complete control of the carousel and only engages the carousel content when they elect to do so.

You can see a full set of screenshots of the website below, in which we use an image gallery slider for all the right reasons.

David Felfoldi

David Felfoldi

David Felfoldi is a digital marketing strategist for SHERPA Global. Over the past 15 years, David has guided the digital strategy behind notable organizations such as ADP, Spanx, Racetrac, Gables, and the National Center of Civil and Human Rights. When not tinkering with technology or musing on marketing David enjoys running and cycling adventures across the globe.

3 Comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.