Also available in English

Inf@Vis!

La revista digital de InfoVis.net

Cómo usar WET
por Juan C. Dürsteler, Sergi Mínguez Regidor & Victor Pascual Cid [mensaje nº 194]

En el artículo anterior presentamos WET (Website Exploration Tool), una herramienta experimental que permite visualizar de una forma integrada cualquier sistema digital que tenga estructura, contenidos y utilización. Aquí está su manual de utilización.

DemoWET_es.png (198671 bytes)
Aspecto General de WET
Fuente: Captura de pantalla por el autor
Pulsa sobre la imagen para agrandarla

Cuestiones Generales

WET (Website Exploration Tool) es básicamente una herramienta de visualización de estructuras jerárquicas que utiliza principalmente dos metáforas visuales: el árbol radial y el treemap. En la primera vemos representada la página principal o “home” como raíz del árbol y luego las páginas accesibles desde ella situadas a su alrededor en forma circular concéntrica. 

Cada nodo del árbol es representativo de una página y cada arco es un enlace que existe para ir de una página a otra. Pese a que en cada página puede haber más de un enlace, algunos de ellos cruzados, se ha implementado un algoritmo que encuentra los enlaces que con mayor probabilidad son "estructurales". 

Ello permite simplificar la visualización y permite conocer el camino mas corto desde la raíz hasta el nodo para así también saber cuantos son los “clics” mínimos que tiene que hacer el usuario para llegar a esa página des de la “home”.

El grosor de los enlaces que unen los nodos se utiliza para representar la frecuencia con que se usan dichos enlaces, y la transparencia de los nodos nos permite mostrar si la página ha sido visitada alguna vez (nodos transparentes = nunca visitados).

Paralelamente al árbol radial se dispone de la metáfora visual del treemap. Éste representa la misma estructura jerárquica pero utilizando todo el espacio disponible, representando cada página como un bloque rectangular y anidando recursivamente en su interior sus hijos en la jerarquía. Véase el articulo anterior

max_radial_tree.png (250192 bytes)
Visualización de la estructura de navegaciónl de WET
Fuente: Captura de pantalla por el autor
Pulsa sobre la imagen para agrandarla

Entre ambas metáforas existe una coordinación en el resaltado (linked brushing). Esto permite utilizar conjuntamente todas las metáforas mostrando la misma información con las mismas características en todas las visualizaciones lo que facilita la extracción de conclusiones al combinar perspectivas diferentes y muchas veces complementarias.

Por tanto todo lo que se aplica al árbol radial se aplica simultáneamente al treemap. Cualquier asociación de métricas a variables visuales o cualquier interaccion (exceptuando zoom y movimiento) que se haga con una metáfora se refleja en la otra y viceversa.

Desde el menú  superior (Ver > Navegación de los usuarios ) hay accesible la visualización de otra instancia del árbol radial que permite visualizar la estructura navegacional del sitio en vez de la estructura de diseño del mismo. 

Este árbol se genera escogiendo los arcos más utilizados en vez de los más cercanos. De esté modo se conoce cuales son los caminos que realmente la gente utiliza permitiendo así comparar la estructura con que se ha diseñado la jerarquía con la navegación real y observar si el diseño estructural es el más apropiado al uso que hacen los usuarios. En ocasiones los usuarios llegan a una pagina siguiendo caminos muy distintos de los ideados para ellos en el diseño.

Al mismo tiempo disponemos de una menú lateral organizado en tres paneles diferentes. El panel superior dispone de la información sobre cada nodo en valores numéricos. El panel intermedio contiene la herramienta de configuración que permite determinar los elementos activos de la visualización. Y el panel inferior contiene información contextual con las estadísticas de las páginas servidas durante un cierto periodo de tiempo (que por simplicidad denominamos visitas) y las leyendas de cada una de la métricas que se vayan visualizando durante la exploración. Si se pulsa sobre un nodo muestra las estadísticas de ese nodo, mientras que si no, se obtienen las totales del sitio.

tabla_global.png (3812 bytes)
tabla_nodo.png (6601 bytes)
mapping_tool.png (6247 bytes) estadisticas.png (32615 bytes)
Panel superior derecho. Información básica agregada de todo el sitio o bien información detallada de la página cuando se selecciona
Fuente: Captura de pantalla por el autor
Pulsa sobre la imagen para agrandarla
Panel Intermedio. Herramienta de configuración que permite asociar métricas con variables visuales
Fuente: Captura de pantalla por el autor
Pulsa sobre la imagen para agrandarla
Panel inferior derecho. Estadísticas básicas agregada de todo el sitio en rojo o bien información detallada de la página cuando se selecciona (en su color). La otra pestaña permite ver las leyendas
Fuente: Captura de pantalla por el autor
Pulsa sobre la imagen para agrandarla

Funcionalidades :

