In last month's newsletter, I talked about attention and (hopefully) proved that attention is limited to a single mental process. When we attend to something, we have to ignore or discard other things in our visual field that are not relevant to what we are trying to do. The more the task requires our attention, the more we ignore or discard. If you missed last month's newsletter, check out this video demonstrating this effect.
There is a second dimension of attention that designers need to be aware of, and that is how narrow our attentional focus is. Our field of vision associated with conscious attention is limited to something about the size of the tip of your finger. Take a look at the top of one of Escher's famous drawings of a never-ending staircase (below).
As you look across the image you know something is wrong, but you know this from memory. You can't actually "see" the contradiction in the picture. Cases of this contradiction are too far apart to see at one time.
The inability to attend to everything going on and the narrow focus of our attention lead to two related phenomenon, both of which affect interface design:
As an example of inattentional blindness in interface design, we recently evaluated a site with 32 participants, 27 of whom were experienced with the site. The main output screen was divided into three tabs. Participants saw the first tab by default. When asked about information that was located in the third tab, participants found the information in the third tab with no difficulty. However, when asked about information that was in the middle tab, only one of the 32 participants found the information.
When the middle tab was then pointed out to the participants, they did not claim that they had seen it, assumed the information they were looking for was somewhere else, and consciously chose to look elsewhere. Instead, they stated that they had not seen the tab even though it was positioned between two other tabs they had previously visited.
It's not that they never looked at the tab. They had to look at it, or at least move their eye across it. But discussions suggested that the title of this tab had so little meaning in this context that they actively discarded it from their conscious awareness.
A common example of change blindness in interface design occurs when a website link on a page takes the user from one section of the site (e.g., a tab) to another section (a different tab). Even if the change on the screen is highlighted somehow to try to show the change to the user (e.g., a tab color change), users almost universally miss this indicator and fail to realize they have jumped to a totally new section of the site. On such design, indicators are simply too far away visually for our limited attentional focus, so the change is never noticed. As a result, users lose track of where they are, how they got there, and how to get back.
This phenomenon even occurs when a link on a site opens a new site, even though changes in the banner, primary navigation, color scheme, and other visual elements appear to be obvious. Users often end up on the new website and never realize it. They will go to the Home page on the new website without realizing it's an entirely different site. And, as I discussed last month, this phenomenon is more likely to occur the more the user is focused. The mind is forced to filter out details it assumes are not relevant to the task in order to maintain its high level of focus. We call this particular phenomenon "letting the user get lost in hyperspace."
Designers need to be aware of both limitations of the user's attention (the single attentional process and the limited attention focus) and try to find ways to work within these limits. Nearly all websites could reduce these attentional issues by reducing the amount of visual complexity on individual pages.
Opening a new site in a new window that is smaller than the current window is enough to break the user's attentional focus so they realize the event that actually just happened.
Attentional issues associated with moving across a site can be addressed by providing text descriptions of what's about to happen ("More information is available in the [link] section of the site"). The reference can be formatted in a way that suggests this transition like we do in print (e.g., "See also [link]"). Both of these changes put the transition notice within the user's limited field of attention.
Of course, all interface changes intended to show transitions should be evaluated in user-based testing and adjusted as needed.
If you're interested in reading any of our other articles or seeing some of our presentations, you can visit the "Free Stuff" page on our web site.