Image

The Problem with Large Homepage Sliders

Somewhere in the purge of homepage clutter and the love affair for full-page elements, designers thought they could take a page from successful photography and design studios and create visual appeal with a giant slider featured prominently on the home page of corporate and ecommerce sites.

People oohed and awed over the mocks featuring beautiful photography and carefully-selected typography.  Each slide had meaning and conveyed a powerful message.   The client was happy, the designer happy.

But then the site went live and the client started uploading or creating their own slides.  The graphics were pixelized or...gasp...squeezed and stretched beyond gravity's logic. Fonts and colors were added outside of the branding of the company.  Content was just haphazardly thrown together and there would be slides dedicated just to the company starting a Facebook page.  Cliche stock photos phased out the original images painstakingly chosen. 

The grave was dug with that original mock.  Could we really expect anything else to happen?  

Surprise!  Ecommerce and many B2B sites are not meant to sell aesthetic.  What works for a print company showcasing their work in a slider will not work for a company selling rental construction equipment.  Yes, that one image of a happy contractor from your mock seems like a really strong branding point, but it's not a scalable in the long-run. 

Sliders are fluff pieces and offer no real value for a user seeking to convert immediately.  These useless sliders take up prime real estate which should be given to content that can change on a regular basis.  Conversions are lower on ecommerce sites that use a slider compared to those that immediately show a grid gallery of products.

Brad Frost recently wrote a great article on the topic and asks his readers to participate in The Brad Frost Carousel Challenge by publishing their analytics. Reading through the comments, you'll find a few people chimed in on their experience with this specific UI.

Notre Dame

One story is of Erik Runyon and his experience with the Notre Dame site, where he tracked how often users switch the slide, total clicks, and total clicks per slide. Just like data we find in SERP and PPC positions, the click-throughs occurred mostly on the first slide, dropping sharply off for the subsequent positions. Furthermore, only 1% of total site visitors clicked on the carousel at all. 

WWJNS? (What would Jakob Nielsen say?)

The Nielsen Norman Group conducted a case study called Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility. A UK user was asked to identify special deals from a washing machine company on this page.

She failed.

NNG points out reasons why this auto-sliding accordion slider didn't work:

  • Banner blindness due to its fancy formatting.  Users assume it might be an advertisement.
  • Changed every 5 seconds. User stated, "I didn't have time to read it. It keeps flashing too quickly."
  • The autorotation reduces accessibility for users with poor motor skills, low literacy, or aren't native English speakers.

Eye Tracking Study

The following was a study that further shows the banner blindness users often experience when seeing a slider.

WhichTestWon Case Study

The following example is from an ecommerce site that sells eco-friendly and educational toys. In this A/B test, the difference was the inclusion of a positioning section above the product listings. Although not a rotating slider, it occupies the same real estate and was prone to banner blindness. Version B, the one without the section, increased orders by 13.7%. 

Conclusion

I wish I could show some more case studies from ecommerce sites, as they are the biggest offenders of abusing this UI pattern.

Taking from both Brad Frost's article and Andy Searles' How to Make Sliders Not Suck, I leave your with some best practices in using homepage carousels (if you have to use one):

  • Use a uniform style across all slides.
  • Keep it simple, not just for ease of use but to reduce page loading time.
  • Be mobile-friendly: scale to the viewport and use touch to enhance navigation.
  • Don't bury vital information in a slider.
  • Reduce the number of slides.
  • Make navigation obvious.
  • Don't make your sliders automatically run.
  • Do make sliders run in a carousel loop.
  • Don't use your slider for unrelated items. Slides should be in the same topic category: sales, new items, featured products.
  • Do consider a smaller slider, possibly one that only takes up two-thirds of the area above the fold and use the freed-up third for listing the latest from your blog or company news (something dynamic but primarily text-heavy in nature).