Corunet. El Blog » Usabilidad http://blog.corunet.com Web development, usability and more Thu, 03 Nov 2011 18:30:49 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Eye tracking para pobres. Parte 2 http://blog.corunet.com/eye-tracking-para-pobres-parte-2/ http://blog.corunet.com/eye-tracking-para-pobres-parte-2/#comments Mon, 24 Jul 2006 11:46:34 +0000 David Pardo http://blog.corunet.com/usabilidad/eye-tracking-para-pobres-parte-2 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.

    ]]>     http://blog.corunet.com/eye-tracking-para-pobres-parte-2/feed/ 1     Eye tracking para pobres http://blog.corunet.com/eye-tracking-para-pobres/ http://blog.corunet.com/eye-tracking-para-pobres/#comments Mon, 17 Jul 2006 12:55:39 +0000 David Pardo http://blog.corunet.cor/general/eye-tracking-para-pobres Los dispositivos de eye tracking son caros. Dan un rendimiento excepcional para analizar adónde miran los visitantes de un sitio web, pero a veces es dificil justificar la inversión. Si consigues convencer a tus testers para que hagan click en el punto al que miran, puedes sacar conclusiones…

    Ojo de usuario

    Con un poco de ingenuidad, es posible implantar en una página web un sistema parecido, basado en javascript y que siga los puntos en donde la gente hace click con el ratón. Para ello, son necesarios los siguientes pasos:

    1. Crear una función que siga el movimiento del ratón, y que se lo pase a un logger cada vez que se hace click.
    2. Hacer una llamada a un método asíncrono (HttpRequest o similar) que mande, de forma transparente para el usuario, las coordenadas del punto en el que se ha clickado.
    3. Que el logger escriba en un archivo, base de datos o similar la información pertinente

    Capturar  la posición del ratón 

    Antes de nada, es necesario encontrar las coordenadas del ratón. Lo mejor para esto es hacer, al final del ducumento html, un enlace a un fichero javascrip parecido a este:

    /*detectar navegador y declaraciones*/
    var IE = document.all?true:false
    if (!IE) document.captureEvents(Event.MOUSEMOVE)
    var tempX = 0
    var tempY = 0/*llamada a la funcion con un handler*/
    document.onclick = getMouseXY;
    function getMouseXY(e) { //hace todo el trabajo
      if (IE) {
        tempX = event.clientX + document.body.scrollLeft
        tempY = event.clientY + document.body.scrollTop
      } else {
        tempX = e.pageX
        tempY = e.pageY
      }
      var url="/perl/guardacoordenadas.pl?x="+tempX+"&y="+tempY;
      guardar(url);
      return true
    }
    if( document.getElementsByTagName ){
     var links = document.getElementsByTagName( 'a' );
     for( var i=0; i < links.length; i++ ){
      links[i].onclick = function(){
       return getMouseXY(this);
      }
     }
    }

     Lo que hace, más o menos, es detectar que navegador está utilizando el usuario, inicializar el controlador de clicks, asignar a cada enlace una función en tiempo de ejecución y definir una función getMouseXY. Ésta devuelve true despues de llamar a una función externa que se define en el segundo paso:

    HttpRequest

    Permite hacer una llamada al servidor fuera del flujo de la navegación. En este caso, queremos que,  cuando el usuario haga click, el servidor guarde la posición del ratón. Para esto, el código es el siguiente:

    var xmlDoc = null ;
    if (typeof window.ActiveXObject != 'undefined' ) {
     xmlDoc = new ActiveXObject("Microsoft.XMLHTTP");
    }else {
     xmlDoc = new XMLHttpRequest();
    }
    function guardar(url){
     xmlDoc.open( "GET", url, true );
     xmlDoc.send( null );
    }

    Al igual que antes, diferenciamos entre el código de Internet Explorer y el resto. Luego, utilizamos el objeto xmlDoc para hacer la petición. De esta forma, llamamos al servidor sin que el cliente note nada, y podemos guardar la posición del cursor.

    El lado del servidor

    Desde el lado del servidor, la petición se ve como cualquier otra solicitud, pero no es necesario devolver nada por salida estándar. Lo único que haría falta es imprimir en un archivo la query string que le hemos pasado (con las coordenadas x e y), el referer y, si queremos, la dirección IP. Como prueba de concepto, serviría este código (CGI en perl, fácil de entender o de implementar en otro lenguaje)

    #!/usr/bin/perl
    use CGI;
    use strict;
    my $q=new CGI; #crea una nueva instancia del objeto CGI
    print $q->header(); #imprime cabeceras
    open (LOG,">>log.txt") ||die; #abre el archivo log
    print LOG $q->Vars; #e imprime todos los datos
    print LOG "\t";
    print LOG $ENV{'HTTP_REFERER'};
    print LOG "\t";
    print LOG $ENV{'REMOTE_ADDR'};
    print LOG "\n";
    close (LOG);

    Con esto, obtendremos un archivo log.txt que nos permitirá saber los puntos donde el usuario ha clickado.

    Más cosas

    Ahora sería el momento de programar un visualizador para toda esta información, superponiendo a la web los puntos en los que se ha hecho click. En breve escribiré los resultados de mi primer experimento público y como analizar todos los datos.  Ya puedes leer como analizar los logs generados en la parte 2 del artículo

    Con este mismo sistema es posible hacer muchísimas cosas. Por ejemplo, llevar un log de los enlaces internos y externos que se siguen en la página, guardar los movimientos del ratón para seguir la navegación... La imaginación es la que marca el límite.

     

     

    ]]>     http://blog.corunet.com/eye-tracking-para-pobres/feed/ 7