How can people overlook something that's right there on the screen? If you've ever observed a usability study, you've probably had many occasions to ask yourself this question.
Users don't look around much. They often stay highly focused on the screen section that they're engaging with or that they assume contains the answer to their problem.
We saw a clear example of this user tunnel vision in Australia earlier this month, when we tested users in Sydney on the corporate website of Westfield, a retail property developer. One user was trying to find out when Westfield entered the U.K. market and carefully stepped through the timeline in the company's history section.
Westfield was reasonably compliant with guidelines for presenting a corporation's image on the Web in an "About Us" area, and the user had little trouble finding relevant information. Each event in the company's history was shown in a lightbox-style pop-up. Although this was perhaps an overly aggressive design choice, it certainly worked. Users easily navigated the timeline by clicking the various controls (which I'm not showing here, because they don't matter for the topic at hand).
Timeline entry as tested:
Strong tunnel vision prevented the user from noticing the year at the top of the pop-up.
Each entry was nicely designed, with the year, an attractive photo, a reasonably well-written headline, and a short summary of that year's major events.
(To pick nits, don't start a headline with a company's name on that company's own website. Most stories on a corporate site are presumably about the company, so it's better to reserve the crucial first 2 words for keywords that carry more information.)
The answer to the user's problem — the year Westfield entered the U.K. — seems quite prominent in this design: "2000" sits in the upper left of the box in a larger font size than the other information.
And? The design didn't work. The user read through the entire body text before finding the year in the last line. She didn't see the year at the upper left. Tunnel vision, as stated.
Put Related Items Next to Each Other
The solution to tunnel vision usability problems is to position related items close together. Here's a quick example of how this might be done in our example:
Alternative design (not tested) positions the most important information within the user's likely field of vision.
This design is also better for accessibility. Low-vision users who employ a screen magnifier to blow up a small section of the screen are much more likely to understand the information when it's all in one place.
Selective Attention
The tunnel vision example from this latest study is just one in a pile of thousands we've observed in recent years. We've recorded countless other examples in the category of banner blindness alone.
Selective attention is really a survival instinct; if people had to pay attention to all stimuli in the environment, they'd never get anything done. They'd also be more likely to overlook something important, such as a big-toothed predator sneaking up on them.
It's only human: focus on a few things and ignore the rest.
Web page designers don't have the same problem. They know which information is important — in our example, the year — and thus focus on it when analyzing the layout.
This is why you should test with real users.
