Using carousels in hero banners has become a popular design choice, especially for websites needing to highlight multiple pieces of important content. A carousel is a tempting choice because it  erases internal competition by allowing multiple messages or promotions to share a prominent space. 

However, carousels are not always the most effective design choice, as users often scroll past them without engaging. It’s important never to hide key messages in a carousel, and to prioritize accessible design. 

Below, we explore best practices to help you make informed decisions about when and how to use carousels effectively.

When to Use Carousel 

Carousels can be beneficial in the following scenarios:

• Easing Internal Competition: When multiple departments or stakeholders compete for visibility, a carousel can offer each a rotating spot in the spotlight. In this case, it’s important that any essential information (e.g. the summary of a product feature) is always visible.
• Showcasing Visuals: Carousels can be particularly effective for image-centric content, like portfolios, events, or product highlights, where visual appeal is a key driver. 
• Giving the User a Sense of Exploration: Users who want to sit longer on a page are more likely to use a carousel. Imagine planning your trip and wanting to see more photos of the beach, or applying to an academic program and wanting to delve into student stories.

Considerations Before Adding a Carousel

Before adding a carousel, ask yourself these questions to ensure it’s the right choice:

• What is the primary goal of the carousel? Think about what you want to achieve. A static hero banner or embedded content is often more effective if the goal is focused on a single message.
• What content types will be featured? Be sure that each piece of content is visually engaging and relevant.
• Are there resources to maintain it? And how often does it need updating? High-quality images and design assets are essential. If resources are limited, updating and maintaining a carousel is challenging.
• Is there a relevant image for each slide? Placeholder images will likely detract from the user experience.

Best Practices for Carousel Design

If you’ve read the above and decided that carousel is the right way to go, here are some tips to designing highly-usable carousels:

• Legible, High-Contrast Text: Ensure that text on carousel banners is easy to read, with a high contrast ratio (aim for at least 4.5:1 for regular text and 3:1 for large text). Adding a dark overlay to images can help improve text visibility without compromising the background image.
• Readable Fonts: Use clear, sans-serif fonts that are easy to read. Avoid decorative or thin fonts that could reduce legibility, especially over busy images. Large, readable text enhances usability across all devices.
• Accessible Navigation Controls: Provide both arrows and dots for navigation. These controls should be large and easy to interact with, even on mobile devices. Clear indicators showing the number of slides and the user’s position within the carousel can improve the experience. Ensure keyboard navigation is possible, and add a pause/play button for users who need more time to engage with the content.
• Avoid Autoplay: Giving users control to advance slides is now a common practice. If you must advance automatically for desktop users, keep a 5-7 second interval between slides. Never use autoplay on mobile to ensure accessibility and usability.
• Avoid Content Overload: Keep it simple. Limit the number of slides to 3-5 unless you’re showing a roll of photos.
• Responsive Design: Optimize the carousel for different screen sizes. Adjust text size, image resolution, and layout to maintain legibility and visual appeal on both large and small screens. Ensure images load quickly and are scaled down on smaller screens so that pages load fast.

What to Avoid in Carousel Design

• Overcrowding Content: Too many elements on a slide can overwhelm users. Stick to a single, clear focus per slide.
• Relying on Images with Text: Using images that contain text poses accessibility challenges:
  • Mobile users may struggle with scaling issues, and text in images cannot reflow, becoming unreadable as it scales down.
  • Screen readers cannot interpret text embedded within images accurately, leaving visually impaired users with an incomplete experience.
• Skipping Accessibility Features: Ensure all slides have alt text and follow accessibility standards for keyboard navigation.

Tips to Improve Carousel UX

• Full-Width Design and Accessible Controls: Design carousels to span the full screen width, with controls placed over the image.
• Clickable and Accessible: Include indicator dots to show slide numbers and position within the sequence for better user orientation.
• Use Gradients for Contrast: Adding a black gradient overlay can enhance text readability, especially on light backgrounds. This simple adjustment improves legibility for all users.
• Categorize Content Types: Label carousel slides to inform users about the type of content featured (e.g., Events, News, Programs). This helps set expectations and clarifies the carousel’s content.Uniform Slide Layout: Maintain a consistent format across all slides with the title and CTA in the same position. CTAs should have uniform styling to help users easily identify clickable content.
• Clear Calls to Action: Focus on brief, impactful headlines with a prominent CTA. Keep information concise—for example, a slide titled "2025 Doctoral Scholarship Competition" with a "Learn More" CTA is more effective than a slide filled with details.

Effective Hero Carousels for a Better User Experience

Hero banner carousels can be a powerful way to showcase diverse content, but their success depends on thoughtful design and accessibility. By keeping your users' needs at the forefront and implementing the best practices outlined here, you can create carousels that captivate and engage. Remember, simplicity and usability are key to ensuring your carousel becomes an asset, not a distraction.

Whether you’re looking to improve your carousel design, optimize for accessibility, or create an intuitive user experience, our team is here to help. Explore our accessibility audits and design services to start enhancing your digital presence today.