Carousel UI Guide: When They Work, When They Fail, and What to Use Instead

Carousels are a staple in UI design, showcasing images, products, and content in a compact space. However, despite their popularity among marketers and designers, they often fail users. Studies show that only 1% of users click carousel toggles, and 84% engage only once, rarely making it past the first slide. That’s a problem.

At Eleken, we often see how carousels frustrate users, hinder accessibility, and reduce engagement, so we tend to avoid them. Yet, when used correctly, carousels can be valuable. Like accordions, they allow dynamic content display, making them useful for showcasing multiple options in limited space.

In this guide, we’ll break down when carousels work, when they fail, and how to design them effectively. We’ll also cover better alternatives so you can make the best UI decisions. But first, let’s make sure we’re on the same page about what a carousel UI actually is.

What is a carousel in UI?

A carousel UI is an example of UX design patterns used to display multiple pieces of content within a single, scrollable or clickable area. It typically shows a series of images, product options, or promotional content that users can navigate manually or automatically. This allows designers to save valuable screen space by stacking content in a compact but still accessible way.

Unlike static designs, carousels rotate content automatically or through user input (such as clicking navigation arrows or dots). Carousels are often used when the content is related but diverse, such as product images, features, or news items.

Are carousels a good UI pattern?

While carousels can grab attention, they often fall short of keeping users engaged. Studies by the University of Notre Dame show that click-through rates drop sharply after the first slide. So, your first slide gets all the love, and the rest… not so much.

But why do carousels keep sticking around? Simple: marketing teams love them. Why? Because they offer high visibility for multiple pieces of content. But just because something's visible doesn’t mean it's being seen or interacted with.

Carousels are best for light, digestible content. Overloading users with too much information makes the carousel more of a hassle than a helpful tool. So, let’s get into when you should use one and when just to say “no thanks.”

When to use a carousel (and when to avoid it)

Carousels aren’t a one-size-fits-all solution. While they can shine in some cases, they’re a poor choice in others. So, when should you use them?

Here’s a little guide to good use cases for carousels:

• E-commerce product galleries: Think Amazon product images or carousel UI design used in online stores. Users want to browse through product images without scrolling forever. A carousel is perfect for this. It allows them to quickly cycle through multiple options without cluttering the page.

• Feature showcases:  Ever noticed how apps like Spotify and Netflix use UX carousels to highlight new releases or trending content? It’s an efficient way to showcase several features at once without overwhelming the user.

• Limited-step storytelling: Carousels are great for user onboarding UX patterns, tutorials that guide users through a process, and short, linear content that doesn't require a lot of clicking or decision-making. They allow you to showcase a step-by-step guide while keeping things neat. 

In short, carousels can be a fantastic tool when the context calls for it, but they can also be a huge pain if misused. When NOT to use carousels:

• Homepage hero sections: Users usually scroll right past them. Who will engage with an auto-rotating banner on a homepage when they’re just trying to get to the main content?
• Displaying critical content: If you’ve got a promo, a call-to-action (CTA), or an important update, don’t hide it in a carousel. Static content will give it the attention it deserves. Carousels often bury important info that needs to be front and center.
• Unclear navigation: If your users aren’t sure that there’s more content hidden behind the carousel, they’ll skip it entirely. Make sure your navigation is crystal clear; otherwise, it’s just a wasted space.

Let’s dive deeper into some usability challenges that can arise when carousels are used.

Usability challenges and common pitfalls

Carousels come with challenges that can harm the user experience if not addressed. Here are some of the most common pitfalls and how to avoid them.

Low engagement beyond the first slide

It’s a known fact that users rarely engage with carousels beyond the first slide. So, if your carousel displays important content on later slides, it might not exist.

Solution: If that content matters, put it upfront. Ensure the most important info is visible from the start, so users don’t have to scroll or click through a rotating circus to get to it. If you can’t make it work in a carousel, consider a grid, wizard UI, or list UI design. 

You can also consider UI cards. They are less hierarchical than list layouts, making them ideal for browsing. A more vertically structured list layout can be better if you deal with data or elements where the order is crucial.

Auto-rotating carousels are annoying

Auto-rotating carousels are a huge pain for users. They create unnecessary urgency and frustration, especially when users feel rushed or have no control over the pace. Consider it: users want to engage, not race against a timer. For example, University of Notre Dame research shows that the first feature in a carousel gets a 40% click-through rate, but by the last feature, which drops to just 11%, users are losing interest as the carousel ticks on.

Solution: Give users control! Always allow them to manually navigate the carousel UI with clear next/prev buttons. This not only improves the user experience but also makes the design more accessible, giving everyone the ability to engage at their own pace.

