Carousels are not well-known. They have low click-through rates, and accessibility issues and can cause disruption when auto-advancing. They are also very difficult to navigate.

Even though they are small, Carousels can get to websites and apps.

What should we do if we are asked to design a carousel? What can we do to make it more fun and useful? That is precisely the purpose of this article.

Do Users Use Carousels? 

It is a valid question. This is a fair question.

It’s not surprising, considering the size of carousels, which can take up as much as 90% of the screen. People rarely click through carousel slides, particularly if they don’t appeal enough or aren’t relevant to the task.

The carousels will not draw attention to general promotions, internal news, or press releases that aren’t of much interest. 

These are the same problems that auto-advancing carousels cannot fix. They may be able to see the second or third slide if they’re lucky, but they will not pay attention to it until they reach the next page.

People often scroll past auto-advancing carousels too often, rather than trying to get rid of them. This is especially evident in mobile app onboarding tutorials. When faced with an onboarding carousel, the first thing users will look for is a “skip” button.

Carousels are not a good choice for content discovery. This is true for both the hamburger navigation and the carousel.

Carousels are also a problem for keyboard users and screen readers, as they can’t be used correctly without extensive development.

Is this a call to abandon carousels? No.

Carousels are an excellent way to showcase all the options and features of a product/service, but there is not enough space. Users advance carousels at a nearly linear rate.

When:

• Customers are searching for the best option or choosing a pricing plan.

• Customers can view testimonials, reviews, and other information about products and their features.

• Users can view product images on eCommerce pages to get a better understanding of the product details.

• The user wants to see the experience before they book (hotels, vacations or theaters, restaurants, etc.). Fullscreen images are useful for those who need large images and videos but still want to be able to navigate between them.

• Mobile users can browse card content by simply swiping left and right.

Carousels can be useful when additional content has to be provided in a specific context. Carousels are a great example.

Carousels can be difficult to use and not accessible due to the way they are designed. 

Indicate an Honest Scrolling Direction 

There are many types and styles of carousels. Mobile users may be expected to swipe, especially if it is mobile ). 

Replace progress marks with labels 

We are used to seeing progress lines in carousels that indicate the current position. Some users try to click them to go forwards or backward.

The dots are often small and navigation through them is difficult. There are a lot of clicks, taps, panic, mistakes, and quick jumps forward and backward.

Progress dots aren’t effective in getting users to click through the carousel. They are therefore not relevant for encouraging interaction.

Always indicate the position of the carousel 

A horizontal slider doesn’t suffice. Numbers are the best.

Better Usability of Prev/Next Buttons 

It may seem obvious but it is crucial to remember that not all carousels are capable of displaying the progress dots. 

Swiping can sometimes be unpredictable. Sometimes users may underestimate the speed of their swipes or go too far. Users may underestimate their swiping speed or jump too far. To avoid this, users will need to slow swipe back to make sure they don’t miss any information.

Next/Prev Buttons Jump?# 

There are many details involved in the prev/next buttons. This raises questions. Are they supposed to jump over all the items? Should the carousel be slow and have multiple taps to show new items?

Some users may feel that the carousel’s speed is too slow. Sometimes it’s okay to move slower.

It can be difficult for users who are prone to scan through many items (or more than 10 items) simultaneously. Jumping between multiple items at once can be confusing.

Close

Common questions in conversation revolve around where the next/prev buttons should be located. This means increasing tap sizes and allowing for the sufficient distance between interactive elements. It also helps to speed up navigation in the carousel. This is done by minimizing the distance between actions. This means moving forward and backward in our example.

There are many options. We could place the arrow above the carousel, center them vertically/horizontally on the carousel’s slices, or display them under the carousel. You could also group them and place them next to one another, or spread them out and put them on opposite sides of the carousel.

Desktop: Buttons Above the Carousel

While there are many ways to make your website more usable, I believe that putting buttons above the carousel solves the majority of them. If they are too tall, it might be difficult for people to notice them.

Visibility problems can occur if the buttons are placed on slides. These buttons might be misaligned and match the background of the slide, making them difficult to see or invisible.

Mobile Buttons under The Carousel 

What are we able to do for mobile?

Horizontal centering buttons on the carousel may be difficult because of mobile taps that are very inaccurate. Large tap areas will take up less space than our favorite carousels.

Displaying the prev/next buttons below the carousel on mobile is the only way to go. However, research shows that users interact with pages using reading, scrolling, and swiping in the center of the screen. 

Users should expect to see the buttons as they scroll down to see the carousel. 

Prev/Next buttons may be placed vertically if they’re not surrounded by carousels and have a large tap area. This allows for quick navigation and avoids making mistakes.

Combining Tabs with Carousels 

Carousels can often display content users don’t control. This allows users to choose what they wish to see.

It is not enough to drag alone 

While some implementations use progress indicators, others rely on prev/next buttons and thumbnails. Many implementations rely heavily on dragging ‘. While users can drag items onto the screen, this isn’t always easy.

Add an Info Scent to The Carousel 

Slices arriving late in the carousel can be difficult to find. You can add information to slides that are already visible or upcoming to help users understand this.

Do not use auto-advancement. Add at least a 5-7 seconds delay 

Carousels that move automatically can be disruptive and annoying to users’ priorities and patience. Users rarely pay more attention to a carousel on mobile than they do to one on a desktop. 

It could be made to work if you need auto-advancing to draw the user’s attention or keep them there for a solid delay of between 5-7 seconds per slide.

Always include a “Pause” button to stop auto-advancing carousels 

Think about the carousel’s purpose. If you feel it is essential, add a “Pause” button to allow users to pause auto-rotation.

When the user interacts directly with a piece on the carousel, auto-rotation should stop. You can do this by hovering, focusing, or tapping through options.

Alternatives To Carousels 

With all these factors in mind, it’s easy to conclude that carousels offer the best solution. These decisions are driven by business metrics.

Carousels are not often used to drive these metrics. These metrics are rarely driven by carousels. Next, create a case that highlights the benefits of a different design.

Wrapping up 

Carousels can be used to solve accessibility and usability issues. 

If you are unable to delay 7s, let users pause rotation. You can delay 7s to allow users to pause rotation.