Zero budget eye tracking. Clickmaps part 2

30 Jul
2006

In the first part of Zero budget eye tracking, we wrote a small script to keep track of the clicks in a web page. A couple of days after, we already have some information to analyze. Keep on reading to know how…
NOTE: This post has been improved at The definitive heatmap
I added the scripts to our website (www.corunet.com) and used a resolution of 1280×1024 px. After 65 clicks, I have a log like this one:


x332y288 http://corunet.com/ 192.168.0.10
x399y288 http://corunet.com/ 192.168.0.10
x489y294 http://corunet.com/ 192.168.0.10
x655y346 http://corunet.com/ 192.168.0.10
x709y351 http://corunet.com/ 192.168.0.10
x350y348 http://corunet.com/ 192.168.0.10
x384y305 http://corunet.com/ 192.168.0.10
...

We would need to filter the x and y coordinates to draw some dots over the page. I will use the following code (written in perl):


#!/usr/bin/perl
open (DATOS,"log.txt");
my @datos=<DATOS>;
close (DATOS);
my $i;
foreach my $dato(@datos){
if ($dato=~/\.com\/\t/){
my @posicion=split("\t",$dato);
$posicion[0]=~s/x//;
my ($x,$y)=split("y",$posicion[0]);
$i++;
print '<img src="/i/pelotilla.png"
style="z-index:'.$i.';position:absolute;
left:'.$x.'px;top:'.$y.'px;
height:16px;width:16px;">'."\n";
}
}

This script writes out an IMG tag for every log line that asked for the main page (ends in .com). This way, we would only need to paste this html code into a copy of the original page. We also will need a small image to mark the spots. I used a 16x16px

The click map

The former script prints out some html code like this one:


...
<img src="/i/pelotilla.png"
style="z-index:51;position:absolute;
left:605px;top:773px;
height:16px;width:16px;">
<img src="/i/pelotilla.png"
style="z-index:52;position:absolute;
left:778px;top:792px;
height:16px;width:16px;">
<img src="/i/pelotilla.png"
style="z-index:53;position:absolute;
left:799px;top:810px;
height:16px;width:16px;">
...

Pasting the code into the page copy, this is what we get:

Click map

I used the system posted in webfx to use transparent PNGs in internet explorer. We wouldn’t need it if we had done our research using Opera or Firefox browsers.
Each dot in the above image refers to a single click in our web site. Studying it we would be able to identify areas where the users are having trouble to find the links, and where they think should be a link but isn’t. In a real world analysis it would be better to have some more dots to work on.

Shortcomings

  • The system’s not able to support resolution changes. We would need some more javascript to refer every click to a known point of the screen. And it would be pretty difficult, if not impossible, to use it in liquid layouts.
  • In flash movies, we are going to have some trouble because the onclick event is not supported. As you can see in the screen capture above, there is not a single click detected in the top area, where the flash menu is.
  • Using the same technique, we could be able to store every mouse position in some milliseconds interval to replay our users movements, and there are many other possibilities.

    Acknowledgements

    I got the inspiration for this post from the “Click Survey” that lets you click randomly in any position of a picture.

    Would like to share? These icons link to social bookmarking sites where readers can share and discover new web pages.
    • Digg
    • del.icio.us
    • Reddit
    • Facebook
    • Google Bookmarks
    • Ma.gnolia
    • TwitThis
    • LinkedIn

    Comments are closed.

    top