Eye-tracking Your Website: 4 Tools and 7 Tips

Eye-tracking reveals the way users see your website. It is one of the best devices in the neuromarketer’s toolbox. For years, eye-tracking wasn’t cost-effective for regular businesses. Those days are over now.

Through an eye-tracking test, you can check how your website’s visitors perceive it: Where do they focus their eyes, when do their pupils dilate, and what makes them blink? Heat maps are used to make the measured data transparent.

Before I tell you how you can run these tests yourself, let me give you some background on the topic.

Eye-tracking was first developed to study the way people read. In 1908 psychologist Edmund Huey built the first eye-tracker. It comprised of a sort of contact lens with a hole for the pupil. The lens was connected to an aluminum pointer that moved in response to the movement of the eye.

As the devices became more sophisticated and comfortable, eye-tracking technologies generated a great deal of interest in other fields. Marketing is a case in point. Many magazines, television commercials, and – more recently – websites have been tested by a sample of consumers while a device was used to record the activity of the eye.

Eye-tracking research is especially helpful for determining website usability. User interaction between mouse clicks can be analyzed, as well as how much time a user spends between clicks. This provides insight into which website features are the most eye-catching, which items are ignored and which features cause confusion.

Traditional eye-tracking tests are expensive and cost a lot of working time. Volunteers or employees have to be invited to a testing environment, in which they wear an eye-tracking device. In most instances video-based eye-trackers are used, where a camera focuses on one or both eyes and records eye movement as the viewer looks at the website in question.

Fortunately, technological developments have made all the hassle unnecessary. Free or cost-effective tools make the testing process almost frictionless. Below I describe 4 great examples of digital eye-tracking tools that prevent great investments in devices or services.

As an aside, some of these tools are not strictly eye-tracking tools, because they track mouse movements or give an estimation based on intelligent software; the functionality is similar, though.

1. Hotjar

Hotjar analyzes the behavior of your website’s visitors in detail. This is accomplished by collecting information about their scroll behavior, click behavior and mouse movements. The results are visualized as heat maps: graphical representations of data where the values are represented as colors.

The great thing is,you don’t have to perform a separate test. All your users collaborate in optimizing your website. 

2. OGAMA

OGAMA is freeware to record gaze and mouse movements in screen based environments. You can use this tool to record gaze data recorded with a web cam, but you have to modify it to be infrared ready.

After the data has been recorded, it is analysed and visualized. Heat maps depict areas of interest, fixations and the measure of attention superimposed over the images that have been tested. 

3. Feng-GUI

With Feng-GUI you don’t need human testing subjects. Through artificial intelligence, the program simulates human vision and creates measurement reports that predict what a real human would be most likely to look at.

A fascinating feature is the Gaze Plot report, also referred to as a scanpath report. Visualizing a series of short stops (called fixations) and fast movements of the eye (called saccades), it represents the scan paths inside the image that are likely to occur among human website visitors. 

4. RealEye

RealEye offers testing as an internet service. They claim to have a network of 20,000+ panel testers available.

You can upload any image files or website URLs, and get results from 20 testers within 8 hours. These studies are accessible through a shareable dashboard, with results presented on playable heat maps.

Chances are, you are so enthusiastic now that you want to run your first test immediately. To be really successful, however, you have to know how to interpret the results properly. And what about the subsequent steps? Therefore, I want to give some practical advice:

1. Don’t state the obvious. Pictures, titles, buttons and other high contrast elements always score high in eye-tracking tests, so you have to dive deeper into the data to draw interesting conclusions.
2. You do not do this test as a scientist, but as a marketer. That means, that you only have to test what has an impact on your business. For example, you don’t have to examine everyone, but only your target groups.
3. The fact that test subjects know that their behavior is being monitored influences the outcome. This reinforces, among other things, socially desirable behavior. Be aware of this.

4. The resulting heat maps are subject to interpretation. Here are some pressing questions to ask yourself: Do users look at a certain point in the screen because there is something interesting to see or because the structure of the page forces them to do so? Are test subjects consciously looking at a part of the screen or are they just resting their gaze? Do they look at a menu for so long because it is interesting or because they do not understand it? Heat maps always have to be supplemented with other data. This leads me to the next tip:
5. Refine your conclusions by combining eye-tracking with A/B testing, other data at your disposal or a qualitative usability test.
6. Involve the developers of your website in your experiments. If they do not have time to actually do something with your conclusions, it was all for nothing. So, talk to them, and don’t wait until the last moment.
7. Keep repeating the tests. The World Wide Web is evolving rapidly, as are the devices consumers use to access it. To stay ahead of the curve, I recommend testing all aspects of your website every 6 months, or even more often.