Para relacionarnos con la aplicación disponemos de una barra de herramientas y de la interacción directa con la misma visualización:

  • Barra de herramientas : Consiste en un conjunto de botones que permiten activar o desactivar las funcionalidades siguientes:
    Mover : Una vez activado el botón correspondiente en la barra de herramientas y pulsando sobre el fondo de la visualización, nos permitirá arrastrar la visualización en cualquier dirección.
    Zoom : Apretando el botón de zoom nos permitirá seleccionar una zona rectangular en la visualización encuadrando así la imagen a esta región. (En cualquier momento la rueda del ratón (si se dispone) nos permite acercar o alejar la vista.)
    Ajustar a la ventana : Esta funcionalidad ajusta la visualización del árbol a los límites que porporciona la ventana optimizando el tamaño de la visualización.
    Volver al grafo inicial : Esta botón tiene sentido cuando se ha movido el árbol o se ha cambiado alguno de sus nodos y se quiere volver a la visualización inicial.
    Enlaces rotos : Visualiza como líneas de color rojo todos los enlaces internos rotos del sitio web (los que devuelven un error 404 cuando los sigues).
    Ver todos los enlaces : Muestra todos los enlaces entre nodos (páginas) del grafo en vez del más relevante para cada página.
    Ver navegación : Una vez activado el boton, al situarse encima de un nodo se muestran tanto los enlaces entrantes (que apuntan al nodo) como los salientes (que llevan a otros nodos)
    Ver enlaces más utilizados : Muestra, para cada página, cual es su enlace mas frecuente, viendo de este modo que página le lleva más tráfico.
  •  Interacción Directa : Aparte de la interacción gestionada por los botones también podemos realizar las siguientes funciones directamente sobre la visualización :
    tabla_global.png (3812 bytes) tabla_nodo.png (6601 bytes) Contextualmenu.png (19216 bytes)
    Ver información básica.  Agregada de todo el sitio.
    Pulsa sobre la imagen para agrandarla
    Ver información extendida.  Detallada de la página cuando se selecciona
    Pulsa sobre la imagen para agrandarla
    Menú contextual. Aparece pulsando el botón derecho
    Pulsa sobre la imagen para agrandarla
    • Ver información básica : Al pasar por sobre la página se muestra la información correspondiente a ésta en la tabla superior del panel derecho.

    • Ver información extendida : Pulsando con el botón izquierdo del ratón sobre el nodo representativo de la página se selecciona el nodo y se muestra toda su información tanto en la tabla superior del menú como en las estadísticas. Éstas adoptan el mismo color que tiene el nodo.

    • Menú contextual : Pulsando el botón derecho sobre el nodo se muestra un menú contextual. Con este menú se permite : abrir la pagina en un explorador o navegador, fijar el nodo como raíz del árbol, mostrar los enlaces entrantes, mostrar los enlaces salientes y finalmente mostrar los enlaces rotos de este nodo.

    • Zoom : Como ya se ha dicho, girando la rueda del mouse se aumenta o disminuye el tamaño de la vista.

    • Modificar el nodo raíz : Es posible arrastrar cualquier nodo con enlaces salientes (out-links)para convertirlo en nodo raíz sin más que colocarlo en el centro del árbol radial. Esta interacción también se encuentra en el menú contextual.

La herramienta de configuración permite:

mapping_tool.png (6247 bytes) mismas_ramas.png (334148 bytes) colores.png (7936 bytes) legends.png (19686 bytes)
Asociación de métricas con atributos visuales.
Pulsa sobre la imagen para agrandarla
Configuración de Controles.  En la imagen se aprecia como el camino de navegación típico no es el mismo que el estructural
Pulsa sobre la imagen para agrandarla
Configuración de Colores.  
Permite controlar que colores se aplican a los diferentes elementos visuales
Pulsa sobre la imagen para agrandarla
Leyendas. 
Pulsa sobre la imagen para agrandarla
  • Asociar métricas con atributos visuales : En esta herramienta se permite asociar una métrica con uno de entre cuatro atributos visuales : color, color de borde, tamaño y forma. Para añadir una asociación a la lista bastará seleccionar la métrica y el atributo y pulsar sobre el botón “+”. Para borrar un atributo bastará con seleccionar la fila en la tabla y pulsar el botón “-”. En caso de querer borrar todas las métricas se deberá pulsar el botón “restaurar valores”. Por ejemplo seleccionando Visitas Totales y Tamaño los nodos aumentarán su tamaño en función del numero de visitas. La lista de métricas disponibles se encuentra al final de este manual. 

  • Configurar los Controles : Este panel permite controlar la coordinación del resaltado y el tamaño de los nodos.

    • Cambiar coordinación del resaltado : Este componente nos permite cambiar el resaltado enlazado entre todas las metáforas visuales. Existen tres posibilidades : Resaltar sólo el nodo, resaltar el camino del nodo hasta la raíz del árbol o resaltar el mismo camino (las mismas ramas) cuando tenemos abiertos dos árboles radiales, uno estructural y otro de navegación para detectar diferencias entre el camino mínimo y el que realmente sigue la gente.

    • Controlar tamaño de los nodos : Esta función, inicialmente desactivada, se activa en el momento de añadir el tamaño como atributo visual. Una vez habilitado permite controlar el tamaño máximo y el tamaño mínimo de los nodos durante la representación.

  • Configurar el Color : En el último panel permite configurar las paletas de colores usadas en la visualización. Se distinguen cuatro partes:

    • Color del resaltado :Esta opción permite controlar los colores asociados a los objetos seleccionados y a los resaltados mediante la coordinación del resaltado

    • Color de los arcos : Esta sección permite controlar los colores asociados a los arcos durante la interacción.

    • Configuración paleta numérica : La paleta numérica se activa cuando se asocia una métrica numérica ( contiene valores cuantitativos como por ejemplo visitas totales ) con el atributo color. En este caso se permite definir el color máximo y el color mínimo a partir de los cuales se creará la interpolación.

    • Configuración paleta nominal : La paleta nominal se activa cuando se asocia una métrica nominal ( contiene valores categóricos como por ejemplo clúster de contenido ). En este caso se crea una paleta basada en cuatro parámetros : Luminosidad, transparencia, saturación inicial y saturación final. A partir de estos parámetros se genera una paleta con los colores correspondientes para poder crear una distinción entre ellos.
