Adobe Creative Cloud

April 10, 2017 /UX/UI Design /

XD Essentials: Carousels

Carousels, sliders, slideshows — whatever you want to call them —  they’re all over the web. Based on the premise of limited space with multiple messages to deliver, carousels are used to showcase services, help sell products, and capture the attention of new visitors. Go to just about any eCommerce or corporate site and you’ll find one on the homepage. On the surface carousels seem like a good idea, but they’ve got their downsides too.

In this article, we take a deep-dive into the pros and cons of homepage carousels, and we take a look at alternatives.

What is a Homepage Carousel?

This type of carousel is often used by designers to display featured content on a homepage. Carousels come in many shapes and sizes, but usually a carousel (as discussed in this article) possesses the following traits:

  • It appears toward the top of the homepage and occupies a substantial section of the “above fold” area.

Above the fold is the upper half of a web page; this section of a page is visible when a visitor lands on your site. Image credit: userex.co

  • More than one piece of content appears in the same place, but only one piece of content displays at a time.
  • A carousel offers some indication (usually dots, arrows, or thumbnails) that there is more than one piece of content to display.

Benefits of Carousels

The greatest benefit of using carousels is that they enable more than one piece of content to occupy the same piece of prime real estate on a homepage. Since more information appears near the top of the page, there may be greater opportunity for people to actually see it. Carousels are also good for sites that targets multiple audiences, as it lets you offer something for everyone. Last but not least, animated carousels make a site look more dynamic; motion changes in a part of the page capture a visitors’ attention (it’s human instinct to be drawn to movement).

A homepage carousel’s purpose is typically to grab a user’s attention, and then entice them to click on the link to find out more.

Drawbacks of carousels

Despite the popularity of homepage carousels, they aren’t always the best use of space:

Guidelines for good carousel design

It’s possible to make a homepage carousel more user-friendly through design and interactive features. If you decide to use a carousel on your homepage, consider the following things:

Content is king

Carousels can only ever be as good as their content. Don’t use a carousel if the content isn’t interesting or useful for your visitors. For example, carousels formated in the same way as advertising (when each slide is a totally independent banner advertisement) annoy users most of time rather than guide them to a single clear call to action.

Don’t: If the content looks like an ad, a majority of users will simply ignore it due to banner blindness, regardless of how relevant it might be to them.

Like the rest of your content, carousels need to be engaging in order to be effective. Visitors come to your site for a reason, and that reason should be in the carousel.

Do: When user know what to expect they are engaging with the carousel slide and requesting more information.

There are also a few important rules that should be mentioned here:

  • Choose the sequence of slides carefully. Keep in mind that the initial slide will get a lot more exposure the than later ones. Thus, show the most important information on the first slide. The following slides should all be ordered by importance.
  • Use crisp text and images. The clearer the text and images, the more likely users are to engage and understand the intended points.
  • Never use a carousel as the only path to important content or features. It’s a good idea to put important information that appears in a carousel somewhere else in the page, so the visitors who interact with the site have a good chance of seeing it.

Text should be legible

Slide captions or titles should be designed in such a way that they can be visible against a wide variety of background images. There’s no special technique in this — the visual design you choose for your captions will ultimately limit what background images you can use in order to maintain legibility.

Don’t: Titles are difficult to read against their background colors.

Do: The clearer the text, the more likely users are to engage and understand the intended points.

Limit the number of slides

Try to keep the number of slides to to minimum: make sure every piece of content absolutely needs to be there before placing it in a carousel. Include five or fewer slides within the carousel, as it’s unlikely users will engage with more than that.

Use a progress indicator

Since a carousel only shows one items at a time, it’s important for users to see where they are in their viewing progress. Show how many frames are available in carousel, and indicate the current slide among the set. This helps people feel in control.

Dots show how many slides available and where in the slide deck a visitor is now.

Make navigation obvious

First and foremost, make it obvious that users can find more content off the screen. This can be a set of arrows, scrollbars, gestural hints, auto-rotation, or something else that makes it obvious to the user that more content exists offscreen. Speaking about controls:

  • Make sure any and all navigational elements (arrows, thumbnails, etc), are large enough to be clicked with a mouse or tapped with a human thumb (at least 48×48 pixels).
  • Ensure sufficient color contrast between navigational elements and the background, so users can see and properly use your carousel.

Don’t: Arrows on the right and left of the carousel are easy enough to see and click when they appear in slides with light backgrounds, but are barely visible on slides that have dark backgrounds.

Do: Arrows are clearly visible and easily distinguishable against the background.

Take accessibility into account

Inaccessible carousels can be a major obstacle for many website visitors. It’s highly recommended to make sure that:

  • People using keyboard navigation and voice input software can navigate between carousel items.
  • People using screen readers will understand where they are and how to navigate between carousel items.

Use auto-forwarding with caution

