También disponible en Español


The digital magazine of InfoVis.net

How to use WET
by Juan C. Dürsteler, Sergi Mínguez Regidor & Victor Pascual Cid [message nº 194]

In the previous article we introduced WET (Website Exploration Tool), an experimental tool that allows the user to visualise in an integrated way any digital system having structure, contents and usage. Here you have its manual of use.

DemoWET_en.png (198931 bytes)
WET's General Layout
Source: Screenshot by the authors
Click on the image to enlarge it

General aspects

WET (Website Exploration Tool) is basically a tool for the visualisation of hierarchical structures that mainly uses two visual metaphors: the radial tree and the treemap. In the first one we represent the main page or "home" as the tree root and then the pages you can access from it located around it in a concentrically circular form. 

Each node of the tree represents one page and each arc is a link that enables you to pass from one page (node) to the other. Although each page can contain more than one link, some of them cross linked, the algorithm implemented to disclose the structure finds those links that are most probably the "structural" ones. 

This allows you to simplify the visualisation and reveals the shortest way from the root to a particular node, thus showing the number of minimum "clicks" the user has to make to reach that page from the home page.

The thickness of the branches joining the nodes is used to represent the frequency with which those links have been used. The transparency of the nodes makes it possible to show whether the pages has ever been visited or not (transparent nodes = never visited).

Alongside the radial tree we have available the treemap visual metaphor. This metaphor represents the same hierarchical structure using all the available space, depicting each page as a rectangular block, nesting its children recursively in the hierarchy. See the previous article.

max_radial_tree_en.png (289021 bytes)
Visualisation of the navigational structure in WET
Source: Screenshot by the authors
Click on the image to enlarge it

Between both metaphors there's a highlighting coordination (linked brushing). This enables the simultaneous use of both metaphors showing at the same time the same information with the same features in all the visualisations. This greatly enhances the extraction of conclusions by combining different and many times complementary perspectives.

Consequently, all that is applied to the radial tree is reflected simultaneously in the treemap. Any association of metrics to visual variables or any other interaction (except pan and zoom) you make to one metaphor is applied to the other and vice versa.

From the upper menu (View > Show user-s navigation) you can deploy a variant of the radial tree that shows the navigational structure of the site instead of the structural design

This tree is generated by selecting the links most frequently used, instead of the shortest paths. This way you can see which paths the people really follow thus enabling the comparison of the structural design with the actual navigational structure. Then you can see if the designed structure fits the needs of the users or not. Sometimes the users follow paths considerably different from what has been designed.

At the same time we have a lateral menu organised into three different panels. The upper panel shows the available information about each node in numerical figures. The intermediate panel contains the mapping tool that allows the determination of the active elements of the visualisation. The lower panel contains contextual information with the statistics of the requested pages during a certain period of time (for simplicity  called hits) and the legends showing the visual encoding of the selected metrics once they are activated. When you click on a node its particular statistics are shown for the period selected. When not, it shows the aggregated statistics of the total period in study.

globa_table.png (4285 bytes)
node_table.png (6410 bytes)
mapping_tool.png (6148 bytes) statistics.png (34528 bytes)
Upper right side panel. Basic aggregated information about the whole site or detailed information when a node is selected.
Source: Screenshot by the authors
Click on the image to enlarge it
Intermediate Panel. Configuration tool with different tabs with different controls
Source: Screenshot by the authors
Click on the image to enlarge it
Lower right side panel. Showing the basic statistics of the whole site in red or with detailed information in the colour of the node selected.  The other tab enables you to see the legends
Source: Screenshot by the authors
Click on the image to enlarge it

Functionalities :

In order to interact with the application we have a tool bar and the direct interaction with the visualisation :

  • Tool bar : Consist of a set of buttons that enable or disable the following functions:
    Pan : Once the corresponding button is activated by dragging the mouse on top of the visualisation you can pan it in any direction.
    Zoom : This button enables the selection of a rectangular area that sets the limits of the zoom to be performed. (At any time you can zoom the view by using the mouse wheel if available)
    Fit to window : This functionality fits the radial tree to the limits imposed by the window optimising the size of the visualisation.
    Return to the initial graph : This button is useful when you've been playing with the visualisation for a while panning, zooming changing nodes etc. and want to see it as it originally appeared.
    Broken links : Visualises all the internal links that return a 404 error (broken links) as red lines.
    Seeing all the links : Shows all the links between internal nodes (pages) of the graph instead of only showing the structural links.
    Seeing the navigation : Once the button is activated, hovering on top of the node shows all the in-links (the ones aiming at it from other nodes) and the out-links (those coming out from it and reaching other ones).
    Seeing most used links : Shows, for each page, which link is the most frequently used, thus pointing out which page conveys more traffic.
  • Direct Interaction : Apart from the interaction managed via the buttons we can also perform the following functions directly with the visualisation. :
    tabla_global.png (3812 bytes) tabla_nodo.png (6601 bytes) Contextualmenu.png (19216 bytes)
    Seeing basic information.   About the metrics of the whole site .
    Click on the image to enlarge it
    Seeing extended information.  Detailed at the page level once it is selected
    Click on the image to enlarge it
    Contextual Menu . Appears by clicking the right button on top of a node
    Click on the image to enlarge it
    • Seeing basic information : Hovering over a page (node) the available information about it appears in the upper table of the right side panel.

    • Seeing extended information : Clicking with the left button of the mouse on the node desired it becomes selected and you can see the basic information in the upper table plus statistics in the lower part of the right panel. The statistics have the same colour as the node.

    • Contextual Menu : Clicking the right button of the mouse on top of a node it deploys a contextual menu. This enables: opening the page in the browser, settling the node as the root of the tree, showing in-links, showing out-links, and finally showing the broken links of that node.

    • Zoom : As previously said, by rotating the mouse wheel you can enlarge or diminish the size of the view.

    • Set root node : By dragging a node with out-links into the centre of the radial tree it is set as the new root node. This interaction is also avaible in the contextual menu.

