Guidelines 79-82
These days so many ecommerce sites use rotating offers — and I think it’s not because they tested it, but due to herd mentality —”others have it, so should we”.
I’m sure you’ve come across dozens, if not hundreds of image sliders or carousels (also called ‘rotating offers’). You might even like them. But the truth is that they’re conversion killers.
So if they’re not effective, why do people use them? 2 reasons:
- Some people think they’re cool. But cool does not make you money — at least not this way.
- Different departments and managers want to get their message on the homepage. Design by committee never fails to fail.
Jakob Nielsen (yes, the usability guru) confirms this in tests. They ran a usability study where they gave users the following task: ‘oes Siemens have any special deals on washing machines?”. The information was on the most prominent slide. The users could not see it — totally hit by banner blindness. Nielsen concludes the sliders are ignored.
Notre Dame university tested it too. Only the first slide got some action (1%!), other slides hardly got clicked on at all. 1% of clicks for something that takes up (more than) half the page?
Still think using a slider might be a good idea? Check out this site.
The first guideline in this section is ‘Avoid automatic image sliders”. But we understand that sometimes they are unavoidable, especially in cases where they placate corporate bosses. The other guidelines make sure that if you have to do it, you are going to have good navigation to help make it more effective.
4 guidelines for ecommerce image sliders:
- Avoid automatic image sliders.
- Image Slider Content – What’s in the slider images needs to be relevant and not look like an ad.
- Image Slider Interaction – it should rotate manually, and if it has to be automatically, then slowly, typically 5-7 seconds at minimum and more with heavy copy.
- Image Slider Interaction -it should have obvious controls and should freeze with ANY interaction including hovering.
Guideline #79. Avoid automatic image sliders.
Carousels are effective at being able to tell people in Marketing/Senior Management that their latest idea is now on the Home Page.
They are next to useless for users and often “skipped” because they look like advertisements. Hence they are a good technique for getting useless information on a Home Page.
In summary, use them to put content that users will ignore on your Home Page. Or, if you prefer, don’t use them. Ever.By the way, these views are not my own but are based upon observing thousands of tests with users.
Quote by Lee Duddell
Our blog post: Don’t Use Automatic Image Sliders or Carousels, Ignore the Fad.
Some main reasons to avoid auto-rotating sliders: First, most people register the rotating slider and immediately scroll past it on the lookout for content that’s actually relevant to them. Second, most sliders either move too slowly (people get tired of waiting for the slide to rotate) or too quickly (people are in the middle of digesting the slide when it rotates). Third, the movement of rotating sliders is distracts from important features on a homepage like the value proposition and CTA.
The constantly sliding imagines were very distracting, too fast, and made me feel like my computer was sliding off the desk — Pd much rather see scroll arrows at each side of an image, so I can look through if I want to, and at my own pace. Also, they continued to slide around in the background, when i was obviously not looking at them, because I had a menu pulled down.
How to do it RIGHT
Lowe’s
The 40% off promotion graphic could’ve been a rotating slider, showing a picture of a kitchen and then a picture of a bathroom. Instead, they’re one combined, static picture. This simply designed page facilitates exploration by eliminating any distractions.
How NOT to do it
Forever 21
We caught this slider mid-rotation. This homepage is way too busy. Users are gripped by the graphics and rotating slider, forgetting why they came to the site in the first place.
I did feel that the main site was a little busy. Maybe if the GIF/Video was static, it wouldn’t feel this way. Instead, if I remember correctly, it was a slideshow that changed every few seconds.
User quote on Forever21
Guideline #80. What’s in the slider images needs to be relevant, not exclusive, and should not look like an ad.
During testing, site users often commented on the amount of ads. Rotating sliders act like flashing advertisements which people have grown accustomed to ignoring, and even resenting. Further, if the information isn’t relevant then there will be no interaction, interest, or message-takeaway.
With that in mind, value propositions, links, navigation, and anything vital should not be in a slider as it might disappear as a user is trying to access it. These elements need to be elsewhere on the page.
If the very first offer people see is not what they like (=relevancy), then what? What if they don’t like any of the offers? That’s certainly not going to help your customer lifetime value get better.
How to do it RIGHT
Bodybuilding.com
This B Daily graphic is a
How NOT to do it
Entirely Pets
Ranked in the bottom 30th percentile for the UX dimension Usability. This Cod Skins promo looks a lot like an ad.
Guideline #81. Image slider should rotate manually, and if it has to be automatic, then slowly, typically 5-7 seconds and more with heavy copy.
Our brains have 3 layers, the oldest part is the one we share even with reptiles. It’s mostly concerned with survival. A sudden change on the horizon could be a matter of life and death. Hence human eye reacts to movement – including constantly moving image sliders and carousels. But is this bad?
Unless the image slider is the only thing on your website (bad idea!), it’s not a good thing. It means it takes away attention from everything else – the stuff that actually matters. Like your value proposition, the content of your site, and your products.
Image sliders get hit by banner blindness and most people won’t even pay attention to them, but even those who do can’t really get the messages.
Imagine a visitor lands on your site. They see a message on the slider and starts reading it. “This fall you get to …” Bam! Gone. Often the sliders are so fast that people are not even able to finish reading them (even if they want to).
Focusing on a single primary message and action is way always far more effective.
Guideline #82. Image slider should have obvious controls and should freeze with ANY interaction including hovering.
The image slider should stop permanently with any interaction like a click or manual advance. Main reason: user control.
Carousels often have terrible usability – they move too quickly, have too small navigation icons (if any!) and often move automatically even if the user wants to browse the content manually. One of the key rules of user interface design is that users need to be in control.
Slider controls should be obvious. Little tiny dots on the bottom of the image with no forward or backward indicators don’t give users control, or communicate to users that they can manually click through each slide.
Instead, create large, hard to miss controls. Use icons that are universal, like forward and backward arrows.
How to do it RIGHT
TigerDirect
How NOT to do it
Fitness First USA
These buttons are a bit too small and inconspicuous to be sure that users will realize the above graphic is a slider.
