The value of the homepage slideshow and best practices

A homepage sideshow has many different names from “slider” to “banners”, to “flippers”, to “carousels” to “motion graphics”.  No matter what you call it, the homepage slideshow has many positive and negative effects.  I will cover when to use a homepage slideshow, and when not to use it.  Also I will cover the best practices when using a homepage slideshow, reasons you shouldn’t use a slideshow, and list some of my favorite jQuery plugins for creating slideshows.

Valid reasons to use a homepage slideshow:

  • To illustrate your top products or services
  • Improve user experience by either reducing the amount of clicks to guiding the user to where they most likely want to go.
  • Show your top or most recent news or blog posts

Bad reasons to use a homepage slideshow:

  • I want to list every product and service I offer
  • I want to show all of my photos on my homepage
  • The cool kids are doing it, so I should too
  • I want to advertise myself on my own website

Homepage slideshow best practices:

  • Have at the very most 5 slides
  • Slides are easy to understand
  • Contain a minimal amount of text
  • Each slide has a single strong call to action
  • Each slide’s purpose is to guide the user to your desired goal
  • Slideshow needs to be responsive to all devices
  • All graphics are optimized for file size to have the fastest page load time possible
  • Have different graphics for desktop vs. mobile.  Mobile images should be smaller in size and load time.

Reasons why not all websites need a slideshow:

Does your website only have one: product, service, or desired goal?  If so then just having one static graphic or video is probably a better solution.  Having a slideshow for the sole purpose of having a slideshow will often just create a worse user experience.

Here are some statistics supporting not having a slideshow:

  • Only 1% of people on a slideshow, most clicks are on the first slide
  • A lot of people have seen hundreds of sliders and they just ignore them, they have banner blindness
  • The load time of your website may suffer greatly
  • A slideshow pushes the content of your website down, poor for SEO
  • Over saturation of call to actions can get confusing for users

Recommended jQuery Slideshow Plugins:

If you do choose to have a slide show, there are dozens of jQuery slideshow plugins.  Over the years I have used and test quite a few of them.  Some of the most vital things to have is a responsive slider, and also one that is easily editable and customizable.  Here are my favorite plugins:

  • bxSlider – responsive and simple.  Not ideal if you want to have advanced animations, but great for a simple slideshow. (link)
  • Unslider – another very simple responsive slideshow plugin. (link)
  • Cycle2 – I used the original Cycle plugin for several years, it is extremely easy to use and very customizable. (link)
  • Diapo slideshow – This plugin is great if you need to have custom animations for each slide, however it is no longer supported. (link)

When done properly a slideshow can improve your website’s user experience and also drive conversions.  But not every website should have a slideshow.  I hope I gave you something to think about.

Further readings:

  • Yoast – Our themes don’t have sliders… Because sliders suck. (link)
  • Carousel Interaction Stats (link)
  • Slideshow inspiration (link)