Tag Archives: #heatmap

How Change Blindness Affects User Perception of Websites

We tend to like to think that we are aware of everything going on around us; after all, we are conscious human beings, and we notice changes to our surroundings, right?

Well, not exactly.

In this post, we’ll look at a phenomenon of human consciousness that is subtly affecting the way we actually see the world – and the way in which users look at your website.

Let’s start by taking part in a quick experiment in the video below (and make sure to watch it in full screen!):

Experiments like the one above work like magic tricks, cleverly masking the changes that occur during the switch between what are in fact two quite different images.

Chances are, once you noticed the alterations to the webpage, they became almost impossible to stop staring at. What you just experienced is a phenomenon called change blindness: in order to notice the (not so) subtle alterations to our environment, our attention has to be consciously drawn to them.

What is Change Blindness?

Change blindness occurs when a change in visual stimuli goes unnoticed, especially if our visual attention is not focused directly on the change.

To give you a better idea of what we mean, take a look at this video by NOVA :

Change blindness pops up all over the place. In Luis Bunuel’s seminal 1977 film Cet Obscur Objet du Désir, two actresses were cast in the place of one, symbolically showing that the male protagonist could not understand “the true nature of his lover”. When the film first screened, many viewers (including this article’s author, truth be told) simply didn’t initially notice that the role of the intriguing Spanish vixen was played by two entirely different people.

Why Does Change Blindness Occur?

So far, scientists don’t know precisely why change blindness occurs, but they do have preliminary explanations and know that it carries certain implications:

Change blindness occurs when a change in our visual field is not consciously “attended” to; our eyes are not expecting the change, so they don’t process it.

Visual perception occurs on a two-fold level: First, the optic nerve transfers information about a physical (rather than emotional) change to the visual cortex at the back of the brain. Very soon after this information reaches the visual cortex (for lack of a better theory) subjectivity emerges. Your brain must decide, for example, if it’s seen a change in what it’s looking at, or if it is mistaken. In other words, the real mystery of the way we see things is to build a bridge between the information that the visual system gives to the brain, and how the brain transforms this information into experience.

Kevin O’Regan, visionary neuroscience philosopher at the Centre National de Recherche Scientifique in Paris, explains the phenomenon this way:

“Perhaps the most natural view to take is to suppose that what we have the subjective impression of seeing is not the very sparse, more semantically coded, content of visual memory, but the content of a shorter-lived but higher quality, image-like replica or “icon” of the visual scene. The impression of richness that we have from the world would derive from this high-quality icon. On the other hand, only a small portion of the icon’s contents, namely the parts that have been attended to, would at any moment be transferred into memory and be available for doing tasks like change detection — the rest would be forgotten. This view of visual processing has been called “inattentional amnesia” (Wolfe [1999]): the idea is that we see everything, but forget most of it immediately.”

How Change Blindness Affects Landing Page Optimization

Just as in everyday situations, change blindness plays a role in the way we look at and understand websites. We may think that we are aware of all available information when we arrive on a web page, but the simple fact of the matter is that our brains can only take in so much at once.

In general, there are 3 key lessons to be learnt from how change blindness influences the way users look at your website:

1. Content and design elements you think are important may go unnoticed by users

Back in 2010, UX magazine posted a brief article alerting UX professionals to the role of change blindness in UX; “What are we failing to capture when observing people using the products we design?”, queried the author.

When optimizing a website, everyone involved makes hypotheses about what needs to change on a page; perhaps it’s the copy, a button colour, or a background pattern. Coming up with testing ideas is often based on intuition and experience, but even an experienced designer or optimization expert is likely to miss key problems. In fact, a study from the University of Copenhagen showed that experienced web designers could only predict how a user would view a website with just 46% accuracy.

Predictive eye-tracking does an excellent job of solving this problem by removing subjectivity from the testing equation. Heatmaps and other visualizations show what users will initially see based on finely tuned algorithms and years of research – not subjective opinion.

2. Changing One Design Element Affects Everything Around It

Remember the Amazon landing page experiment you conducted beginning of this post? Here are two EyeQuant Perception Maps (before and after the changes) of the Amazon.com homepage featured in the video, predicting what users will see within the first few seconds of arriving on the page:


While three main areas of visual attention remain the same, the illuminated region to the far right changes dramatically with a simple change to the “best sellers” content on the bottom right, from mens’ sandals to beanies and hoodies. Suddenly, attention is pulled away from the grey box entitled “Watch Your Favourite Movies in HD Instantly”, and drawn downward. This is not because users are reacting more emotionally to beanies and hoodies than sandals, but simply because the former produces a larger block of dark colour, thus more easily drawing our eyes toward it.


Herein lies the crux of this lesson: When testing design and content changes on a website, we tend to focus on a single element at a time, such as the colour of a CTA button or the size of a headline; however, the circumstances of change blindness (and the results of an EyeQuant test) show us that small changes to one element also change the way a user looks at anything around that element as well.

When tweaking design elements, it’s crucial to consider not just the attributes of a single element, but how it will alter a user’s gaze on the entire page. Will enlarging the headline draw user attention away from the product image on its left? Will moving the CTA from centre-right to dead-centre draw attention away from the core benefits? The best way to find out is to test, tweak, and re-test until you find the winning combination.