Poor accessibility

Many carousels lack proper accessibility features. Missing ARIA labels, inadequate keyboard navigation, and poor screen reader support can make carousels a nightmare for users with disabilities.

Solution: Accessibility should always be a priority, not an afterthought. Ensure your carousels have proper focus states, keyboard controls, conversational UI, and alternative image text. When you design with accessibility in mind, you ensure everyone can join the conversation.

Mobile vs. web carousels: key differences and considerations

Carousels behave differently on mobile and web; understanding these differences is key to creating a smooth user experience. Let's break down the unique challenges and best practices for each.

Web carousels

On the web, carousels often get ignored. Users scroll right past them, especially when placed in hero sections. And when carousel navigation is unclear, users may not even realize there’s more content to explore. Let's face it: If users don’t know there’s more to see, they won’t stick around.

Here is what you can do to avoid that:

• Ensure manual control: Let users pause, skip, or navigate at their own pace. Auto-rotating carousels are a big no-no. Users like control. Don't rush them.
• Track engagement: Monitor analytics to see how users interact with your carousel. If they’re not engaging with the second or third slide, rethink how you present your content.
• Be mindful of placement: Avoid cramming too much into the carousel. Keep it clean and simple. Loading up a carousel with too much information feels like a cluttered magazine rack; nothing stands out.
• Use clear navigation: Make it obvious that there’s more content. Use arrows or dots, and keep the carousel UX visually simple. If users can’t tell there are more slides, they’ll move on.

Adobe is a great example of a well-executed carousel. Their carousel showcases different offerings, such as photography, video, etc., and allows users to navigate between them easily. The transitions are smooth, there’s a manual “next” option, and the visuals are consistent and engaging. Adobe nails it by ensuring the carousel doesn’t overwhelm the user and keeps everything accessible and intuitive.

Mobile carousels

Mobile carousels have their challenges. Swiping can conflict with browser navigation (hello, back button), and small tap targets make interacting hard. Plus, with limited screen space, it’s tough to fit much content into each slide without overwhelming the user.

Here are some best practices:

• Use large tap areas: Buttons, arrows, and navigation elements should be big enough for users to tap comfortably. On mobile, small buttons can quickly lead to frustration.
  
  
• Provide clear navigation: Use arrows or dots to make it obvious the carousel has more content. It’s all about guiding the user and giving them a clear idea of what’s next.
  
  
• Avoid auto-scrolling: Mobile users prefer to control the pace themselves, especially when it comes to carousels. Allow them to swipe manually instead of rushing through content. Auto-scrolling often leads to disengagement because users feel like they’re being pushed through content they’re not ready for.
  
  
• Optimize content for mobile: Remember, mobile screens are smaller. Keep text and images minimal. Avoid cramming too much info into a single slide and explore screen design examples that effectively organize content. If you have a lot to showcase, consider breaking it down into smaller chunks and making them swipeable.
  
  
• Test for touch-friendly controls: Ensure interactive elements are large enough to tap and positioned naturally for the user’s thumb, especially on one-handed devices.

Let’s take a look at the recent Eleken project. For HabitSpace, we kept the mobile UI clean and simple, resembling a to-do list. Even though it’s minimal, we incorporated micro-interactions like swipe actions and subtle animations that made tasks feel fast and intuitive. This kept the app easy to use while still being engaging.

And if you want to learn more about how to design an app in 9 steps, consider watching this video:

Carousels, whether on mobile or web, require careful attention to detail. The key is balancing content visibility, usability, and user control to create a smooth device experience. However, it’s worth exploring alternatives that might offer an even more seamless experience.

Better alternatives to carousels

While carousels can work in certain contexts, many alternatives can improve the user experience. In some cases, these alternatives are more effective and more user-friendly. Let’s explore a few options.

Grid layouts

Instead of hiding content in a carousel, the grid layout design allows you to display multiple pieces of content simultaneously, making it easier for users to scan and interact with what matters most. Grids offer visibility and reduce the frustration of endless clicking through slides. 

Many modern websites, especially e-commerce platforms, use grid layouts to show a collection of items, letting users view everything at once. There is no need to click through carousel slides and risk missing something important.

Take Gridle, a client management platform we worked on at Eleken. The platform allows business owners to move from leads to offers quickly, offers to quotations, and quotations to invoices. We didn’t just refresh the design; we revamped the user experience to make it more intuitive.

For the Leads section, we chose a grid layout to display two options for viewing funnels: Kanban columns and lists. All key information about each lead is immediately visible, and no extra clicks are required. This design helps users stay focused and efficient without hunting through multiple pages.

