Home page hero banners are web design darlings — especially those that rotate through multiple images.
Conversion optimization professionals hate them, because A/B tests consistently validate that they’re not effective. At one conversion optimization conference, 25% of speakers called out home page carousels, and 100% of them condemned them. In fact, home page carousels (also known as image sliders or rotating banners) are so hated, there’s a domain dedicated to convincing us not to use them.
Despite this, they’re used by approximately 50% of ecommerce home pages. (In my own survey of Baymard Institute’s list of top 100 ecommerce sites, I caught 47 of them).
Why home page carousels are a problem
1. They’re distracting
Sliders typically move too fast to digest text and calls to action, and are difficult to control. User testers often complain they look like ads. Reality check: visitors aren’t grabbing popcorn to watch the slide show!
2. They’re rarely relevant
Unless they’re tightly targeted to the customer based on user context or personalization, they’re a shot in the dark as to what the customer wants to see.
3. They push more useful content down the page
Sliders are rarely interacted with; it’s better to focus on merchandising that wins clicks.
4. They can cause frustration
Web users often expect an image to link to what’s in the image. Often, banners contain shiny happy models wearing or using product. Clicking the banner often doesn’t lead to featured products.
5. They can be anti-persuasive
Web users tend to subconsciously overlook anything that looks like an ad, and images within the slider can distract eyeballs from the intended call-to-action.
6. They can negatively impact SEO
Using multiple h1 tags to wrap slider headings (changing the h1 tag with every slide change) devalues keyword relevance. Image sliders can also drag your page load speed, which impacts both SEO and bounce rate.
Alternatives to home page carousels
1. Creatively feature categories
This tactic offers the customer a visual way to explore your category navigation. Skinnyties creatively shows off featured category options, paired with a stylish, simple tagline: Start dressing better.
Indochino delivers custom-tailored apparel, and uses a single image of a Val-Kilmer like dude
While these examples are for relatively tight product catalogs, larger sites can apply it to featured or personalized categories.
2. Ask for “microconversions”
The Indochino example above cleverly asks for both email and social subscription. (Bonus tip: sneak some testimonials. These scroll within the content but the main graphics remain static.)
Pinup Girl Clothing promotes its contest to support “add to closet” interactions, motivating visitors to explore the site and provide context of what they like (which can be used for site and email personalization in the future).
3. Show off your value proposition
Why should customers buy from your site and not a competitor’s? Use your prime home page real estate to pimp your value propositions.
Drs. Foster and Smith point out why they’re better than the vet, including a picture of the founders to “foster” trust (get it?), not to mention adorable animals, which is always a win.
Dollar Shave Club uses an auto-play video to (hilariously) hammer home its value prop.
Auto-play video may have the same or worse usability implications as rotating banners, thus it’s safter to allow your visitor to initiate the video with a clear “play button” overlay, and some text to provide context on the video’s content.
4. Use unusual design
One of the fails of rotating banners is that visitors notoriously ignore them. What if featured content was presented in a visually interesting way that demands attention? The way REI’s home page is designed, you can’t help but hone in on that unusually-shaped section on the right.
5. Use thematic merchandising
If you skip the banner in favor of static merchandising themes, but ensure your landing pages (category or individual products) match what the customer expects when clicking.
If your images link to category pages, make the effort to display products in the image at the top of list results.
If your graphics include products, consider hyperlinking image “hotspots” directly to product pages, like Gaiam.
6. Feature content
Content+commerce is a current trend, and the home page is a great place to feature look-books, editorial content, video and the like.
Tommy Hilfiger showcases a collection of runway looks, while White House Black Market features video of its fall collection.
Mr. Porter features editorial content, with a magazine-style interview with Jude Law.
While content is trendy, keep in mind the home page’s goal is to support a deeper click into your site, and initiate product discovery and path-to-purchase. User and A/B testing can validate whether your content merchandising aids or detracts from this goal.
Still stuck on rotating sliders?
If you insist on using home page sliders, there are a few usability guidelines to adhere to:
1. Slow your roll
Baymard Institute has user tested home page sliders extensively, and recommends 5-7 second rotation for simple slides, and up to 10 seconds for text-heavy slides.
2. Pause slide upon mouseover
While a mouseover may be “accidental activation,” assume the engagement is a signal of interest and pause the slide. If it’s accidental, a visitor who really wants to see additional slides can use previous and next buttons to control the feature.
3. Provide clear controls
Clear navigational controls such as numeric icons and previous/next arrows help your customer return to slides and discover more.
Many sites use dots below the slider (often barely visible), which may not be as intuitive to the customer.
Kidrobot’s arrows (and calls to action) are barely visible — can you spot them?
A clearer approach is to display forward and back arrows with the dots, and ensure they don’t compete with the slider image and disappear.
Slobproof’s slider controls are clear and high contrast to its sliders.
Igigi places previous and next carrots over white space so they stand out against darker backgrounds.
Another approach is to provide scannable tabs that describe each slider so the user can hone in on what’s of interest.
With clear controls, your slider need not even rotate at all – the user is in control to advance the slide if he or she desires.
4. Make it interactive
Sunfrog’s clever approach to rotating banners leverages the understanding that our eye is drawn to empty fields. Placing an interactive search field on a dark background grabs attention, though in this example, it’s unclear what the field is asking for or what task it performs.
This field asks a more straightforward question, year of birth, which filters the catalog to that attribute, providing a more personalized experience.
7. Maintain scent
As with any display banner, if products appear in the slide, ensure the slide links to landing page that clearly displays these products (e.g. promotes products to the top of a category list page, or links directly to a single featured product).
The concensus among the conversion optimization community is to not use rotating banners, and there are several ways to greet your home page visitors without them. If you must use them (or they win your A/B tests), ensure you’re applying every tip possible to make them user-friendly.