Say no to carousels

User experience, User journey, Web design, Web development

Some people refer to them as sliders, some people call them carousels, and others say rotational banners. Either way, they are a user experience nightmare! For a long time it was a trend for websites to contain carousels and they’d pop up everywhere. Clients would demand them for their websites because they’ve seen them on their competitors’ websites and think of them as a good design feature. Young designers would jump into wireframes and add carousels as a default without really questioning what content would be displayed or what their goals were for the hero area. And departments in companies would put pressure on their designers to add their product on the home page so they’d compromise with a carousel.

Now as more companies invest in experienced designers and put more weight on a strong customer experience they realise that there are a lot more effective ways to fill a hero area. And for those who are still holding onto sliders, here’s why you should adapt them into a more powerful element and improve your hero area for better conversions.

Lack of focus
Caesars Palace home page
The hero area is the first thing a user sees when they first enter your site. You have a very small window of time in which to inform them of your business and engage them with your offering. Many times each rotational banner will shout about a different product, service or message which dilutes the overall focus of your page. You should instead choose one thing to target and push that to your users rather than throwing everything you can at them and hoping something sticks. It won’t.

Too quick to take anything in
stylista carousel
Often carousels are automated and rotate without the user having to click on anything. This might sound great but it’s actually very annoying as it’s usually too quick to read anything and digest the message. It also presents a rather frustrating scenario where a user will click on a call to action just as the banner is rotating onto the next one and their click will register for the next banner, taking them to a page they weren’t expecting.

It’s rare for users to see past the first rotation
Tilda carousel
A lot of times, particularly on e-commerce websites, carousels are pushed from heads of various departments who want their item on the home page. In order to appease this designers will tend to just stick it on a banner so everyone is happy. However, research shows that only 1% of users will interact with a carousel and of those 87% only click on the first one. This means that instead of having banners of equal value, anything past the first banner is largely pointless and will probably be ignored.

No context
InstaStyle Carousel
It is often the case that the number of banners in the rotation is indicated by a series of small circles or squares near to the bottom of the area and they are usually clickable links to navigate between them. Whilst these show how many banners there are it doesn’t provide any information at all as to what is on these banners and thus no incentive for users to click on them. Likewise, the banners will often have arrows on the left and right to navigate between slides but with no description as to what the next banner has on it. This is essentially hiding information from users and expecting them to find out for themselves what is there. They won’t. And why should they? It is a designer’s job to present information in a clear and easy way and users shouldn’t have to click around to find hidden content.

Users can skip rotational banners entirely
John Lewis carousel
It has been found that some users suffer from what is known as banner blindness whereby they associate carousels with adverts and simply ignore them entirely. This means that despite how relevant the content may be your users could just scroll straight past to avoid looking at them regardless.

In conclusion
There are times when carousels do work and can be used effectively as long as certain user experience rules are adhered to. However, the majority of times rotational banners are added to websites seemingly as a default design feature with no real thought as to how they help the user journey or increase conversions. As companies start to invest more in their customer experience we should start to see carousels being used less frequently and when they are used, they are designed with their user at the forefront.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>