Rotating banners, carousels or sliders – whatever you call them, are often found on a website’s homepage. But how effective are they? Opinions are strongly divided, with many people who hate them and believe they are bad for conversions. Others believe there is a place for them.
In the end, the only way to find out if they are right for your website is to test them out. Do they draw attention away from your site content and products or do they increase your conversions?
It’s true that if your homepage slider looks like an advertisement, users are likely to ignore it due to banner blindness. However, homepage sliders have evolved, and the most contemporary ones feature high quality, beautiful imagery, thoughtful copywriting and well-placed CTAs.
Design elements ensure that information is well-timed, allowing users to absorb slide content. They receive an excellent first impression, and this increases the time spent on a website.
One of the main objections when it comes to homepage sliders is usability. The Baymard Institute conducted large scale usability tests for seven years and found that homepage sliders can work, but to do so they need to be helpful to the end-users. The usability tests focused on the interactive elements of sliders and how they could be made more user-friendly. Here are some facts about homepage sliders you may not know.
1. Most users won’t see all the slides in a home page carousel
During the testing done by Baymard Institute, test subjects would scroll past an auto-rotating slider long before it had cycled through all the slides or move to another page.
Some of the most detailed usability data come from a study by Notre Dame University web developer, Erik Runyon. He found it was not uncommon for the first slide in an auto-rotating slider to get 50% of the clicks.
It may not be an issue whether a user doesn’t see all of the slides, as long as the slider does not provide the only way to access some of the features or products.
When Baymard tested the Toys’R’Us mobile website, they found that the only way to access the ‘gift finder’ was through a slide on the home page carousel that users couldn’t easily find, even though they were actively looking for it.
What you need to do if using a slider is to make sure the most important, highest performing slide is first because most people will never see the second.
2. Many sliders rotate too quickly or too slowly
If a slider rotates too quickly or too slowly, users either don’t have time to explore each slide properly, or they get bored.
Pottery Barn’s homepage carousel has beautiful imagery, but Baymard’s test subjects felt it moved too quickly for them to inspect the content.
The amount of text in a slide should determine how long it’s visible. A different rotation time may be needed for different slides. A text-heavy slide should be visible for longer but five or six seconds is probably enough for a slide with only a simple heading.
Many e-commerce sites use auto-rotating sliders, and this may often be due to herd mentality rather than actual testing. E-commerce sites usually advertise in their sliders, with ‘special offers’ and ‘hot sales’ appearing frequently. Forever21 for example, rotates between three offers which change every four seconds. Quite often what is being advertised does not even relate to what users are looking for and may cause them to bounce.
3. Almost half of all auto-rotation sliders do not pause on hover
When a user hovers over a slide, it indicates interest and auto-rotation should pause. When a user hovers over a slide, it infers user intention. If auto-rotation stops at this point, it prevents the slider from going on to the next slide just as a user may be about to click on a slide.
It was often found in the usability testing that users were trying to click on a slide and the slider rotated just before the click, so they opened the wrong page.
4. Auto-rotation sliders don’t stop after active user interaction
Users often become frustrated with auto-rotation when they want to browse manually. Auto-rotation should not just pause but permanently stop after active user interaction because that click gives a strong indication of user purpose.
Many companies, like Hilton, use image sliders, but they do not move automatically, giving users more control.
5. Slider controls are not visible enough
Controls need to perform two functions: indicate the current slide among the set, and allow users to navigate easily back and forth.
Most conventional designs for controls use a series of dots to show the current slide among the set, and arrows to move back and forth. Sometimes the dots are so small that they make navigation difficult, and arrows are also small and don’t contrast enough the underlying image to be easily seen.
If a slider has more than four slides, users must be able to navigate between slides. An intuitive, user-friendly way to do this is to add slider thumbnails. In this way that can preview slides and find the exact slide, they need with one click.
6. Touch device sliders have different requirements
Did you know that about 56% of website traffic comes from mobile? More than half of your visitors will look at your slider on a mobile device. Auto-rotating sliders are not appropriate for touch devices because they lack the hover state and knowing whether users are about to click on a current slide or not is impossible. A slide-change may happen just before the user clicks, making them open the wrong page.
Mobile users expect to navigate ‘galleries’ on mobile devices by key touch gestures, particularly swiping. Many mobile websites do not support swiping.
Artwork created for desktop shouldn’t just be scaled down and reused on mobile because it makes some of the text illegible. Another consideration is that mobile users have even less patience with slow-loading sliders. You need to ensure legibility and that the weight of slide images is optimized for the bandwidth of mobile devices.
7. Many sliders exist for the wrong reasons
Sliders make use more complex – instead of just looking at content, users have to understand how they work. Jakob Nielsen talks about how large slider areas annoy users and make them skip over a featured area, which is pretty much the opposite of the intended effect. There’s often a desire to implement technological advancements without reflecting on how they affect the demographic using the website.
A company’s homepage is appealing real state, and many departments may be competing for attention. Sliders may be introduced as a way to keep everyone happy but be counterproductive in the long run when it comes to conversion. Sliders may be thought of as a way to provide better navigation to important offers, but very often the date suggests otherwise.
8. Sliders implemented the right way can increase conversions
Every website has goals and wants users to take action when they visit. This could be in the form of filling out a form or watching a video. If a slider can show an increase in conversions for the site, no reason exists not to use one.
The Austin-based consulting firm, Conversion Sciences, found that unoptimized sliders are likely to hurt conversion rates, but optimized ones can improve conversions. The company did various tests and found that when they optimized the order of slides, the page outperformed any static image by 61%.
Microsoft is one company that uses a homepage slider effectively. It features only two slides containing minimal text. The pause button is very visible, and users immediately see there are only two slides, the first of which allows users to shop the latest versions of apps for Office 365 and the second which offers access to more information about the Xbox One S.
SpaceX uses stunning imagery, drawing users to click through to learn more about what the company does. Text previews underneath help users to navigate through the three slides. The slider is full width, and it allows the company to news and video about its launches – a combination that would be difficult to achieve using other design techniques.
The bottom line
Your site is different from anyone else’s and whether a homepage slider will work for you or not can only be determined by testing. Try to set up analytics to determine views and clicks for each frame of your slider so you can find out what entices users and what they ignore.
If you choose to use a slider, follow the advice given above to increase its usability. A slider used to tell a story, build your brand and engage a user is likely to perform better than one that rotates through various conflicting offers.