Make a carousel more usable
Make a carousel more usable
1. Decide if a carousel is a good choice based on its content, objective, and the individual slide’s relevance to each other.
Since user tests show that carousels are often ignored and can be distracting to users, only use a carousel in specific circumstances. Consider using a carousel if: The content is mostly visual, with limited or no text. The information is not crucial to your website page’s and company’s goals. For example, do not use a carousel for your value proposition because that message is crucial. The content for each slide fits within the same theme, like images that show multiple angles of the same product or slides that each include a brief customer testimonial. There’s a precedent for carousels, like for portfolios, image galleries, or ecommerce product page galleries. It helps the user stay on that page while showing more options, like Amazon’s Products related to this item upsell below the product info. It compares more items than can fit across the screen at once. If you decide that a carousel is not a good fit, stack static images and information as separate sections on your website instead, or display images in a responsive image grid.
2. Remove or limit the text on each slide and use images to convey the message, as users may only look at the first slide.
If using a header in your carousel, do not use more than one H1 tag throughout the whole carousel and page.
3. Show the most important information on the first slide, and include all important information elsewhere on your site in case the carousel is ignored or broken.
For example, Webflow displays the website template pages in a carousel, but also includes the same full size pictures with additional text context below the carousel. The homepage template is displayed first because it’s the most important. For an image gallery, choose the highest quality and most representative portfolio or product image to display first. If all images have equal value, like an automated recommended products slider, the order doesn’t matter.
4. Limit the number of slides to about 3 to as users are unlikely to engage with more than 5 slides or clicks.
One exception is carousels that show more than one card at once, like an image gallery with four thumbnails as one slide in the carousel. In this case, minimize the number of clicks needed to see all content to under 5.
5. Include high-contrast, large arrow navigation controls next to the carousel.
Noticeable arrows help the user understand that there’s more information to see and gives the user control over the carousel’s speed and navigation. Make sure the navigational arrows appear above the fold with the carousel.
6. Include clickable pagination that indicates how many slides there are.
Pagination is typically displayed as high-contrast dots or lines in the center-bottom of the carousel, with a filled in dot to indicate which slide you’re currently on. Make sure the navigation controls and pagination are noticeable on all slides, no matter what color the slide is.
7. Consider disabling autoplay to make the carousel more accessible and user-friendly, and use a visual identifier to prompt carousel navigation instead.
Autoplay is often discouraged because: Autoplay can trigger seizures. Autoplay carousels are less accessible for many users. If you do choose to use autoplay, it must contain an accessible pause button to meet WCAG guidelines. It removes some control from the user. If you do choose to use autoplay, make sure there are still navigational arrows and that the autoplay stops after the user clicks on an arrow. It can make the page take longer to load. The user may think it’s an ad, which causes distrust. It’s distracting and may lead to users missing important information. A visual indicator tells the user that they need to take action to see more information that’s currently off-screen. For example, a Webflow template uses a partially cut off edge image to show that there’s more information outside what’s already visible, along with high-contrast arrows and dotted pagination to meet user expectations for a carousel.
8. Optimize for mobile users by enabling swipe support, adding gutters around arrows to make navigation easier to tap, and verifying that it’s responsive on multiple size screens.
Mobile optimization tasks include: Consider if a carousel is necessary for mobile because it’s challenging to make carousels truly mobile-friendly. Consider reworking the content to collapse and stack instead. To verify that your carousel is responsive, view it on different size screens and test how easy it is to swipe through the carousel or find the navigation on the carousel. Verify that all images and text are visible on different screen sizes. Test how pinching and zooming works for your carousel.
9. Make the carousel accessible by using keyboard-focusable navigation, including a play and pause button, and including context for each slide outside the carousel.
To comply with Web Content Accessibility Guidelines 2.0 Guidelines: Make the carousel keyboard operable with the focus selector and styling. Include a pause or hide mechanism for any automatic movement, like an autoplay carousel or video. Make information available in text, like with image alt-text for each image and repeating the text content elsewhere on the page.