7 things we have learnt from eye-tracking

August 11, 2016 2:18 pm

7 things we have learnt from eye-tracking

In our role as User Experience Practitioners, we know a lot about the advantages of using eye-tracking in usability research, but we are always learning.

This article covers a few of the things we have observed during our usability research using eye-tracking and shows just a few of the benefits that eye-tracking can bring to your user research.

1. Making things bigger and bolder doesn’t always work

You may have been to usability sessions and heard users say things like “Oh, I didn’t see that. If it was bigger I’d probably have noticed it.”, or you may have heard “It just needs to be bigger and bolder, make it flashy!” While feedback is useful, it’s important to remember that ultimately what people say they do, or what they say will influence them may not be true when they actually sit in front of a website. Feedback like this is opinion based, and shouldn’t be taken literally.

Figure 1: This eye-tracking shows how the user missed the large banner at the top of the page, and instead was drawn to the content underneath.

Instead, listen to the users’ feedback and consider it in context to what the observed behaviour shows. While users may say that making something bigger and bolder would grab their attention, our specialist eye-tracking has revealed, that this isn’t always the case. Sometimes it takes re-thinking the position or content of a call to action to get your users to engage with it, it doesn’t have to be a flashing neon sign.

2. Consider how buttons display visual hierarchy

While you may wish to try and incorporate company colours as much as possible on a website, it is important to consider the consequences of these actions.

Figure 2: This eye-tracking shows how this user’s attention was drawn more to the button which looked active and bypassed the button which did not look clickable.

Luke Wroblewski explains that visual hierarchy helps create a sense of order, and establishes a pattern of movement for users through a website. If the colour of a button makes it appear more significant than another button placed nearby, do not be surprised if users are drawn to select this button, and completely bypass the desired call to action. Through our experience using eye-tracking, we have found that users are drawn to buttons due to their size and colour; therefore it is vital to display the hierarchy of buttons to help guide users down the journey they want to make.

3. The importance of the page fold

Making sure content is visible above the page fold will encourage users to scroll down the page and read it. Research carried out by Google found that advertisements just above the fold had 73% viewability, whereas ads below the fold had 44% viewability, with viewability defined as 50% of the ad’s pixels being on-screen for one second.

Figure 3: This eye-tracking shows user is drawn to content above the fold but is not drawn to content below the fold.

In our work using eye-tracking technology, we have observed users fail to scroll down the page to view the content below as there was no indication on the page that more content was available. To avoid this issue, consider showing a hint of what is below the page above the fold, so users can see that more content is available if they scroll down. It’s also important to remember that users only scroll for a purpose, so by prioritising the content above the fold, users will not need to scroll down the page, and therefore do not risk missing out on important information.

4. Users don’t read content in depth, so think about how you display it

When first coming onto a website, the majority of users scan the page looking for the content they want. Research from Nielsen Norman has found that 79% of users initially scan a webpage they come across, with only 16% taking the time to read word-by-word.

Due to this, websites have to employ scannable text methods, which can include highlighting keywords, using sub-headers, and bullet-pointed lists. Our work with eye-tracking has shown that well laid out pages, with sub-headers and paragraphs, help users skim the page to find the content they want and are thus less likely to leave the page without the information they were looking for.

5. Eye-tracking helps show user confusion

Eye-tracking is particularly good at indicating when a user has become confused. If you have ever observed your users looking back and forth between a few things on your website, then this could indicate that there is something on that page that confuses them.

Figure 5: This eye tracking shows the user’s gaze bouncing around between different elements indicating they are confused about how to move forward

Here at SimpleUsability, you get the chance to observe users behaviour naturally when using your website, and then in the retrospective interview, their eye-tracking is overlaid onto a video which shows the steps they took on your website. We have found that conducting the interview retrospectively elicits more information from participants, and that showing the eye-tracking footage acts as a prompt on the subconscious helping participants remember issues they encountered on the website. Research from Tobii Technology has proven that the use of a retrospective interview after all tasks are completed, complete with playback of the participants eye-movements overlaid on a video showing their steps has proven to be the most successful way to elicit information from participants.

6. Be careful where you display contextual help

From our experience in usability testing, we’re aware that users sometimes struggle to fill in forms correctly. Maybe they didn’t understand what information was needed in the field and entered something which was not recognised, or in the wrong format. Contextual help is sometimes used as a solution for when a form may require a certain format when entering a field – such as when a date of birth is required and does not give the option to select it from a calendar.

Figure 6: This eye-tracking shows how the user was drawn to look at the field but did not notice the contextual help at the side.

However, our work using eye-tracking shows that contextual help doesn’t always help the user. It is important to consider where contextual help is positioned within the form, as if the help is positioned too far away from the form field, users may struggle to identify the help, and sometimes miss the help altogether. Providing contextual help for your users is excellent, but remember to consider where this help is positioned on your website, and how it can be accessed.

7. Keep it clean

Sometimes keeping things simple really is the best way to help your users’ progress through your website. If your website involves the user moving through various stages to reach their goal, it may be best to separate those different stages as much as possible.

Figure 7: The eye-tracking shows how the user was able to progress through the website quickly, as there were no distractions on the page and they could focus on the task at hand.

Through our work with eye-tracking, we have found that users find things much simpler when the journey through the website is broken into manageable chunks. This could mean presenting one question at a time, and removing any distracting information so that users can focus on completing the task at hand.


In conclusion, eye-tracking is a big benefit to usability testing because it shows you when users are confused, don’t notice things, and misunderstand things. Eye-tracking is a reliable way to understand how your users interact with your website, app or interface. It helps you learn what is attracting users’ attention and what they are ignoring, struggling to find, or what is distracting them in their journey. Eye-tracking produces objective, quantifiable results, which can help you improve your website for your users.