Carousel Design

Learn more about carousel design for UI

What is a carousel?

In web and mobile design, a carousel is an effective way of displaying a series of images or content cards in an infinite loop. The user can browse visual content image-by-image; either by using the arrow keys on desktop or by swiping from left to right on a mobile device. This type of interaction is sometimes also referred to by the name of “rotating offer.”

You will most likely have seen carousel ads used on social media platforms such as Instagram and Facebook, where a series of images can be viewed as a single post. This illustrates one of the main advantages of this type of pattern; namely the ability to pack a lot of visual information into a limited amount of space.

Carousels vs sliders; what’s the difference?

Often people become confused between slider and carousel patterns. And the fact that some people refer to carousels as “carousel sliders” only muddies the waters even further. As there’s a lot of overlap between the two designs, this confusion is entirely understandable. Despite the similarities, however, there is in fact a clear difference between a carousel and a slider. Let’s take a look at them in turn.

Slider

Technically it could be argued that a slider is merely a lever or knob that can be moved either vertically or horizontally to browse information – usually images. In common usage, however, the word slider is often used to refer to a horizontal viewing gallery that makes use of a slider lever for navigation.

A slider of this type permits the user to move horizontally between pages (or content within a page, such as with an image gallery), from left to right, or right to left. This makes a slider ideal for presenting information in series with clear start and end points and a fixed order. Once the user reaches the end of the series, though, they have no other option but to go back again in the opposite direction.

Carousel

A carousel shares the fixed, linear format of a slider pattern, with the user typically swiping between images from left to right, or vice versa. However, the defining characteristic of a carousel is that, like the “merry-go-round” it gets its name from, a carousel eventually comes full circle so that the user returns to their original starting point again. The user doesn’t have to stop there, though, as a carousel permits infinite rotation of content/pages on a loop. It’s largely this element that sets these interactions apart from other patterns.

Some website carousel designs reflect the circular form of the merry-go-round that inspired them even more than this though. This is achieved by simulating the perspective foreshortening that occurs when images turn on an axis; with the front image facing the viewer, and the preceding and following images giving the impression of rotating off into the distance. In this respect design carousels are actually most similar in appearance to the cartridges – also known as carousels – that were once used to load transparencies into slide projectors.

When should you use a carousel for web and mobile?

In web and mobile design, carousels are excellent for showing your users a carefully selected collection of content. They should be used when you want to concentrate your users’ attention on a few important items at a time, such as announcements, or when you want to tease them with additional offerings to the content that is currently being shown, like holiday discount sales.

Carousels work best when you have highly visual items, such as product photos and movie posters. They’re much more likely to pique your users’ interest and encourage them to click on the carousel than text-based content.

Ecommerce and food delivery websites and apps make some of the best uses of carousel design. They add carousels near headers to alert customers to new promotions. They also add them to product and checkout pages to recommend products related to what customers have in their carts to boost sales and customer loyalty.

Tips for creating a good carousel UI

It’s important to remember that users often expect to have control over the user interface. Therefore to make an effective carousel banner, a good UI design is key to communicating the right information to users.

The design team can create a good carousel by starting with the carousel’s navigation controls. Small arrows pointing left/right or up/down can be placed within the carousel or slightly outside of it to let users know that they have some control over it. The navigational controls have been found to incentivize users to browse through all of the items in the carousel.

An auto-transition feature may also be set for the carousel so that it displays the next piece of content automatically, improving accessibility for users with motor skill issues, especially on mobile apps.

Most design teams prefer to add no more than 5 unique pieces of content to the carousel banner. This helps keep the carousel tailored to the users’ preferences and interests without overloading them with too much information.