The mapping tool enables :

mapping_tool.png (6148 bytes) mateixes_branques.png (346083 bytes) color.png (7809 bytes) legends.png (19686 bytes)
Associating (web) metrics with visual attributes .
Click on the image to enlarge it
Configuring Controls.  In the image you can see how the typical navigation path is different from the structural one. 
Click on the image to enlarge it
Configuring Colours.  
You can control which colours are applied to the different visual elements
Click on the image to enlarge it
Click on the image to enlarge it
  • Associating (web) metrics with visual attributes : This tool allows you to associate one of the metrics available with one out of four visual attributes colour, border colour, size and shape.  In order to add an association to the list you just need to select the metric and the attribute and press the “+” button. To erase one of the associations just select it from the table and press the “-” button. If you need to erase the whole list click the "reset values" button. You can add as many associations as you wish as attributes are free. For example choosing Total hits and size the nodes will increment their size proportionally to the number of requested pages (visits). The list of metrics is available at the end of this manual.

  • Configuring Controls : This panel enables the coordination of highlighting and size of the nodes.

    • Changing highlighting coordination : This component allows you to change the cross linked highlighting between the visual metaphors. There are three possibilities : Only highlight the nodes. Highlight the path from the node to the root of the tree or highlight the same path when we have opened both the structural radial tree and the users' navigational radial tree in order to detect differences between the actual path the users follow and the minimum one.

    • Controlling the size of the nodes : This function, usually inactivated, becomes active when you associate some metrics to the size of the node as a visual attribute.  Once enabled it allows you to control the minimum and maximum size of the nodes associated to the minimum and maximum value of the metric selected.

  • Configuring Colours : This last tab in the panel enables the configuration of the colour palettes used in the visualisation. We can divide it into three parts:

    • Highlighting colours : This option controls the colours of the selected items and also the colours of highlighted items using highlighting coordination.

    • Link colours : This section controls the colour associated to links during interaction.

    • Numerical palette configuration : The numerical palette activates when a numerical metric (one that contains numerical values instead of ordinal or categorical ones) is associated with the colour visual attribute. In this case you can define the color associated to the maximum and minimum values  from which the colour will be interpolated. 

    • Nominal palette configuration : This palette activates when a nominal metric (contains categorical values, like for example content clusters) is associated with the colour visual attribute. In this case the palette is based on four parameters : Brightness, Transparency , Initial and Final saturation. By modifying these parameters you can create the palette with colours appropriate for nominal variables.
Legends : Once the metrics are associated with visual attributes you can find in the lower right panel the corresponding legends that represent the visual encoding of the metric.  In the case of nominal or ordinal metrics there's no chance of changing the type of the scale, but for numerical ones you will find a component that enables the selection of three types of scale. 
  • Changing the scale of representation: The scale allows you to apply different types of interpolations between the extremes in order to better fit the data distribution. These are:
    • linear for a linear interpolation between the maximum and minimum value,
    • quadratic when applying the square root for the interpolation,
    • logarithmic when using the logarithmic function for the interpolation.

Finally here you can find the list of available metrics along with its meaning (for the sake of simplicity in the following "hit" must be understood as "requests for pages":

Metrics Meaning
Broken links Number of links to inexistent pages and consequently returning a " Error 404" code.
Content cluster Set of pages (Cluster)  which have a similar content
Exit page Number of times a page has been the last during a session.
File size File size in bytes.
In-degree Number of links of others pages that link the current page.
Indexed Y! Indicate whether this page is indexed in Yahoo or not.
Keywords cluster Cluster pages which have been visited for users using a similar set of keywords in the query.
Landing page Number of times that a page has been the first in a session.
Navigational direct Hits of a page from a bookmark or writing the URL direct into the browser.
Navigational external Number of hits given by users who come from an external link.
Navigational internal Number of hits given by users who came from a page within the site.
Out-degree Number of links of this page that point to other pages.
Page rank Numeric value between 0 and 10 given by Google depending on page's importance.
Search External Hits Number of hits  coming from users who have been done a query using an external search like Yahoo! or Google.
Search Internal Hits Number of hits coming from users who have been done a query using an internal search.
Time average Time average between one page requested for the user and the next one.
Total hits Total number of requests for a particular page.
Y! in-links Number of pages in Internet which have a link to this page according to Yahoo!

The best way to understand how the software behaves is by playing with it... with the help of the manual! As a complement of it you can see a video on how to use it (beware: 16 Mb!).

WET is available at www.infovis.net/applet/wet/login_en.php until September 30, 2008 for you to experiment with it.

Links of this issue:

http://www.infovis.net/printMag.php?num=193&lang=2   Num 193 about Eight years and WET!
http://www.infovis.net/applet/demo/wet_video.mov   Video about the use of WET (without sound - 16 MB)
http://www.infovis.net/applet/wet/login_en.php   WET login of the English version
© Copyright InfoVis.net 2000-2014