Creating Effective Carousels

However, since your clients are likely to force you to create carousel banners, here are some simple tips to make them work as well as possible:

• Consider employing no automatically timed behavior at all. Just give users control of horizontal scrolling. If they are interested enough in the concept of offers, they’ll see what else is there.
• Automatic rotation must be slow enough for users to read and understand, then act on the banner. Almost all of the carousel banners you’ll see in the wild rotate far too quickly. Ten seconds is about the fastest rate at which I’d allow a banner to rotate.
• Make sure the banner’s content is brief and to the point, so users can read and comprehend it before the banner rotates.
• Provide manual controls—in the form of prominent arrows at either side of the banner. Try to place the arrows beside the banner instead of on top of it. Otherwise, users might think they should click the right arrow to see more about the content on the banner—just as they would with normal rows of items.
• Indicate the current position in the carousel. Using dots—similar to those that indicate which home page a user is viewing on a smartphone—works well and are very familiar to most users. On mobile devices, these dots are too small to tap, so they’re just indicators.
• Animate the transition between banners with horizontal scrolling. Do not just replace the banner—and certainly do not use methods such as a cross-fade or vertical scroll. Do not allow the entire page to blink or reload. The transition time should be about two seconds—or enough time to make it clear that it is a carousel of offers—so users understand the paradigm.
• Carousels should go around and around. Do not get to the end and stop or rapidly go back to the start.
• Provide a clear call to action. Don’t overreach and prompt users to buy now when they’re only trying to go to a product-details page. Instead, use calls to action such as Learn more, Shop now, or other simple, truthful messages.
• A call to action should generally be a button. Normally, I suggest using links to display new pages, while actions—such as submitting a form or adding an item to a cart—should be buttons. But, in practice, buttons work far better than links on graphic banners, and their actions do not seem to confuse users.

I have redesigned the Aliexpress banners using these methods, as shown in Figure 2.

Responsive Banners

Banner ads are an excellent poster child for why responsive Web design is risky and very often terrible. Far too often, desktop banners end up displaying on mobile devices with poor or no modifications to make them fit well. One example of such a banner is shown in Figure 3.

In this case, the banner is far too large—so not all of it even fits in the viewport—and it obscures key information on the rest of the Web page.

In other cases, the banner is scaled to fit the screen and too small, so the user cannot read the content or interact with the banner properly.

The best way to create banners that work on all platforms is to stop thinking of them as graphics. They can include text, links, buttons, and more. Therefore, you should design and build banners just as you would any other interactive component, using either native technologies for a mobile platform or HTML for the Web. Then ensure banners adapt or respond to the viewport size and platform.

At the least, use responsive or adaptive images, loading different or flexibly cropped banner images that work well on all platforms.

Category Carousels

A lot of media companies—including Netflix and the Google Play store—use a pattern I like to call a category carousel. Figure 4 shows how Amazon Prime Video uses this pattern.

In a category carousel, each of the items depicted as a thumbnail represents a title, app, or other product. Each row of product images represents a category.

This is one of my favorite methods of exposing content and allowing users to drill down to it at the same time. This method is useful in resolving the problem of making users aware of content, as well as explaining categories on home pages and landing pages.

This pattern works well because it organizes the information organically. While there are usually titles that apply to each row, they are often unnecessary. Product thumbnails show at a glance what the category actually is—which is often better than a text title.

However, it is all too easy to create bad category carousels. These are just starting to gain traction in ecommerce, so Web sites and apps often misuse them—just because companies don’t know better. Here are some guidelines for creating good horizontal-scroll components for content categories:

