# Carousels

# Image carousels

Research shows that carousels rarely work.

Carousels can be perceived as banners and therefore will be ignored. The slide sequence should be shown carefully.

# Carousels rarely work

  • Reason #1: Human eye reacts to movement (and will miss the important stuff)
  • Reason #2: Too many messages equals no message
  • Reason #3: Banner blindness

Carousel chart

Automatic image sliders or carousels on the homepage should be avoided or the frequency decreased. They can dramatically increase the load time of the page due to large images which leads to customer frustration.

So, as a general guideline, we recommend that image carousels aren't used. But if you have to use them...

Do

  • Use a headline to grab attention
  • Make it clear what a customer needs to do to next
  • Give each message room to stand out
  • Give the customer control over when to progress to the next slide
  • Use chevrons or arrows to indicate next/previous slides
  • Show the customer the amount of slides in the carousel
  • Pause the carousel on hover or on interaction (you can't have a hover state on mobile)
  • Give the customer time to read the information on a slide
  • Compress the image size to its smallest possible size
  • Defer (lazyload) the loading of the off-screen slides

Don't

  • Don't use multiple headlines or messages within one banner
  • Don't position different messages too close together
  • Don't have too many slides
  • Don't assume the customer can read quickly
  • Don't autoplay the carousel
  • Don't use poorly optimised imagery
Last Updated: 9/1/2020, 11:38:16 AM