Eye tracking para pobres. Parte 2

24 Jul
2006

En la primera parte del artículo escribimos un pequeño script para analizar la posición de los clicks en una página web. Despues de unas cuantas pruebas más, ya tenemos la información necesaria para hacer un pequeño análisis.
He probado a implantar los scripts en el sitio web de corunet y he hecho algunas pruebas de clicks en la pantalla a una resolución de 1280*1024. Al cabo de 65 clicks, tengo un log como este:


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
...

De aquí, me interesan las coordenadas x e y de cada click para situarlas sobre la página. Para ello, el siguiente código me va a ayudar bastante:


#!/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";
}
}

Este programilla (en perl) imprime un tag IMG para cada línea del log que conincide con la página raíz (termina en .com/), líneas que luego añadiremos a una copia de la página original. Además, será necesario tener una imagen en formato PNG para marcar los puntos. Yo he utilizado pelotilla.png, una imagen de 16x16px creada en photoshop.

El resultado

El programa imprime en pantalla un trocito de código que se puede pegar directamente bajo la etiqueta <body> de una copia de la página en cuestión:


...
<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;">
...

El resultado es este, utilizando las indicaciones de webfx para conseguir transparencia en PNGs en Internet explorer:

Captura de pantalla con clicks

Cada uno de los puntos rojos se refiere a un click en la página, con lo que podemos empezar a hacernos una idea de las necesidades del usuario. Por ejemplo, en la sección de las noticias de la derecha, los usuarios han hacho click en el cuerpo de la noticia, buscando más información. Será conveniente agregar un icono de leer más, o convertir el texto en un enlace. En un análisis real, sería interesante tener más puntos, más usuarios y obtener más conclusiones…

Problemas y mejoras

  • De momento, el sistema no está preparado para cambios de resolución. En un entorno no controlado, habrá que retocar el script para que refiera las coordenadas a un punto conocido de la página.
  • El evento onclick no soporta flash. En el caso de que se use para colocar menús, será necesario editar manualmente los archivos .FLA y reemplazar los SWF para que también obtengan el punto donde se hace click
  • Partiendo de este sistema, podríamos capturar, por ejemplo, la posición del ratón cada, por ejemplo, 50 milisegundos, guardarla en un array y almacenarla en un log en el servidor, con lo que sería posible seguir los gestos del usuario tal como navega en una página web. En el futuro, más cosas.

    Agradecimientos

    He obtenido la inspiración para el artículo del post “Click Survey” que permite hacer click en una imagen determinada y analiza luego la posición de los clicks.

    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

    1 Response to Eye tracking para pobres. Parte 2

    Avatar

    noname

    August 1st, 2006 at 00:00

    as i wrote in my previous comment, see http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
    for centered designs it would be necessary to monitor also the page width and for the showing you can play with margins and percentual position.
    The big problem may be the different size of fonts in different browsers

    For complete liquid designs it is quite impossible, as not only width, but also height may change and text on one row may be on three rows then.
    But idea: You could then give each element or olso each single character his own ID and monitor clicking on the particular element/character and position for images

    top