• In most cases, at least on mobile devices, assume gestural control only. Don’t take up room with pagination controls—especially not with the complexity of both next, next-five, and start/end buttons.
• The list must imply scrolling by having items at the right not fit fully on the page. This is important, so despite your visual designers’ getting a headache over it, they must not lock everything to a grid. Otherwise, users would assume it’s a display list, not a scrollable carousel.
• Make sure that both the first and last items at the left and right are always only partially visible—even as the user scrolls. Make sure the widths of items adjust to different sizes of phones. Consider adding some automatic snapping, so the system scrolls after the user stops, ensuring there’s no chance of false-end alignment.
• Make sure individual items are readable and understandable. Don’t use screenshots or photos that look too much like others when at icon size. Books and streaming-video services often assume the cover art is readable, but frequently it is not. Don’t rely just on a thumbnail. Always use a text label below each graphic.
• Provide a function to let users immediately view an entire category with a single click. The category title can serve this purpose.
• The title for the category can be either above the carousel or to its left, but should not scroll. If you use icons for categories anywhere, use them here.
• The link to a category page provides a fallback for those who do not want to or cannot use the carousel. Make sure you list the products on that page in a simple, easy to use, universally accessible manner.
• While there must be a way to link to a whole category, remember that the content is what labels the category best. Category titles do not have to be prominent or take much space.
• Position in the carousel is not usually important. No scroll bars, dots, or labels such as 4–8 of 26 is necessary because the user has complete control of scrolling.
• Do not automatically scroll for any reason. If you design and code the carousel well, users will understand it.
• Ideally, the carousel should use infinite-scroll functionality to load chunks of content and allow users to see an entire category. Developers are likely to complain about this, so if they insist you must limit the number, make it a large one and avoid having the list just end. Never rotate back to the start. Otherwise, users might think you sell only ten products in a category! Instead, provide a link at the end of the list to view the whole category.
• Don’t be repetitive. Remove Buy now sorts of buttons from each item because users will become blind to the repetition. Look closely at what other content might be like in reality. For example, if your list is always ordered by top rated, all the ratings users see will be 5 stars. This can also become a repetitive blind spot and is simply not worth doing.

Adaptive Content

The labels underneath each thumbnail image must be readable in the space provided. This is a good excuse for dipping your toes into the world of adaptive content. Instead of writing a single product title, provide many of them—one for desktop, one for mobile Web, one for the mobile app, and others for specific uses of the carousel. For a counter-example, see the titles in the carousel from the Eastern European ecommerce site eMag, shown in Figure 5.

The descriptions here use a canned format that follows a type + brand + model + variations format. Presumably, they use these for some heavy-handed SEO purposes on the landing pages, but they reuse these titles everywhere.

In this case, it is not especially helpful to list every item as a Mobile Phone, Blackview A60. Especially when showing products in the category mobile phones, leave that information out and instead provide useful color, size, or capacity information, allowing the user to make a good selection.

When titles might be longer than the available space, do not simply truncate them, but instead append an ellipsis to them, ending the title content with the ellipsis character. This lets users know there’s more information and invites them to click to find out more. Note that an ellipsis is not three periods, nor any other number of dots, but a character, U+2026 or the HTML entity …. Always use the proper character, and do not allow it to break or become separated from the preceding characters.

Conclusion

While animated banners and horizontal-scrolling elements are definitely not the best answer to every problem, just as with every other pattern, they must be well designed and well implemented to work properly for you and your users.

Just because we flip an interaction on its side doesn’t mean everything we know about human behavior changes as well. Use your heuristics, and avoid choosing trends and style over functionality. 

Resources

Hoober, Steven. “Paging, Scrolling, and Infinite Scroll.” UXmatters, November 5, 2018. Retrieved April 22, 2019.

Kennedy, John, and Michael Satran. “Layout.” Microsoft Windows Dev Center, May 30, 2019. Retrieved June 11, 2019.

Laja, Peep. “Don’t Use Automatic Image Sliders or Carousels.” ConversionXL, September 27, 2017. Retrieved June 11, 2019.

McGrane, Karen. “Adaptive: Content, Context, and Controversy.” Karen McGrane Talks, July 9, 2014. Retrieved June 11, 2019.