Carousels

Carousels are poor methods of displaying content to users. If you have to use them, ensure that they have a usable design, include arrows to navigate, pause from auto when on hover/interaction, use a maximum of three slides and one or two buttons.

Things to consider:

  • Users are likely to scroll straight past a large image so are unlikely to see anything past the first image.
  • Think about whether it might be better just to have one hero image instead of a carousel

If you still have to use a carousel:

  • Use 3 slides or less
  • Write simple text and use an image that's suitable for the layout
  • Indicate how many frames are present (dots are poor cues particularly on mobile devices where most people don’t see them)
  • Make sure navigation controls appear inside the carousel
  • Make buttons large enough to click/tap (well spaced too) and visible (whatever the background)
  • Make sure the content of carousels is available elsewhere on the site incase people don’t see it
  • If the content is ad-looking, most users will simply ignore due to banner blindness
  • Try not to use automatic rotating slides, but if we have to, they should pause if someone hovers over it (must not auto-rotate on mobile)
  • Should give the user enough time to read the content

Example