Web Design

Why we’ve stopped using Homepage Carousels

By Dec 1, 2018 No Comments
homepage carousel frustration

Rotating banners on websites are incredibly common.

Nearly everybody has used one on their website.

But are they any good? Are website carousels effective?

Click randomly on a selection of website designs and the chances are you will very quickly come across one.

They are often situated right at the very top of the page as the first thing people view, seemingly perfect for displaying a few different messages you want to get across to your web visitors.

Why do so many websites have a rotating banner?

For me, rotating banners are the last hangover from the days of ‘People don’t scroll’.

They didn’t either. Not until everyone and their dog had a mobile phone.

Now swiping is as common a gesture as turning a page in a book.

People do scroll in 2018 so you now have no need to ram as many messages as you can, as quickly as you can, at the top of your page.

Homepage carousels are a common request and many clients include them in their creative brief, often to be accompanied with a request for 2 or 3 large images and a button to click through with.

creative project planningA good idea you’d assume.

We did at one point, hell this website probably has one or two left hidden on a long forgotten page. (makes note to check.)

Three seems to be the average number requested, and as a designer this number should please me.

Three is the magic number in design for a variety of reasons, but not when it comes to homepage carousels.

3 large images loading at the very top of your page is going to take more time.

As speed is a major ranking factor for websites this is instantly detrimental to your SEO.

As a business it’s understandable that you want to take advantage of that first impression. It makes sense to go in with 3 messages that you think your audience will be interested in.

It’s educated spread-betting surely?

Research proves otherwise.

Rotating banners are powered by a code – a code that is often a drain on your load times due to a java script that is running it. And then it has to load in the 3 images.

man asleep at deskUltimately this reduces your ranking. Remember, speed is paramount.

All the text you prepared so perfectly for your new website is now sitting at least one third of the way down your page. To cap it all, you’ve just made your potential client wait another few seconds.

There’s no way this is advantageous to your visitor or to your website rankings.

Why not just go with the first message and run with it?

3 Messages in fairly quick succession is harder to read in than one.

If you visit a website that does have rotating banners it’s probable that it will either be moving too quick – or too slow.

How many times have you been reading a banner and then it moves – Leaving you looking at a totally new message that moves again revealing another.

Not only is this annoying, but when used on a mobile site it causes delays in load times, data usage is increased, and load times suffer.

annoyed internet userCouple this with a banner that often takes up too much of the screen, and you leave the user to try to scroll down on a touch-enabled slider. It becomes a nightmare in terms of user experience.

I find these a lot on newspaper websites or apps.

As I browse the news, a page is intersected by an advert.

A near half page banner will appear that becomes a game of it’s own to negotiate past to continue reading the article.

If it’s a news article of great importance I struggle on, but if I was shopping around for a product, a service or a business would I persevere, or would i hit ‘back’?

Banner Blindness

Many tests have proven that because rotating banners look like advertisements, people ignore them. It’s known as banner blindness

To quote wikipedia:

“Banner blindness is a phenomenon in web usability where visitors to a website consciously or unconsciously ignore banner-like information, which can also be called ad blindness or banner noise.”

There’s a whole load of research behind this statement and it’s well worth reading.

It certainly changed my mind when I realised many of us do exactly the same.

Click through rates are poor after the first slide

If you have a rotating banner on your homepage take a look at your Google Analytics.

You can check how many clicks each banner is getting. You’ll be breaking the trend if your banners are getting into double figures and I suspect they will be as little as 1 to 2%.

If in doubt, ask yourself how many times you sit at a website and watch ALL the slides.

You’ve visited a website for a reason.

You are after the information that Google suggested might be on this website. And now you’re going to take the time to watch all the images?

Not likely.

Here’s the proof and you get 10 bonus points for pointing out the obvious >

Should I use a carousel?

Web Accessibility Problems

In addition to the problems so far, you also find many images contain text that is part of the image.

For people using screen readers this proves problematic as the software cannot read the text.

Many carousels do not function properly on mobile. They attempt to scale the text, and the image to fit on a smaller screen size. Because the images are actually large versions for a desktop PC it loads even slower.

Most sliders and carousels have an option to turn them off for mobile viewers. I’d suggest at least doing this and creating a single banner that only shows on mobile.

But why stop there?

Better Homepage Design

How many times as a kid did you hear your Mum say

“Are you going to do it just cos’ they do it?”.

Mum was right.

Most website themes or online builders automatically come with a slider or carousel as one of their features. Bin it.

Unless you are designing your own website from scratch the chances are you will probably start with a website theme, or an online builder such as Squarespace.

Virtually all of the themes you can purchase come with a rotating banner. It’s harder to find one that doesn’t rely on a slider.

So what’s the alternative for better homepage design? Messaging.

Think about what your most important message is.

modern web design manchester

Consider it, write it, re-write it and fine tune it. Make that right and lay that at the top of your website. In a static format.

Your opening headline is no different to an employee at a store greeting a potential customer with;

“Welcome, we are ‘your company‘ and experts at ‘your service‘ How can I help?”

You can use an image to accompany it, but only if it adds to the headline.

You then need to create a separate image that you can only see on mobile. Why load in the same size image for a desktop screen on a small screen?

If you’re still in any doubt there’s another option I thoroughly recommend and you have nothing to lose at all. Your customers and Google will thank you for it.

Testing.

Remove your banner for a month and test the results.

Do your rankings improve? Does your conversion rate improve? Does your Bounce rate fall?

Let me know the results….

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.