You know that big automatic rotating banner you ordered for your start page? Yeah, that’s right. It’s rubbish.
It’s the biggest and most important bit of real-estate on your start-page. everyone is fighting for a bit of it.
So what do we do? We add a
giant sliding carousel to the web site’s start page. After all, that’s what everyone else has done.
But it’s wrong - and here’s why…
1. It gets ignored.
We are very good at quickly scanning pages and visually marking the
areas of the page we perceive as adverts and banners and subsequently
ignore them.
Banner attention and retention is a secondary task for our brains, so
even having a slider containing a series of branding images and
messages might not be anywhere near as effective as you think.
The eye tracking example above shows how the sliding banner area of
the page (the area with the darker background towards the top of the
webpage) was
almost completely ignored; it received very few fixations.
Participants moved quickly to the relevant content further down.
2. It’s distracting.
They can make it harder to focus. visits to web sites are generally
“top-down” (goal oriented) rather than “bottom-up” (stimulus-driven).
Distractors (such as a banners)
slow the completion of the primary goal.
3. It’s confusing.
Moving or changing banners can have a negative effect on navigation.
When trying to complete a task, you may decide to explore a
particular track. Then realise it’s probably not what you are looking
for and go back. You then try to explore another path you’ve recalled
from your previous visit to the page - but the page has changed, or is
constantly changing.
Sliding banners and “random” banners can cause
information foraging to become complicated.
4. It squeezes out relevant content.
Content which is genuinely relevant for both your goals and that of
your visitors gets pushed down the page - in many cases, especially
laptops, this means it gets pushed off the screen.
Scrolling to get to a
CTA means
the CTA will under-perform. A/B test it for yourself.
Swedish clothing retailer
Kappahl is an example that shows the sliding area of the site completely filling the screen of the average laptop,
leaving all other content hidden from view without scrolling.
5. It slows down your site.
By their very design, sliding banners contain multiple images. Often
large images. These images need to be downloaded before the carousel
starts to rotate. Using our Kappahl example above, this means almost
1Mb of images need to be pulled down to your browser.
1Mb of images could easily take
7 seconds or more to load on a 3G mobile network. On my fast broadband connection they still managed to add
3 seconds to the page’s load time.
It’s
said that
40%
of people give up if a web site takes longer than 3 seconds to load and
almost every other person thinks a site should be visually complete
within 2 seconds.
6. It causes global warming.
Okay, You probably think I’m being silly now, and to a certain degree I am.
The serious side of this point is that sliding banners often use a fair bit of
CPU. More CPU means
more power consumption which also means shorter battery life. (Now you probably get the silly global warming reference..)
The combination of javascript and moving things around the browser
canvas on the fly takes some effort. It’s not unusual to hear your
laptop fan speed up whilst viewing pages with sliders.
Take a look at
this example and see if you notice the fan on your laptop speed up, or your tablet get really sluggish and warm at the back.
Valuable real estate
This is the most important bit of real-estate on
your start-page. It should be put to best use. In most cases, this would
be something that helps lead people to complete your most wanted
action.
Perhaps even used to re-enforce the primary goal of your site.
In some situations this can and perhaps should be a carousel based
solution.
Not all carousels need to be automatic sliders with all the
failings listed above. Done correctly, in an appropriate context, a
carousel is not a bad design pattern at all.
Some references and further reading:
Alternative names:
There’s no universally accepted name for the sliding banner. Here are some of the alternative names I know of:
- sliding banner
- slider
- slider banner
- image slider
- content slider
- content carousel
- top carousel
- banner rotator
- image rotator
- slideshow
