Website Eye Tracking On The Cheap

Reading time: Approximately 4 minutes

What is Eye Tracking?

Eye tracking in terms that we’re interested in is tracking eye movements as a user views a webpage. It tells you where the eye focuses before skipping and refocusing on another part of the page.

Why Bother?

There are heaps of reasons to be interested in this, but the main attraction is the fact you get to know where on your page your visitors are focusing and for what potential reasons.

There might be specific images that are drawing people’s eyes – faces, text, whatever it may be. This is incredibly valuable information that can help you tune how people view your page and what they do when they focus on the right parts.

Eye tracking gives you the opportunity to direct your user’s eye in a way that suits you.

Feng-GUI

I recently stumbled upon a really cool tool called Feng-GUI.

Basically it’s a free tool that allows simulates the first 5 seconds of exposure to any image you upload for eye tracking. I’m not sure about how the map gets generated (no, they don’t have 1000 people sitting there looking at these images), but the artificial intelligence behind it seems quite accurate all the same.

You can only use it once every 5 hours for personal use (more than enough between design changes). So you should have plenty of time to really contemplate what the results mean, and how to best capitalise on them.

As I mentioned briefly before, the tool lets you submit any image file for tracking, so unfortunately at this stage you can’t just type in your website address.

Never fear! Remember that handy article I wrote on editing screen shots in GIMP? GIMP (an open sourced competitor of photoshop) is also another free tool which brings the total cost for eye tracking so far to $0 – Free. Nudda. Nothing. Zip. Sounding good?

How To Use Feng-GUI

Once you have your cropped image, you’re ready to load your image into Feng-GUI. Locate your image file and press Heatmap. You can check the “hide image from other” check box if you don’t want your image to be public.

Numbered Eye Pattern Points

The output of Feng-GUI is your image with numbered position points as well as a heatmap overlaid on your original image.

Notice where the eye is drawn first and how much eye gaze is given to this (the redder the point is the longer they linger on this point). This will give you an idea about what parts of your page are attracting attention and will give you clues about why.

Perhaps you have an image with a face (something that is known to draw user attention), maybe it’s a heading, or product image?

What To Do With The Results

This is a bit of a tricky one. So take this advice with a grain of salt and of course test, test and re-test again. Don’t stop testing and refining.

Identify the items on the page that are attracting the most initial attention. Now, this varies a lot from case to case so you’ll need a bit of art as well as science.

The idea is to place the “actionable” items in positions that attract attention. For example, usually the top right hand corner is a point which attracts a lot of natural attention as a user glances there to get their bearings. This makes it a prime position for a menu, an advertisement (even better if it’s for something of yours), imagery, or subscription options.

Obviously this varies on page to page (layouts are designed to guide the visitor’s eye), hence the disclaimer.

Conclusion

While eye tracking is something that can be done to improve a lot on your page, it should also be taken lightly and not weighed on too heavily.

More conclusive testing can be done by split testing your proposed solutions with a portion of your visitors. But remember, make whatever you’re looking at actionable, measurable, and specific. Otherwise it’s too hard to tell if the effect produced by the changes was positive or negative.