In Psychology, there is a phenomenon called change blindness and it explains why your users don’t see what you think they actually should see.
Our visual environment changes all the time. It is important that we notice these changes. For example, it allows us to react to potential dangers like moving away from something dangerous and in general, to make sense of the world around us. However, our perceptual system does not always respond to changes in our environment in an appropriate way.
Look around you. You might think you are seeing the world in all its completeness and think you have a strong impression of seeing a detailed picture of your environment. Probably, as a result, you are also absolutely confident that you would detect any larger changes in this environment.
But as many studies have shown, people often fail to detect changes to a visual scene. Try yourself:
This test might have taught you: our ability to detect visual changes is often overestimated by us and far less than we actually think.
The phenomenon of change blindness is defined as „the failure to notice an obvious change” (Jensen et al., 2011).
To detect changes in a visual scene, many complex processes like e.g memory are required. Actually, there are five (!) separate processes involved for change detection to occur (Jensen et al., 2011). First, initial attention is required to the location the change will happen. Second, the visual stimulus must be encoded to memory before the change. Third, the visual stimulus must be encoded to memory after the change. Forth, the pre-change and post-change representations of the visual stimulus must be compared. And fifth, the differences of the before and after state must happen on the conscious level.
As we see, the processing is quite complex.
The following two factors can be responsible to cause change blindness:
- Not paying initial attention to the concerned detail/item, because it may not seem relevant to us within the context: We tend to direct our attention to items which may be relevant to us or contain important information. For example, it might happen that we simply do not detect any change of a visual scene because we simply do not direct our attention to it as it may not be relevant to us depending on the situational context or our attention is simply distracted by something else. Also, personal goals and motivations might play a role. In addition, visual clutter can influence where we direct our attention to as well because often, as a result, one can not differentiate between the relevant and not so relevant items which are very similar to the distraction mentioned previously.
- We did not fixate the concerned item/detail BEFORE the change (see Hollingworth & Henderson’s 2002 study on that) because perhaps we were interrupted, distracted or we simply we blinked – or the page reloads.
The relevance of change blindness for design:
As we are using digital products, visual elements constantly appear and disappear, so, these factors are very relevant for design.
See this example:
In the example above filters are applied as soon are they are clicked. If a visitor selects a filter item the other items will directly change their status to disabled and turn instantly into a lighter gray. But this visual difference is too slight / and the animation of the color change is too weak compared to the distraction caused by the „strong/bold“ animation in the background – so the probability that one will overlook this slight change is quite high. What is happening here? First, animations can be very effective for explaining changes in an interface but in this case, during the selection, the eye fixation is on the selected item but the attention is instantly driven away by the „stronger“ animation happening in the background, not noticing the much weaker animation of color/status change. In addition, the element which has changed its status to „disabled“ looks too similar to the previous status („enabled“). The effect that this status change might be overlooked is also enhanced by driving the focus away from it so there was no real chance to fixate the elements consciously BEFORE the change.
Error messages or system notifications are another good examples as illustrated in the video below because sometimes those notifications are overlooked depending on where they are placed. For example, this also often happens when you fill out a form, something went wrong with it and the concerning notification of what happened will not show up in the area of your attention.
As a result, your visitors could feel somehow “stupid” and frustrated and these feelings may also cause implicit negative emotions associated with the product and brand, which should be avoided as the goal should be to maximize the association of positive feelings with the product/ brand.
So what can we as designers do to prevent change blindness?
- Place visual items close to the point of fixation, e.g if I did something wrong, place the system notification to where my eyes are already focused not somewhere on the screen, far away from where my focus is.
- Emphasize new or changed visual items so they appear strong enough which may minimize the chance they will be overlooked. Make it „pop-out“ of the rest of the visual scene to make sure it will be noticed.
- Avoid or minimize any kind of visual interruptions during a status change or when introducing new elements, like, for example, two animations happening the same time or page reloads during a status change. If there are two animations happening at the same time (like in the example above), make sure the one the visitors should focus on is somehow „stronger“ (see pop-out principle) and does not compete with the other animation. In the best case, avoid two animations happening at exactly the same time.
Hollingworth, A. & Henderson, J.M. (2002). Accurate visual memory for previously attended objects in natural scenes. Journal of Experimental Psychology: Human Perception & Performance, 28, 113–136.