Easy Eyetracking on the cheap

Eyetracking – often referred to as a “holy grail” of “x experience testing” – is generally known to be a very expensive, cumbersome and, generally, a specialist’s task. It is.
But sometimes “less” is also okay, and if you can accept the limitations the “holy grail” is not a mirage in the distance, but reality.

As it turns out, Tobii, makers of Eyetracking systems, have made a consumer version of their technology aimed at gamers, making the technology available at a reasonable cost (Around €230 including a computer game, wherein the device can be used).

The best part is that it only requires a little tweaking to be used for our purposes. But it works only in Windows.

You need a Tobii Eye Tracker 4c (or 5). A optional webcam, and some free software

To make it work, you install the drivers for it, adjust, calibrate (and you’re ready to play the game).

Using it for other purposes, you need to install the application Ghost, that enables you to show the position of your gaze to watchers of your game stream. It also enables you to hide the visualization of the eye position on your screen, making it useful for our purposes.

When setting it up, you don’t need to set up an connection to Twitch (unless you want to). Just leave it.

Install the Open Broadcasting Software, where you configure it to record both the screen and the overlay from Ghost (and the webcam) in one stream.

Done.

Experiment with the right settings for your project. Using “heat map” with high responsiveness, 50% decay and a relatively small blotch is a good general setting.

It is not a pixel precise representation of users’ focusing and eyemovements, but it will give you an overview and extra insight into the user’s activities in the test situation.

The Dimselab has two Tobii Eye Tracking 4c, one permanently set up in the lab and one for students to loan on projects.

You can now add code snippets

In the text editor, you press the “<>” to activate the code editor

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gradient in text - as stolen from Polygon</title>
<style type="text/css">
body {
	background-color:#e7e7e2;
	color:#a32b68;
	font-family: Verdana, Geneva, sans-serif;
	font-size:4em;
	font-weight:bold;
	
}

p {
	background: -webkit-linear-gradient(-33deg, #fd0b58, #a32b68 50%,  #fd0b58 );
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
</style>
</head>

<body>
<p>p {<br>
 background: -webkit-linear-gradient(-23deg, yellow 10%,#fd0b58, #a32b68,);<br>
 -webkit-background-clip: text;<br>
 -webkit-text-fill-color: transparent;<br>
}</p>
<p>Stolen from quotes in Polygon.com - works in Safari/webkit</p>
</body>
</html>

Actually, if you paste code, the plugin will recognise it, and frame it accordingly. If not you must do it by yourself.