4 lessons thanks to eye-tracking

What is eye-tracking?

Eye tracking measures the gaze a person is looking at or the movement of an eye relative to the head. They use a specific device (eye tracker) that can measure eye positions and eye movements. Eye-tracking is used in psychology, marketing, in product design, etc.

The results of eye-tracking studies are usually visualised in heatmaps. These indicate the ‘hot’ areas or higher-density zones where users focused their gaze with higher frequency. Heatmaps are the best-known visualisation technique for eye-tracking surveys.

Eye-tracking studies and the accompanying heatmaps have already revealed many surprising insights. Below are the preliminary findings of four unmissable eye-tracking studies.

1) Show the original price next to the promo price

Eye-tracking is often used to optimise websites and web shops. But it has also proven its added value in e.g. store visits.

For example, an interesting study investigated whether customers in a supermarket use the original price to evaluate the new promo price.

In an attempt to answer this question, they conducted a test that examined how people look at prices and products on shelves.

There were no surprising results from the first test. Most customers spent time looking at prices and product packaging.

But what if the original price was next to the promo price, would people look at it?

Most definitely! Indeed, the study also tested perceptions of the sale price to see if viewing the original price played a role.

After consumers selected the product of their choice, they were asked about the value for money on a 7-point scale (with 1 = very good value for money and 7 = poor value for money).

Consumers who saw the promo price next to the original price gave an average of 2.4. Customers who only saw the promo price gave it a 1.7 even though they bought the same item!

In short, people are pretty bad at evaluating prices without contextual clues. We find it much easier to make decisions when we have something to base them on. This is perfectly in line with the anchor effect. For example, an € 83.99 product becomes much more attractive if it is announced as € 83.99 € 159.99. We use the initial (high) price as an anchor. People often see a sale price as a better value if they can see what they are really saving. Without that contextual clue, the sale price is difficult to assess. After all, one does not know what the product is usually sold for and thus what it is “really worth.”

2) Use the power of the human gaze

People have a natural tendency to follow the gaze of others. Take a look at the following eye-tracking study of an infant skin care page.

The baby’s face clearly attracts a lot of attention. Unfortunately, this is a marketing problem. After all, the text gets too little attention.

The study used another picture of the same baby, with the difference that the baby was now looking at the text itself.

As you can see from the eye-tracking patterns (image below), users initially focused on the baby’s face (from the side) and then immediately followed the baby’s line of sight to the title and opening text. Even the text part where the baby’s chin pointed was read more!

Whether we are talking about websites or magazine ads, for example, images play a very important role in their design. Most designs can be optimised by using images that can give a visual push towards what really matters. You can perfectly couple this visual cueing with other powerful psychological principles, such as nudging, social proof, the scarcity principle, our aversion to loss and the framing effect, authority principle, etc.

3) Take into account how people scan web pages

A lot of studies show that people scan Web pages in an F-shaped pattern, and this both on Web sites, Web shops and in search results from search engines such as Google.

The F-shaped pattern

The heatmaps clearly show the concentration of glances (or “fixations”) on the top and left sides of the page.

• Users first read in a horizontal motion, usually over the upper part of the content area.
• Users then move down the page a bit and then read in a second horizontal movement that usually covers a shorter area than the previous movement.
• Finally, users scan the left side of the content in a vertical motion. Sometimes this is a slow and systematic scan that appears as a continuous line on an eye-tracking heat map. Other times, users go through it a little faster, creating a slightly more mottled heatmap.

Lessons learned:

• The first lines of text on a page get more looks than subsequent lines of text on the same page.
• The first few words on the left-hand side of each line of text get more looks than subsequent words on the same line.
• People are more likely to scan a web page than read it. Make sure your pages respond accordingly. How to do this concretely, you will learn in our workshops.

Note: These studies were conducted with English-speaking (and reading) participants. The opposite was true of languages read from right to left.

4) Don’t necessarily put everything at the top of your web page

In web design, people talk about the “above the fold” section and the “below the fold” section. The image below clarifies this.

The area above the fold is everything that is visible when you open a road page without scrolling. The things that only appear when you scroll down are called below the fold.

It is often assumed that the area above the fold is the only place users will look. But this is a complete myth.

This eye-tracking study shows, e.g., that there is a strong hotspot on the slider on the right side of the screen. The scroll bar is used to assess page length, and users therefore expect to have to scroll. The heatmap below shows this.

The same study further shows that less content “above the fold” can lead to more attention “below the fold.” The image below demonstrates this. On the left and right, you can see heatmaps of two different designs of the large image area at the top of the page. The surprising thing was that having less content above the fold (one large content block instead of 2 smaller ones) led to more exploration below the fold.

Note that the importance of the “fold” should not be underestimated. A lot depends on the design of the page and whether you want to encourage the visitor to read further. There are many design tricks to encourage visitors to scroll down. Designers who create engaging long web pages are aware of this: they know how to create a page that encourages users to scroll. They prioritise design & content that leads the user down the page, content that is worth the extra effort.

Wondering how to translate these eye-tracking findings to your marketing?

At BDDB, we specialize in applying evidence-based techniques & insights through interactive workshops & consultancy & advice.

Know more?