By Annika Naschitzki
As you are probably aware, we test a lot of web sites. Quite often we see test subjects overlooking key content or functionality, causing our customers to wonder what’s wrong with their designs – or even the test subjects – ‘It’s there can’t you see it?’ We hear the term ‘banner blindness’ referred to quite frequently, and we’ve often wondered how much this behaviour is specifically related to advertising banners, or how much it applies to homepage sliders, carousels or large homepage content banners -you know, the bit at the top of the homepage swaps between several banners and that promotes the latest this or that.
So, with the arrival of our shiny new eye-tracker (“I see what you see”), we decided to run a little experiment to see when, if ever, users overlook banner-like homepage elements on websites and to find out if there might be any way of designing to avoid this behaviour.
Please note: When we talk about ‘designing to avoid banner blindness’ we are not referring to the use of dark patterns, where ads are made to look like website content in order to fool users and increase conversions. This is basically evil web design and more likely to anger and upset your visitors than anything else.
What is banner blindness?
You could say that the internet is built on ads. They’re typically lurking in banners on the right-hand side or top of many web pages. It clear that users have quickly learned – consciously or subconsciously – to ignore the right-hand side of the page. After all, right-side banner placement is a pattern almost as reliable as navigation options being presented on the page top or left. This observation was coined “Banner blindness” or “ad blindness”.
Since this is a well-known and documented effect by now, many designers use other website real estate to convey important messages. Moving away from the right-hand side, messages are often placed in central homepage sliders or banners. They often come as a carousel, running through a number of messages that the website-creators consider important.
The question is: Do these kinds of banners/carousels get ignored by website users, in the same way that right-hand side adverts are?
We selected four websites that had prominent banners at the top of their homepage. Some included photos of people, whereas others were solely typographic. The sites that we chose to test were Kiwibank, RaboDirect, ASOS and our own website.
We asked our test participants to run through a short task on each site. We also tested ‘free exploration’ – we’d just ask the participant to “check out the homepage for as long as you find it interesting”. We don’t often do this – frankly, we just wanted to see what would happen.
Our eye tracking data here is visualised in ‘Heatmaps’. These maps show the concentration of the participant’s attention as an average. Areas with red colour drew lots of attention, yellow or green areas were looked at less and areas with no colours were not looked at, at all.
Our test participants were asked to find their nearest Kiwibank ATM. What you see here is typical scanning behaviour. Participants looked at the top navigation bar, brushed over the main content and discovered ‘Find a local ATM’ at the page bottom (the red colour shows that most attention is focussed here). The main banner area (the bit that reads: ‘Nada. Zip. Nothing. Zilch’) was pretty much ignored, even though it is animated and flips to a different image after a couple of seconds.
We found the same participant behaviour applied to the RaboDirect site –participants’ attention was focussed on the ‘Contact us’ option on the top (the task was to get in touch with the Customer Service). The face in the banner did receive some attention – the ‘face effect’ is something that is consistently observed through eye tracking.
The ASOS banner received most attention in this test, with fixations on the faces but mainly on the text. Participants were asked to get in touch with customer service – and they found the link at the bottom of the page (behind the large red hotspot). On the way, the central banner caught their attention though.
We also asked participants to have a look at the homepages without a specific task in mind (we randomised the sequence of tasks and free exploration). While we originally did this just to see what would happen, the data turned out to work well for comparison. We looked at a different data visualisation, the ‘Gaze plot’. Gaze plots show the visual journey of a single participant, each bubble shows what the participant’s eye focused on in sequence.
This is how one participant’s attention was distributed on the Kiwibank homepage, resolving a task and just freely exploring the page:
In free exploration, the central banner drew much more attention. Overall, participants read and commented on the message. Most found the message quite funny, too. There were similar patterns of focus on the RaboDirect homepage.
So far, all that tells us is that central banners can be noticed – and perceived positively – if users are ‘just browsing’.
Looking at the results for ASOS, here are the visual paths of two participants (one participant’s gaze is shown with a green path, the other is shown with an orange path):
What struck us was that there is barely any difference between the patterns of visual perception during free exploration or during resolving a specific task. In both cases, participants looked at the faces in the main banner and read the central message. The visual fixations were short, which is a sign of perception of imagery rather than in-depth reading of text. Still, the image received considerably more attention than the banners on the other sites we tested – interesting!
What this means
With two of the sites when users had a specific task in mind, the main banners were ignored – even the animated one. This could suggest that the central real estate of many websites is ‘wasted’, dead space, because users don’t perceive the messages or offers promoted there.
However, the ASOS central banner managed to capture participants’ attention better. In comparing task-based and free-roam behaviour, we could see that the users’ pattern of perception was not as strongly influenced by the task as on the other homepages.
What does the ASOS banner have that the others don’t?
- The ASOS central banner doesn’t look like a banner. It’s much more integrated into the page than the others we tested. The Kiwibank and RaboDirect banners clearly carry the brand style, but could be seen as less connected to the rest of the homepage design.
- The ASOS banner not only advertises the current sales theme, but provides access to the main sections of the website (shop for women and shop for men). It has some practical value and is in effect a key part of the navigation.
- The RaboDirect banner is merely a ‘welcome’ – we often see users skip over introductions and welcomes ( ‘Blah, blah, blah blindness’). The Kiwibank message may be relevant to the users, but it takes some interpretation: ‘What is free?’ Conversely, the text of the ASOS banner is integrated in the image and its message is simple – ‘It’s spring season’ – no further interpretation is needed. Plus, the message is likely to be relevant to a large group of users.
Yes, the ASOS website, in its purpose and audience, is quite different from Kiwibank and RaboDirect. We are sure that this will have an overall effect on the results. However, we believe we found some general design principles that could apply to any central banner and homepage.
So, for the central real estate of your homepage try the following:
- Don’t make it look like a banner. We often recommend drawing clear visual distinctions between the sections on a web page. When it comes to central banners and message spaces, making a stronger connection to the wider page concept and content may dispel the ‘advertise-y’ feeling.
- Simplicity. Your central message may only have a split second to convey its message and draw attention – make short and snappy and avoid text or images that need extra interpretation.
- Relevance. From inside an organisation or company, you’ll have an opinion on what messages you want to get out there and what matters. Keep in mind that this may not be what most of your users want – make it relevant to them and make it useful.
A few notes
We’ve only tested a few homepages in a very limited context. What we’ve found matches what we often see and hear in user tests and interviews, that’s why we feel confident in making these statements. However, we’re sure there’s still more to the effect of ‘Banner blindness’ in relation to central homepage banners than what we covered here.
It’s quite likely that under certain circumstances, messages and specials in a central banner could be helpful to users. For example, the eye tracking data for the Kiwibank homepage may have looked quite different if the task would have been: “You’re looking for a new checking account.”
Tips and principles will work differently for various types of websites: what grabs the user’s attention on commercial websites may be different from websites that are focussed on providing information, for example, on government sites.
Overall, we believe it’s worthwhile thinking twice (or three or four times…) about what you do with the prime real estate of your homepage. Central banners and sliders may be appearing more and more often on websites, but that doesn’t mean they’re always the best solution!
And by the way…
…we’re not much better, it seems.
We tested our own homepage. Participants were asked to get in touch with someone at Optimal. With this task in mind, the participants’ visual attention was focused on navigation options on the left-hand side:
The main banner was barely looked at. We didn’t even get a ‘face effect’ on Trent’s face. But who wants to look at Trent anyway? (Sorry, Trent…and Mrs Trent)
Yep, even we are learning – always!