Banner blindness

In short

When people look for specific information on a page, their eyes sort out everything that looks like an ad. Banner blindness is the name for this sorting out.

The problem: what gets sorted out isn’t always an ad. If an important notice is styled like a loud promo box, it drops out too. Kara Pernice of NN/g describes this as an instance of selective attention.

The Benway and Lane experiment (1998)

The term comes from a 1998 paper by Jan Panero Benway and David M. Lane of Rice University. Its title is “Banner Blindness: Web Searchers Often Miss ‘Obvious’ Links”. The work was also presented at the 42nd Annual Meeting of the Human Factors and Ergonomics Society.

The idea came up in a test of a corporate intranet. Participants were asked to find information about Internet courses. The page had a large, salient link to exactly those courses.

Almost everyone scrolled past that link. They chose a small “courses” link at the bottom of the page and didn’t find what they were looking for. When shown the large link, most were very surprised.

The authors then ran two controlled experiments:

The two experiments by Benway and Lane (1998)

Experiment	Participants	Result
Pilot study	6 experienced web users	Tasks that had to be solved via shortcuts in red banners succeeded about 58% of the time; control tasks via the text menu, 94%.
Second experiment	72 undergraduates	17 of 71 people reported seeing the non-ad banners. Recalling any advertisement at all: 20%.

Source: Benway and Lane (1998). Figures as in the paper.

In the second experiment, neither animation nor grouping the banner with the menu changed the result. The blindness also showed up with text items that didn’t look like ads. According to the authors, ignoring salient items while searching is a wider phenomenon than just an advertising effect.

NN/g eye-tracking findings

Nielsen Norman Group documented the effect in usability tests in 1997 and saw it again in a large eye-tracking study in 2007. In 2018, after a new eye-tracking study, Kara Pernice wrote that the effect is still widespread.

According to Pernice, users skip three kinds of content:

• Content in places where ads usually sit, such as the very top of the page or the right column.
• Content that looks like ads, such as moving elements.
• Content that sits next to real ads or promotions.

For the right column, she gives a number. Of one person’s 132 fixations in the content area, only one fell on the right column. The column took up 25% of the content area but got 0.8% of the attention.

Pernice also describes the “hot-potato” pattern. Users glance once at an area they consider irrelevant and avoid it afterwards. This avoidance partly carries over to other pages and even to other websites.

Proximity matters too. One person saw sponsored stories in the right column and therefore also skipped the useful videos in the same area. On phones, users sometimes take large images for ads and scroll past them.

Where you meet it in the interface

Important information that looks like an ad

An example I see often: a notice at the very top of the page, with lots of exclamation marks, that looks like a promo banner. The team builds it that way so that “everyone sees it”. Pernice’s advice is the opposite: don’t make content look like ads, and choose colour and type carefully.

The right column

According to Pernice, the right column was reserved for ads in the early years of the web. Ignoring ads is learned behaviour. That is why an account notice or delivery update you place there can be skipped too.

Auto-advancing sliders

In a 2013 article, Jakob Nielsen describes the UK home page of a home appliance maker. The panels changed every 5 seconds, and the discount offer was visible only 20% of the time.

A user looking for deals didn’t see the biggest element on the page, which was exactly that offer, and concluded there was no promotion. According to Nielsen, users assume moving content is an ad. Movement also makes things harder for people with motor impairments and people who read more slowly.

Nielsen’s recommendation is clear: a panel should only change when the person asks for it.

Live example: where is the notice?

Below is a fictional package tracking page. The same “Your package is delayed” notice sits in three different places. Choose a variant, start the task and answer the one question: has the delivery date changed?

Where is the notice

Because JavaScript is off, you only see the coloured banner variant. The task and timing work with JavaScript.

Example­ParcelShipTrackLocations

Your package is delayed!

Due to high volume, delivery moves to Saturday, November 7.

Details

Your shipment is on its way

Tracking number: EP 4821 0937

• Picked upNovember 2, 2:20 p.m.
• At the sorting centerNovember 3, 8:05 a.m.
• Out for deliveryPending

Expected delivery: Thursday, November 5

15% off the box and tape bundle

Buy now

Track your shipment with our app

Get it

ExampleParcel is a fictional company; the page, tracking number, dates and promotions are made up. The clock runs from Start task to “That’s my answer”. After the first attempt you know the answer; in further attempts, pay attention to how quickly you find the notice. This is your personal measurement, not an experiment. Nothing is stored or sent.

In the first two variants, the date in the shipment card isn’t updated; the change is only in the notice. Anyone who reads the card says “no” and waits at the door. In the third variant, the new date is in the line the person looks at anyway.

Does this contradict the von Restorff effect?

The von Restorff effect says that an element that stands out from similar ones is remembered better. Banner blindness, by contrast, says that an element that stands out too much gets overlooked. At first glance, these contradict each other.

Benway and Lane suggest an explanation. In their view, the real problem may be that the banner sits physically separate from the list of links. In their early results, a link highlighted in yellow within the list didn’t cause blindness. Participants even tended to choose it over its unhighlighted twin.

My reading: highlight within the group the person is looking at, not in a separate box. That also fits the proximity principle from the Gestalt principles.

What you can do

• Put information in its context. If the delivery date has changed, change the date line. A notice doesn’t replace the data.
• Don’t make it look like an ad. Don’t give important information the colours, exclamation marks and position of a promo banner.
• Don’t mix content and ads. Pernice advises against showing both in the same visual area.
• Repeat it in the navigation. Benway and Lane recommend that every salient item also appears in the list of links.
• Turn off auto-advance. Don’t put important information in a rotating slider.
• Test. Try it with people who are looking for exactly this information. A heatmap can show that an area is never clicked, but it doesn’t prove it isn’t seen.

The same rule applies on promo pages. A loud banner at the top of a landing page can cover up the actual offer.

My note

To me, the most expensive form of banner blindness is when your own notice isn’t seen. A delay or price change is announced in a coloured banner. The actual view keeps showing the old information.

When I consider something important, I first look for the line the person is looking at in that moment. That is where I write the information. The coloured box is the last resort.

If you want an outside check of where important information gets lost in your product, the UX Audit looks at a flow from start to finish and delivers a prioritised list of fixes.