Leyendas : Una vez asociadas métricas con atributos se crean paralelamente leyendas que muestran la codificación visual correspondiente a cada métrica. En caso de métricas nominales u ordinales no es posible cambiar la escala de representación, pero en caso de métricas numéricas aparece un componente que si permite cambiar la escala de dicha representación.
  • Cambiar escala de la representación: La escala nos permite aplicar diferentes interpolaciones entre los valores para adaptarnos mejor a la distribución. La escala puede ser

    • lineal si se interpola linealmente entre el valor máximo y el mínimo,

    • puede ser cuadrática si se aplica la raíz cuadrada para hacer la interpolación,

    • logarítmica si se utiliza la función logarítmica para interpolar sus valores.

Finalmente adjuntamos la lista de métricas disponibles y su significado (para simplificar la tabla, en lo siguiente hay que entender "visita" como "número de páginas servidas" ya que usando html no es posible conocer realmente el número de visitas):

Métrica Significado
Clúster de contenido Agrupa las páginas que tienen un contenido similar.
Clúster palabras clave Agrupa las páginas que han estado visitadas por usuarios con consultas usando palabras clave similares en un buscador.
Duración de la visita Tiempo promedio que hay entre una página pedida por el usuario y la siguiente.
Enlaces entrantes Número de enlaces de otras páginas del mismo sitio que apuntan a esta página.
Enlaces rotos Número de enlaces a páginas inexistentes y por lo tanto a páginas que dan un "error 404".
Enlaces salientes Número de enlaces de esta página que apuntan a otras páginas.
Indexado en Y! Indica si la página esta indexada o no por Yahoo!
Página entrada Número de veces que una página ha sido la primera visitada dentro de una sesión de un mismo usuario.
Página salida Número de veces que una página ha sido la última visitada dentro de una sesión de un mismo usuario.
Ránquing de página Valor numérico entre 0 y 10 otorgado por Google en función de la importancia de la página.
Referencias Y! Número de páginas en todo Internet que tienen un enlace a esta página según Yahoo!.
Tamaño de archivo Tamaño del archivo en bytes.
Visitas búsqueda ext Número de visitas que provienen de usuarios que han hecho una búsqueda en un buscador externo como Yahoo! o Google.
Visitas búsqueda int Número de visitas que provienen de usuarios que han hecho una búsqueda en el buscador interno del sitio.
Visitas nav. directa Número de visitas que ha recibido la página por usuarios que han utilizado un bookmark o han escrito la URL directamente al navegador.
Visitas nav. externa Número de visitas que provienen de usuarios que han seguido un enlace existente en un página externa al sitio web.
Visitas nav. interna Número de visitas que provienen de usuarios que han seguido un enlace existente en una página del sitio a esta página.
Visitas totales Número de visitas que ha recibido una página.

La mejor manera de entender como se comporta el software es jugando con él...con la ayuda del manual! Como un complemento del mismo puedes ver un video sobre cómo usar WET (atención: 16 Mb!).


WET está disponible en www.infovis.net/applet/wet/login_sp.php hasta el 30 de Septiembre para su experimentación.

Enlaces de este artículo:

http://www.infovis.net/printMag.php?num=193&lang=1   Num 193 sobre Ocho años y WET!
http://www.infovis.net/applet/demo/wet_video.mov   Video sobre el uso de WET (sin sonido - 16MB)
http://www.infovis.net/ http://www.infovis.net/applet/wet/login_sp.php   Login de WET de la versión en Español
© Copyright InfoVis.net 2000-2018