Share

Change blindness: why people don’t see, what designer expect

Posted on


People often overlook new visual details added to an existing image. This change blindness can affect critical information such as error messages and navigation menus, leading to user confusion and task failure. Luckily, with the right visual presentation you can dramatically reduce the likelihood of change blindness.

© Jeanette Dietl – Fotolia.com

Our minds are amazingly quick and accurate at certain tasks, but consistently fail at others. Understanding what triggers success and failure is the key to creating effective interfaces. For example, studies have found that people fail to notice that the details of an image have changed.

  • Change blindness is the tendency of people to overlook alterations in images, especially when those changes appear immediately after a visual interruption such as a flickering screen.

Two different factors play a big role in the likelihood of change blindness:

  1. Interruption in our visual perception, which can occur when a page reloads, when we blink, when our eyes are quickly jumping from one fixation point to another, or when a screen display shifts as a device reorients from vertical to horizontal presentation.
  2. Speed: instantaneous changes in visual details are more likely to be masked by even brief interruptions. The blink of an eye is typically 300-400 milliseconds; change blindness has been observed when an image is interrupted for just 67 milliseconds.

Both of these factors are common in digital experiences, where visual elements regularly appear and disappear almost instantaneously. Other factors like attention and overall visual clutter also play a role in change blindness. Essentially, any time a new visual element is introduced to an existing display, it is at risk of being overlooked. For example, on the Vans.com mobile website, if a visitor selects a size that is not available, the label of the Add to Cart button changes to say Out of Stock. But this slight difference in text doesn’t stand out when the rest of the display stays the same.

Nicht auf Lager-Button von Vans.com

Vans.com: The Out of Stock message was not noticeable because it looked too much like the Add to Cart label, and was too far from where the user’s attention was focused (on the Size and Quantity fields).

Even if users find the new detail eventually, that delay will add to the overall interaction cost. There are a few specific design elements that are especially vulnerable to change blindness, and should be created with this phenomenon in mind.

Error messages and status notifications

Error messages, not surprisingly, are commonly affected by change blindness. The user has just submitted a form, the screen blinks, and 99% of the page looks exactly the same, with only the addition of a single new element. The Goodsourcing.com example below shows an error message that is vital: the Data Transfer Error notification, which informs the user that the required Job Title field has been left blank. But this information is easily overlooked, because the visual presentation blends in with the rest of the page.

Benachrichtigung von GoodSourcing.com
Benachrichtigung von GoodSourcing.com

The notification of a data transmission error has been added to the existing contents of the GoodSourcing.com registration form after reloading the website (just above the heading Members Registration) – but it can be easily overlooked because of change blindness.

Progress indicators or other status notifications whicht help users in understanding what happens in a system, are also often overlooked because they are small visual elements, which are added to an existing screen. Even animated progress indicators, such as the white circle in the middle of the Southwest Airlines app can be overlooked if they do not differ from the rest of the screen.

Fortschrittsanzeigen mit unterschiedlichem Kontrast

Left: The white animated progress indicator on the Southwest airlines app is almost impossible to distinguish even though it is placed in the exact center of the screen. Right: A similar progress indicator on Kayak.com is noticeable because it includes a contrasting background element to distinguish it from the background of the application.

Navigation rails and menus

Navigation bars or rails are also frequent victims of change blindness. These links are important but are often placed at the edges of a design, to allow users to focus on the main page content. But people are less sensitive to small changes at the edges of their visual field. The example below presents a single visual treatment for the local navigation, but with different link labels in different sections of the site. Using one navigation visual style with different links in different sections is a common and well-understood design pattern. But in this particular implementation, the unusual placement of the local navigation in the right column and the overall visual clutter of the design conspire to discourage viewers from noticing the navigation at all. Noticing that the links have changed when you move to a different page is even less likely.

sich verändernde Navigation auf rechter Seite

sich verändernde Navigation auf rechter Seite

The right-column local navigation changes on each page of this website, but is easily overlooked.

Filtered results

When users need to narrow down a large set of results, filters are incredibly useful, but tricky to implement well. People prefer a system that responds quickly, to minimize time spent waiting. But if the system changes the results instantly, people may not realize that the filter has been applied and that the results set is now smaller.

The Healthcare.gov website successfully addresses these competing needs: filters are applied as soon are they are clicked (without requiring users to take the second step of clicking an ‘apply filters’ button). But to make sure users notice that the results are changing, a prominent visual indicator flashes briefly while the filter is applied: the Please Wait message and a gray screen overlay.

 

Bitte warten-Anzeige von healthcare.gov

The Healthcare.gov website ensures that users notice when results change by displaying a prominent ‘Please Wait’ message while filters are being applied.

Combatting Change Blindness:

The circumstances that contribute to change blindness are so common that all designers should be well acquainted with techniques that can minimize the problem. Different techniques are applicable in different contexts, such as:

  • Minimize visual interruptions by avoiding page reloads where possible.
  • Use appropriate visual emphasis for significant new elements (such as contrast, size, and padding) to ensure they are noticeable. (Consider the ‘squint test’: does the new element stand out if you lean back and squint your eyes?)
  • Strategically place important new visual elements close to the point where the users’ eyes are already focused.
  • Consider animated transitions to avoid instantaneous changes that could be obscured by an interruption; animation can be effective for explaining changes in an interface.

Change blindness is just one of many psychological phenomena that affect user experience. Learn more about how cognition and perception influence UX in our full day training courses on User Behavior and Human Computer Interaction.

by Kathryn Whitenton

 

http://www.nngroup.com/articles/change-blindness/