Designing a User-Friendly Homepage Carousel
by Nick Babich
Carousels (also know as image rotators, sliders, featured content modules) are everywhere on the web. This pattern is hugely popular on eCommerce sites, especially on the homepage. Most of e-commerce sites have a carousel on the homepage of their desktop site.
But are homepage carousels actually helpful for our visitors?
Most designers think carousels are anti-pattern. And a few excellent researches confirm this point. Research by Erik Runyon revealed that only 1% of site visitors clicked on the carousel feature — and 84% of those were clicks on the first slide. On his site Should I use a carousel?, Jared Smith states that, given the choice, you should not use a carousel. Perhaps, the best statement at Jared’s site comes from Lee Duddell who summarized the most critical carousel problem:
“Carousels are effective at being able to tell people in Marketing/Senior Management that their latest idea is on the Home Page. Use them to put content that users will ignore on your Home Page. Or, if you prefer, don’t use them. Ever.”
However, homepage carousels can work well and be helpful to users when they adhere a few key implementation details. In this article we’ll go over effective carousel implementation details and outline how to design a good carousel.
What is a Carousel
Designers use carousels to maximize the use of available space without forcing the user to scroll further down the page. Carousels come in many shapes and sizes, but usually a carousel (as discussed in this article) shares the following properties:
- Carousel appears at the top of the homepage and occupies a hero area.
- Carousel contains more than one piece of content but only one piece of content actually visible at one time;
- Carousel offers some indication to hint users that is more than one piece of content available within the carousel.
Benefits of carousel
- Carousels utilize the same physical space to show more than one piece of content
- Carousel appears at the top of the page and there may be greater chance that people notice it.
Drawbacks of carousel
- People can easily overlook carousels. When visitors land on a page, they typically start scrolling and skip all information in carousels.
- Can deliver incorrect impression about a business. The fist slide in a carousel is the one that have a chance to stay in a visitor memory. Thus, when designers use incorrect imagery, the user will the wrong idea about your business.
Guidelines for good carousel design
Follow content first approach
Carousels can only ever be as good as theirs content. If the content of a carousel isn’t good, the entire experience goes to drain. There are a few important rules that should be mentioned here:
- Don’t use a carousel if the content isn’t interesting or useful for your visitors. Promotional information that your users don’t care about wrapped in a carouseal will only distract visitors.
- Content in your carousel should’t look like an ad (designed in the same way as advertisement). If the content is ad-looking, most users will simply ignore it due to banner blindness.
- The slide sequence should be chosen according to the priority of your content. The fist slide should have the most important content.
- The carousel slides should never be the only way to access site features and content. It’s a good idea to put any important information that appears in a carousel also somewhere else on the site, so the visitors who interact with the site have a better chance of seeing it.
- Don’t use a carousel if you need your visitors to see all of the content. Even if your carousel is eye-cathing and interesting, most visitors won’t see every slide.
Limit the total number of slides in a gallery
Strive for 3–5 slides within the carousel, as it’s unlikely users will engage with more than that. Limiting the number of slides also aid content discoverability.
Indicate how many slides available in a gallery
Indicate how many slides are present, and where the user is within the “progression.” This helps people feel in control.
Design proper navigation controls
User control and freedom is one of the heuristics coined by Jakob Nielsen. When it comes to interaction design, you need to allow users to interact with an UI object in a familiar way. What does it mean in the context of carousel? First, you need to ensure that users have visible next/previous control that they can use to interact with a carousel and the controls should be visible within a carousel.
Second, ensure that next/previous controls have enough contrast so they clearly distinguishable from background. When next/previous controls are placed on top of a busy background users can easily overlook them.
Its recommended to support swipe gestures for mobile devices. This doesn’t mean traditional carousel controls such as next / previous buttons can’t be implemented, but they should be provided in addition to supporting swipe gestures.
Tips for auto-rotation (or auto-forwarding)
Auto-rotation is expected behavior for carousels. But for auto-rotation to work well it requires careful implementation of four details:
- Never use auto-rotation on mobile. Users can accidentally tap on a wrong slide when the carousel auto-rotates.
- Make sure slides don’t rotate too quickly. Sometimes carousels move too quickly, and users can’t read the information, which causes frustration. If you cannot find the right timing — don’t auto-rotate the carousel.
- Keep users in control. Pause auto-rotation on hover (Desktop) or touch (Mobile) to avoid changing slides the user is likely to be reading or are about to click.
- Don’t stop at the last slide. Continue auto-rotating the slides when the user reaches the end of a gallery.
Hero image: the best alternative to carousel
A common problem with homepage carousel is lack of context: when users land on a page, they aren’t engaged enough to interact with carousel. As a result, they won’t want to flip the slides. In an attempt to solve this problem you might consider using a hero image instead of a carousel. Сompared to a carousel, hero image has the following advantages:
- Visitors focus only on one image.
- It’s easier to find image that will be less visually distracting
- It’s easier to choose just one image that’s better represent a service or products.
- The top area is static. Nothing auto-rotates in front of a user.
You can prioritize your content effectively, eliminate the carousel, and put an effective and useful hero image together with call to action where the carousel was. For example, the following screenshot shows the homepage at Amazon on which designers use a hero image to highlight the top product — Kindle Paperwhite. This hero is attention-grabbing and communicative.
Another example — New Balance announces their latest shoes and prominently displays a fast path to find whatever visitors need.
Thank you!
Follow UX Planet: Twitter | Facebook
References
- Carousel Usability: Designing an Effective UI for Websites
- 9 UX Requirements for Designing a User-Friendly Homepage Carousel (If You Need One)
- Carousel Interaction Stats
- Should i use a carousel?
Learn how to design better products
Interactions between computers and humans should be as intuitive as conversations between two humans. Interaction Design Foundation will help you to learn how to design for efficiency and persuasion.
