Michael Gearon

Banner Blindness

Michael Gearon

On a daily basis users are exposed to lots of noise, to not be overwhelmed with all of this information users can filter out lots of stuff that they feel is not relevant, in most cases effectively. Banner blindness is when users either consciously or unconsciously ignores parts of a web page that they perceive as being not relevant.

Usually when users are searching through the web they are goal driven, such as I want to find information, I want to buy a thing, I need to check the status of something. This tunnel vision means that users are focused on completing the task and therefore filter out all information they do not think will be useful to achieving the goal. Banner ads often do not help achieve these goals and are quickly assessed and then ignored by the user as they continue to find the relevant information.

What we can learn from this user behaviour is that users can make a judgement on if something is not relevant by:

  1. The proximity the element is to actual advertisements and promotions
  2. If the style of the element is different to the rest of the page, for example different colour scheme or there is animation happening
  3. The placement of the element in places where you expect there to be an advertisement such as the sidebar or above the header

What is banner blindness?

It is when people ignore page elements that they perceive correctly or incorrectly to be ads. One cause of this is that because people build a mental model of how they perceive a web layout to be structured they focus on the parts that are most relevant to them and their needs. Sometimes users incorrectly mistake a piece of content as an advertisement is because of how close it is to an advertisement, this is known as the Gestalt law of proximity, if items are placed close together then there is an assumption made that they are related

Proximity of content near advertisements

One cause of people ignoring content is when content is place near to advertisements or paid promotions. The lack of space between relevant and not relevant content can slow down a users ability to separate out the useful things and can reduce efficiency and altogether miss out on important information. When structuring a web page avoid placing key elements like the main call to action button or a phone number a user may need to make a booking near an advertisement. An example of where this is used in a “dark UX” pattern is some websites where you download something they often place lots of advertisements near the download button with ads that also have “download” buttons tricking the user into clicking the wrong button and then generates ad revenue for the website.

Difference in styling

When an element is styled differently to the rest of the page it could be perceived as an advertisement. Styling could be a difference in colours, typography, imagery or using animations. Animations in particular can be a nuisance as sometimes it’s purposely trying to distract from the main content. There are some typical characteristics to identify an advert, it’s usually in a box format, with a background image and then text placed over the top. When designing a web layout a recommendation is to avoid these characteristics so users don’t perceive a potentially useful image as an advertisement.

Placement of content

Placement can make a huge impact on whether someone sees the content or not. Placing content in the sidebar, at the top of the page or around the main content is usually perceived as a paid advert or promotion.

Michael Gearon

Written by

Michael Gearon

Senior Interaction Designer and Co-Author to Tiny CSS Projects