UX

Think carefully before you use a carousel or slideshow wizard.

Carousels are almost always a poor design choice

  • People must be highly motivated to engage with a carousel beyond the first slide
  • The cognitive load is immediately increased over other patterns as the user must learn how to use the carousel
    • Is it easier to use previous/next buttons?
    • Is it possible to swipe left/right?
    • How many slides are present?
    • What are those dots at the bottom?

Carousels are worth testing against a normal scrolling format when people can generally predict what’s in the carousel.

  • A multi-step form to help people stay on task (when proven effective by production multivariate testing)
  • Customer reviews to build social proof for customers motivated enough to navigate the carousel
  • A list with easily recognizable structure, like “US Presidents” where the scope, sequence and contents are predictable

Don’t use auto-advancing carousels

  • This is distracting for people with attention differences
  • Live carousel announcements are disruptive for people using a screen reader to browse other content

Alpha/Alfa 1 of 7

Pronounced al fah

Bravo 2 of 7

Pronounced brah voh

Charlie 3 of 7

Pronounced char lee

Delta 4 of 7

Pronounced dell tah dell tah dell tah. Can I help yah help yah help yah?

Echo 5 of 7

Pronounced eck oh

Foxtrot 6 of 7

Pronounced foks trot

Golf 7 of 7

Pronounced golf

Annotations for carousels

  • Give each previous/next <button> a name (like “Previous” and “Next”)
  • When at the first/last slide, corresponding previous/next buttons are disabled
  • Define what should be announced on slide change (like “Slide 2 of 7”)
  • Define where focus should land on slide change (depending on previous/next control used)
  • Define the name for pagination buttons (like “Slide 2 of 7”)
    • The pagination button for the current slide should include aria-current="true"

Related carousel slideshow entries