DEV Community

Cover image for Change Blindness
ITMAGINATION
ITMAGINATION

Posted on • Originally published at itmagination.com on

Change Blindness

Designing interfaces always happens with a goal in mind, whether it’s a purchase, sending a form, or performing a calculation.

A properly designed UI may influence an outcome of a task dramatically. The way it’s built may mean the difference between failure and success. It’s because in the midst of all tasks, schedules, and to-do lists — it’s too easy to miss a change.

Were you ever in a situation where you wanted to attend a meeting on Teams that either already happened in the past, or one that is coming up in the future? If so, it might have been because you missed a change in time; especially in a situation when your calendar is frequently updated. Our senses are relentlessly bombarded by the constant waves of triggers that can overwhelm our brains.

Change blindness is you missing new visual details added to an existing canvas.

The Gorilla In The Room

Daniel Simmons & Christopher Chabris have conducted an experiment at the University of Harvard, during which they showed everybody a video.

In the video, you will see two teams playing with a ball. One is in black t-shirts, while the other team is in white t-shirts. Scientists asked participants to watch the video and count how many passes the two teams completed. Please watch the video, and let’s see if you will get the number right.

Now that you have watched the video, have you gotten the number correct? More importantly, though. Noticed anything unusual there? Maybe a gorilla? Watch the video again now.

This time, don’t count the passes. During the original study, almost half of the participants did not notice the gigantic monkey. Did you?

A Good Old Switcheroo

In another experiment, a passer-by asked a stranger for directions. During the conversation, the person asking for directions was replaced by somebody else. Yet again, almost half of the “victims” did not notice the change.

Despite our best intentions, we can only focus on one task at a time (we're looking at you, people who talk over their phones while driving).

Vans - Off The Mark

Another example of Change Blindness is the now changed mobile version of Vans’ website.
Vans's website

When a user chooses a size that is not available, the button label, saying “Add To Cart” changes to “Out Of Stock.” The difference was not visible enough, however, as the difference in text was not big enough.

In the current version, if a shoe size is not available anymore, you may see it right away, and the button to add it to cart is disabled.

What could be a factor in “change blindness”?

What we say is transformed and interpreted by our brain. To make the world comprehensible, it has to prioritize what is the most important for us to reach our goal. On the flip side, it filters out anything that is unnecessary for us.

Any pauses in our perception, such as when a website loads, or when we blink, will most likely not get picked up. Sadly, even the best designed communication, be it on buttons or progress bars, if noticed by your user, might mislead them.

If we want to support your users in reaching their goals, you have to remember a few things.

How can you design better interfaces?

Changes need to be signaled clearly

If we filter data too fast, the person on the other end might not notice the change. It is therefore necessary to appropriately accentuate the shift with the right alert that something happened, or that something is about to happen.

Take a look at a notification you get when your phone battery is low. It is close to impossible to miss it, and probably after getting it, you started to frantically look for your charger.
An graphic showing an alert saying "Low battery" "20% battery remaining"

There is a good rule of thumb — your change will likely picked up if you will be able to notice it even if you lean back and squint your eyes.

The right positioning

A good practice is to design your interface to place key information close to the place where your users might be working on their task.

For example. when somebody is filling out a form, make sure to display feedback right next to the place where somebody is editing data.
A graphic showing a personal info form with errors below the text inputs

Animations

Animated icons or feedback after an action moves somebody’s sight to the place where it is required. Thanks to that, any alterations will not go unnoticed.

Remember not to overload your app with animations because there is a risk that a key shift will be missed among the chaos.

In conclusion, remember that your users need clear communication when something changes on a page, especially if this is a critical alert. The ways you can avoid change blindness are through clear signals, good positioning of those signals, and animating this signals when appropriate to make sure that there is a clear change happening for the user.

You can take a deeper dive into Change Blindness in this piece published by the Nielsen Norman Group and by checking out the dangers of change blindness in other cases like driving for example and how we are overly confident in our abilities to track and respond to changes.

Top comments (0)