Auto-forwarding through the slides in a carousel leads people through the information. This works like a timer where the carousel automatically moves onto the next slide after X seconds. It’s usually better to avoid auto-forwarding. Moving UI elements reduce accessibility, particularly for users with motor skill issues who have difficulty clicking something before it’s taken away. But if you still want to use auto-rotating feature, you need to:

  • Select a proper time for each slide. A carousel that rotates slower than the user reads is annoying. But a carousel that rotates faster than the user reads is really annoying. The amount of text in a slide should largely determine the duration of a slide’s visibility. Nielsen Norman Group recommends 1 second per 3 words for auto-rotating slides.
  • Make sure auto-rotation pauses on hover. This gives the user more control over the experience.
  • Make sure people who are distracted by movement are able to pause animations while reading the web page.

Keep in mind that auto-forwarding isn’t recommended on mobile devices because users often scroll quickly, so by the time the carousel changes, the user will likely be below the fold and won’t see the change anyway.

Optimize for mobile usage

Optimizing a carousel’s content for mobile viewing should be a top priority.

  • Optimize the carousel’s images for mobile screens. Make sure slide content is legible.
  • Always support swipe gestures on touch devices. Swiping is far easier for visitors than trying to tap a tiny arrow. And since gestures are invisible, don’t forget to provide gestural hints for the users.

Use visual hints to exhibit navigation functionality. Image credit: Ryan Duffy

3 Effective Alternatives to Homepage Carousels

There are alternatives to a homepage carousel that both perform well and are vastly easier to implement:

Static hero image

A hero image is a good alternative to carousel. A single well-designed hero image—one that looks like it’s part of the site, not an advertisement—is less likely to be ignored than a distracting carousel.

The homepage of Daniella Draper is a good example of a hero image in use. It looks like a natural part of the design and at the same time focuses user attention on a current promotion.

Single most important message can help increase your visitor’s focus on that message.

Grid

Grid layout allows designer to divide content from the carousel into a few different sections. The key benefit is that all content is visible at any time. This allows users to scan the page more efficiently and find relevant content faster.

Pinstripe Alley uses a grid to feature a few important community events. Notice that the most important information is the most visually prominent.

A grid allows multiple items to be shown simultaneously. Key points in this particular grid layout are displayed based on level of importance.

Video-Based Header

The old saying “a picture is worth more than thousand words” is even more true with video. By adding a layer of interactivity you can greatly increase engagement: video allows people to “feel” a product or service.

Tesla Motors gives customers an idea of what it feels like to drive a Tesla by using video.

Video is able bring a sensual notion of a product or technology that still photography can struggle to match.

Conclusion

A lot of posts has been written about carousels and almost all of them are against this pattern. Despite the public opinion, carousels can be used effectively. The key to their effective use is content. Keep in mind that a carousel is never better than its content — if the content isn’t relevant and well-curated, the experience will never be good.

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design CC (Beta), the first all-in-one tool for creating and sharing website and mobile app designs. Test drive XD and tell us what you think.

DOWNLOAD

Join the discussion

  • By Brett - 1:38 AM on April 11, 2017  

    How can I be expected to take this article seriously, when you used the term “above the fold” in your very first point?
    Come on man, this is 2017, and people are STILL using this term? It was NEVER relevant, nor correct, and should not ever be used…

    • By Nick - 2:49 AM on April 11, 2017  

      Brett, thanks for your comment. The point here is pretty obvious: “Above the fold” area matters because it sets the stage for future content and provides quality expectations. Quote Nielsen Norman Group’s findings: “Users do scroll, but only if what’s above the fold is promising enough. What is visible on the page without requiring any action is what encourages us to scroll.”

      • By Brett - 4:10 AM on April 11, 2017  

        You totally missed my point. I know what the term means. My point was THERE IS NO FOLD. What is off the screen on one device may still be well within the top 50% of another devices screen.
        There is absolutely no way you, as a designer, can figure out where this mysterious “fold” line is. You can determine what’s at the top, and you can determine what the ordering of elements below the top item is, and that’s it.
        People need to stop using the term “above the fold” when talking about design that’s viewed on so many different devices, screen sizes, resolutions…

        • By Nick - 4:59 AM on April 11, 2017  

          Brett, in this context “above the fold”, means the top (visible) area of the page for the users. I’m not speaking about a specific “line” which separates visible and hidden part of the screen, and do not provide any specific number of pixels or pt in this context.

          • By Brett - 9:29 AM on April 11, 2017  

            Wow… (◔_◔)

          • By Christopher West - 12:15 PM on May 2, 2017  

            Hi I have to agree with Nick. Above the Fold practice is nonsense…easy example…on a tablet the ‘above the fold’ content would be different when a user views the tablet as portrait rather than landscape orientation. Also a user may have an older screen with a resolution of 1024×768….let’s say tomorrow they go out and purchase a new monitor with a resolution of 2560×1440! Their experience of above the fold would be different.

  • By Christopher West - 12:16 PM on May 2, 2017  

    [edit I mean I have to agree with Brett] 🙂