3. We humans aren’t very good at noticing details. If you want an element on your web page to be paid attention to, it needs to stick out right away.

We’ve said it once, and we’ll say it again: If you want potential customers to click something, read something, or buy something…

 

…You have to draw their attention toward it.

Users won’t perceive existing elements or even substantial webpage changes – even if they are right in front of their eyes. So, how do you draw their attention to the regions of a web page you want them to focus on? Try these steps:

  • Test your website with EyeQuant to see what users see when they first arrive, and what they miss. If the most important content on your site is not visible in the perception map or attention (heat) map, then you have some work to do.

  • Instead of just focusing on single elements – like the placement, size, or colour of your CTA – consider tweaking the areas that surround it. Dull or alter the background colour, adjust the size of surrounding copy, or make some room around your most important elements.

  • Plug your changes into Eyequant, test, rinse, repeat, and optimize.

For a little inspiration, take a look at EyeQuant customer and conversion experts WHOLEGRAINdigital’s optimization process:

To learn more on this fascinating facet of human consciousness and how scientists are studying it, take a look at this this seminal paper by Simons and Rensink, or this talk by pioneer of the science of consciousness (and EyeQuant Scientific Advisory board member) Christof Koch, speaking about the brain, consciousness, and even change blindness:

cta

Deconstructing a 56% Conversion Lift at Big Contacts

Image

Big Contacts – a web-based CRM targeting small and mid-range businesses – are smiling, and no, it’s not just because Spring has finally arrived.

Digital agency Surge Labs published a case study last November showing how they achieved a 56% conversion boost in sign-ups on Big Contacts’ landing page. Especially in a competitive field like CRM, this uplift represents a significant achievement. Here at EyeQuant, we always love a good success story, so we thought we would analyze this one through our own lens.

Here is Version A of Big Contacts’ website. For all intents and purposes, it’s probably not the worst web page you’ve ever seen, which is precisely why it becomes much more fun to analyze.

Image

Surge Labs hypothesized that, in order to better capture potential customers’ attention in such a competitive field, Big Contacts would need to eliminate clutter and focus on one key design strategy: Clarity.

They would achieve this by:

  • Creating white space
  • Focussing on only one call-to-action
  • Improving the user’s navigational path with better organization

Now take a look at the perception maps of the EyeQuant analysis of Version A below:

Image

The value proposition is clearly the element on the page that needs the most work; we can see what the software looks like, but we aren’t immediately aware of the core benefits it offers us. More importantly, perhaps Big Contacts’ greatest benefit – its affordable plans starting at $15 per month –  isn’t even on the page.

Version B of Big Contacts’ landing page corrects these problems beautifully.

Let’s take a look why:

Image

Organization & Flow:

Big Contacts’ value propositions are now clearly lined up in vertical bullet-point form, ending with a big orange CTA button. The improvements to the user’s navigational path are clear, and can once again be immediately gauged using EyeQuant’s perception map:

Image

Now, isn’t that a thing of beauty? 

Not only are the four bullet points immediately visible as the user’s gaze makes its way from the headline to the CTA, but the navigational path also calmly makes stops at an image of the software and an attractive price tag.

The best part? The logo, the headline, the core benefits, the price, and the CTA, are now visible within the first few seconds of a user’s visit to this landing page. Even visual information about the company’s social media presence and its syncing abilities are visible. Impressive.

Colour Consistency:

Surge Labs made an excellent use of colour in Version B of this landing page by choosing consistent three colours to draw attention to urgent information:

  • white for text
  • warm, bright orange for the CTA
  • warm, bright green to highlight the core benefits.
  • Cool blue as a background block colour.

These three colours are set off brilliantly by a cool blue background in which all the most important “above the fold” information is situated.

Most importantly, the use of colour choices is consistent and logical. While in Version A the user had to decipher between two text colours (blue and white), Version B’s text is all white, removing the need for the user to process any unnecessary aesthetic changes. The same could be said for the flashes of green next to the core benefits: by establishing bright green as a color associated with core benefits, the user is able to make instant connections between the price all the way on the far left, and the bulleted core benefits in the mid right.

Grouping Important Information with Colour: 

While too much variation in colour can be distracting to a user’s initial attention, here it has been well implemented. In Version A, a user had to leave the comfortable blue box and choose between one of two CTA’s, creating a visual barrier between the description of the product and its call-to-action.

In Version B, the user’s focus can remain almost entirely in the blue box – it immediately indicates that the user is in a zone that contains important information. 

In previous EyeQuant blogs, we’ve discussed the importance of clarity in creating a visually calm, easy-to-navigate landing page. Digital Surge’s work with Big Contacts is an excellent testament to this strategy. Bravo!

Key Takeaways:

  • Flow: When re-thinking a website, considering how the user’s gaze will flow across the page when they first arrive is crucial. Does the page create hurdles or obstacles around the user connecting important information? If so, there’s room for improvement.
  • Colour Consistency: It’s not enough just to know that an orange button will pop out, colour can be used to produce consistent visual cues, linking different kinds of information.
  • Grouping with Colour: Big Contact’s winning version draws a big blue box around its most crucial information, putting the viewer at ease by re-assuring them that everything they need to find will be in this one, confined area.