Eye tracking heatmap of the Channel 4 homepage

Eye tracking heatmap of the Channel 4 homepage

A couple of weeks ago we carried out some Eye Tacking testing on the Channel 4 website and I posted our initial findings soon afterwards. I’d now like to talk a little about the methodology that we used.

In traditional eye tracking studies the participant is presented with a page (in the case of web testing), given a period of time to look at the page, generally 15 seconds, during which the places that their eyes look is captured. This provides some very valuable feedback in that it shows where users look first, in what order they look at things and how long they look at things for.

However, it is merely a capture of the first look, and not linked to any task. People generally come to a website for a reason – they have a goal. When we carried out our eye tracking, we blended it with qualitative testing also. We carried out the initial gaze capture, but also tacked eye movement during specific task completion.

Why mix eye tracking with task analysis?

Heatmap of the Shameless page on Channel 4

Heatmap of the Shameless page on Channel 4

We felt that to get the most out of our testing we would carry out some traditional eye tracking on some pages, but also capture gaze plots (and aggregate them into heatmaps) of task completion also.

By analysing the gazeplots and heatmaps that we got from task analysis we could understand better any issues in task completion, and using the initial eye tracking data, appropriately position information on the page based on the important tasks that users wanted to complete.

They are also very useful when looked at in parallel with our web statistics. Why users are clicking in certain areas and not in others is hard to work out from statistics alone, but with the results of our eye tracking these sort of questions are very quickly answered.

Some of the results

Gazeplot of the homepage showing numbered fixation points

Gazeplot of the homepage showing numbered fixation points

We’re still going through the data ourselves, but I thought I’d give you a little peak at the type of raw information that we get back. For example, below a video of a live gaze plot of the homepage, and on the right is the static image of the same page with numbered fixation points (the fixation point is where the eye stopped to look and the number is the order in which those fixation points were looked at).


Watch this video on youTube

I’m really excited by the rich data that we’ve got from this exercise. Happily it’s confirmed that most of the decisions that we made in the design process were good ones – but it’s also highlighted some interesting issues here and there that we are already working to fix. For example, the interaction of the Catch-Up and Spotlight pop out drawer areas on the homepage.

Users see these areas (or at least the notice the faces, even though they are faded), but they don’t instantly grasp that these areas can be clicked on to reveal more information. To fix this we are going to make these drawers expand, smoothly, when a user hovers their mouse over the area for a certain period of time. This retains the click paradigm as bringing you to a new page or page state.

So, will I always mix eye tracking with qualitative testing from now on? I don’t think it’s as clear cut as that. I think it depends at what stage during the development of a page/site that you carry out the study. Earlier in the process, eye tracking in its traditional form is completely valid for testing on static designs to make sure important elements are not missed. But I think that later in the development cycle, and after release, mixing the two provides immensely powerful and userful inforamtion.