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.

• 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).

Drawbacks of carousels

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

• People frequently overlook carousels; even if carousel auto-rotates — visitors simply don’t stick at the top of the page for too long.
• People don’t interact with carousels. Only 1% of site visitors click on a homepage carousel, and only 20% of that 1% click on anything other than the first image.
• https://blog.adobe.com/media_bd28c1c826963aaee5dcd6c26c9917d3fcb95bb1.gif

Image credit: erikrunyon

Carousels hide content and users have little or no idea of what the next slide will show. Why would a user click through to another slide if they don’t have any idea about what it will show them?

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.