Web Design Tip: Avoid Banner Blindness

There was a power outage at the University of Washington this morning. I knew about it because I got a text and an email. (I’ve signed up for both alerts.) However, when I dutifully went to the campus homepage for details, initially I could not see the alert!

In instances like this, I’ve trained myself (most of the time) to stop and analyze what I’m doing. Why can’t I find the information that I’m seeking? I’ve annotated my eye movements in this screen capture:

1. I visit the home page occasionally and am familiar with the design. My eye went immediately to the content section, the “white space” below the top-heavy (dark) navigation area. This is where most content lives on most web pages. [We’ll leave the content-to-navigation ratio for this page (think Edward Tufte) for another day.]
2. Then my eye bounced up to the featured content section. Again, I’m staying below the large (and heavy, because it’s dark) branding/navigation block.
3. I can’t explain why my eye darted left to the “quick links” – but that’s my conscious memory of my path.
4. I moved up to the big purple block. Still nothing.
5. Finally, I moved to the very top – to banner ad territory – and found the alert.

What’s always fascinating to me is this: when I take a screen capture in order to deconstruct what happened in a session like this, whatever I am looking for almost always seems obvious! It was no different in this instance.

But the fact is that I would not have “seen” this alert had I not been looking for it. Why? I think the answer is banner blindness.

Banner blindness is not new. We’ve known for a long time that people tend to ignore navigation tools. From 1999, here’s Don Norman (my guru):

Benway and Lane showed that if something is too obvious, too big, too powerful, it is overlooked (a point already noted by Conan Doyle’s Sherlock Holmes, by the way). What Benway and Lane found was this. Suppose a designer wants to make sure that people browsing a site can find “important-information.” The designer carefully makes the link to “important-information” big, bold, colorful. Nobody could possibly miss it. Lo and behold, Benway and Lane showed, it was the rare individual who noticed that this bold and salient banner contained the information being sought.

[…]

I go to a web page to look for a link to “important-information.” My first task is a meta-search: I must discover where to look, where to focus my attention. Do I want a link? I must look in link-like places. Web pages are now a reasonably established genre… All other places are ignored, for they are unlikely to have lists of links. This behavior comes under many names in cognition: frames, schemas, scripts. But all point to the same point: people use their deep understanding of the situation or the genre to guide their search. When I lose my glasses, I do not look on the ceiling: I look on the floor, or the cabinet top. So too is it with links — I do not “look” at that big banner glaring at me — that doesn’t fit the link-positioning structure of my web-page schema. So I scroll past it and focus on regions that fit the schema.

Norman’s theory explains my behavior. I was looking for content, so my eye went first to the “content section” of the page. Having the content that I was looking for live “on the ceiling” so to speak — where ads generally reside — meant that it was hidden to me, no matter its color or icon.

Jakob Nielson wrote about this in 2007 (Fancy Formatting, Fancy Words = Looks Like A Promotion = Ignored). And Jared Spool has noted that horizontal rules block eye movement. In other words, the heavy purple navigation block may also impede eye movement upward.

Finally, the only link to the details about the power outage is “more info” — which is probably the worst possible link text imaginable. Jared’s research suggests that (1) good links contain 7-12 words and (2) the words are “triggers” to the content.

Designers: please take these lessons to heart, especially when you are trying to communicate essential information. Put the information where people expect it, in your content area! If you feel you must jazz it up somehow, make that a secondary route, not the only one.

Parenthetical observation: I really must finish getting my old TFM columns up on this site!