Scroll-triggered sections

When you’ve got a lot of content to share, scroll-triggered sections are your best friend. One Reddit user confirms that carousels can be nightmares and recommends using scroll-triggered sections.

In a lengthy onboarding flow or tutorial, scroll-triggered sections reveal each step as the user progresses. This approach works especially well in form design and input field design, keeping the experience interactive and manageable. Instead of overwhelming users with too much at once, it breaks the information into bite-sized chunks. Think of it like a guided tour, where each stop introduces something new, leading users through the process without feeling bombarded.

For example, on Eleken’s website, we use scroll-triggered animations to guide visitors through our story. As you scroll, you see why we’re the right choice for your design needs without being hit with a wall of text. It’s a dynamic way to explain who we are and what makes us stand out from other design agencies.

Tabbed navigation

Tabbed navigation is a simple yet powerful alternative to carousel UX design that lets users choose between different categories or content. Instead of forcing users to cycle through slides, they can simply click on a tab to jump straight to the content they want. 

Tabbed navigation is great for sites that need to present a variety of content, like a product catalog, articles, or even video content. Instead of overwhelming users with endless slides, tabs allow them to quickly skip to the section that’s most relevant to them. 

For example, in Data Streams, we applied tabbed navigation to organize a complex set of data efficiently. On the Browse screen, the user sees a navigation bar on the left, filter UI and UX, and detailed information about the selected object organized into several tabs. The most important information is on the right side, while key data points are emphasized with large fonts below.

This setup ensures that all the crucial blocks of information are available on one page, so users don’t have to juggle multiple screens. It’s a smooth, organized approach that gives users quick access without overwhelming them with endless scrolling or clicks.

Static hero images

Sometimes, simplicity is the ultimate sophistication. A static hero image or a large, high-impact visual can often do a better job than a rotating carousel, especially when showcasing a single, important message or product. The beauty of static images is their ability to grab attention and convey your message without any distractions or the potential frustrations of auto-rotating slides.

For example, many brand websites like Apple use a large, static hero image to showcase a new product or special offer. It’s clean, focused, and immediately grabs the user’s attention. You know exactly what they’re promoting, and there’s no need to cycle through endless slides to get the key information. Whether it’s the latest iPhone or a special event, the message is delivered with one powerful image.

Best practices for carousels (if you must use one)

If you’ve decided that a carousel is the right choice for your design, follow these carousel best practices to ensure it works effectively and enhances the user experience.

• Limit to 5 slides or fewer.

Again, users rarely interact with more than 5 slides. So, keep the carousel UI design short and sweet and focus on the most important content. This keeps the user experience streamlined and reduces the chance of overwhelming the user.

• Use thumbnails instead of dots for navigation

Dots for navigation? Users barely notice them. Instead, opt for thumbnails and small images of the next slides so users can easily preview what’s coming. This gives them better control and a clearer idea of what to expect, making the carousel feel less like a guessing game.

• Never auto-scroll

Auto-scrolling is a huge frustration for users. It forces them to rush through content and creates accessibility issues for those with visual impairments or limited mobility. Always allow users to navigate manually. Include next/prev buttons so they can go at their own pace, giving them more control over the content flow. Many great chatbot UI examples also handle this, allowing users to move through interactions at their own pace.

• Ensure accessibility

A carousel design UI is only as good as its accessibility. It’s non-negotiable. Ensure keyboard navigation is smooth, ARIA roles are correctly assigned for screen readers, and every image has alt text so users with visual impairments can fully understand the content.

When you prioritize accessibility, you're making the experience better for everyone, not just a select few.

• Track engagement

If you’re going to use a carousel, don’t just cross your fingers and hope it works. Track how users interact with it. Use analytics and heatmaps to monitor which slides get attention and which ones get ignored. If users aren’t engaging with later slides, consider adjusting the content or the design. Data doesn’t lie. Let it guide your decisions to make the carousel more effective.

Wrapping Up

Carousels can be a fantastic tool in UI design, but they aren’t without their challenges. When used wisely, they can display content engaging and space-efficiently. But when misused, they can turn into a frustrating, inaccessible mess that no one wants to interact with.

At Eleken, we live and breathe user-friendly design. Our team knows how to balance visual appeal with usability, ensuring that every element—carousel included—serves a clear purpose. We’ve helped countless companies create designs that keep users engaged while avoiding common pitfalls.

So, if you’re looking for expert advice or need help building a carousel that doesn’t frustrate your users, we are here to guide you. Let’s create designs that not only look good but work wonders.