You’ve probably seen them in a feature area – the “slideshow” or “carousel” – where multiple images slide in and out of the same space, each having a different prominent message. It’s been a popular trend to use them, and they have become ubiquitous across the web or in apps. Sliding carousels are a way to give more than one piece of content a prominent position within a compact space. It provides variety without cluttering the page even more. Though widely used, slideshows are somewhat misunderstood, so let’s take a deeper look at what that might mean for your website.
Slideshows are tried and true ways to browse image and video galleries, and even products. Amazon uses a similar pattern for easy product browsing in a compact space.
The feature & the slideshow
On landing pages, there is usually more than one piece of content that’s important. Slideshows therefore become an appealing compromise when you’re catering to multiple business and user needs, because then everyone gets the “lead” space.
However, sometimes many messages mean no message at all. Data shows that slideshows are not used as much as one may expect. A study from the University of Notre Dame found that approximately 1% of users clicked to the next slide (1), and another eye tracking study showed that users avoided prominent slide arrows in the hero (2).
When hidden behind the first “slide,” the others essentially have no prominence on the page at a given time. As the user scrolls down the page, they may have already missed your other slides and moved on to something else.
Slideshows often fall short due to a handful of factors, including:
- Clear Actions: A number of slideshows do not have clear arrow actions that imply clickability, or hints that there are more “slides.”
- Scrolling Behavior: User behavior has shifted over the years, and users feel comfortable exploring pages by scrolling a lot. They may find other content more appealing below, scrolling right past your feature area.
- Ad-Like: Users will explicitly ignore it if it feels like a banner ad, rather than a compelling message that resonates with users.
Getting them right
Hero areas are critical, impactful areas of your site. So what are the best practices of using a slideshow to feature what’s important on your landing pages?
Have a Message That Resonates
- Get the first impression right with a coherent message for your feature, regardless of whether you choose a “slideshow” approach.
Audax leads with one clear statement and enticing call to action.
Auto-advancing Slideshow
- An auto-advance is used to automatically rotate the slide in the hero after a pre-determined amount of time. In many instances this can be distracting, or the slides move too quickly to read the message. Either way, users will abandon the hero if these happen.
- If you decide you need to use this approach, make sure the user feels in control: give ample time to read and understand each slide before advancing (leave enough seconds, such as 10 or more), the transition is not overly distracting, and there is a way to stop it.
Nest animates and auto-rotates in a non-obtrusive manner. Also, each slide is promoting different parts of the same product, so the message is never missed.
Swap Your First Hero
- A good strategy is to randomly switch which slide appears first when the user arrives. This ensures an even distribution so your 2nd and 3rd slides get noticed by users too.
Proper Signaling
- Make sure the controls of your carousel are obvious and not hidden, otherwise users are never going to discover the other “slides.” Also, make sure to have an indicator of how many slides there are in total.
- Carefully balance the controls with the fact that you need to have a simple, clear message in the hero.
- Make the clickable area as large as possible. Consider having more than a button clickable.
- Eternity Medicine has noticeable arrow controls and shows how many slides are available.
Mobile Experiences
- Many slideshows are not mobile optimized, though the interaction lends itself quite well to multi-touch interfaces. Make sure yours is usable.
Do Research & Determine What Makes For Success
- Ultimately, your slideshow and feature area depends on your site and your users’ needs. Research will help you understand what content and messaging can draw your users’ attention. Is your primary goal clickthroughs? Brand impressions? Make sure the design supports these goals most of all.
- Incorporate learning gained from analytics data. Use this to determine whether there’s a shortfall in clicks on your slideshow, what devices they’re using and more, then adjust your strategy accordingly. Also, use qualitative research to understand more about why they are or aren’t noticing your feature the way you intend
In Summary
Even though slideshows have been a go-to approach with large feature areas, we’ve seen that their popularity does not guarantee success. Given how important the feature areas of a website can be, it’s critical that they are done thoughtfully. There are also a number of alternatives, such as a collage layout, that may be worth considering instead.
If you choose to use a carousel for the feature area on your website, make sure messaging gets the point across quickly and that the actions are clear and noticeable. Your users will be more likely to engage in a way that makes everyone a bit more satisfied.