4 Ways to Visualize Website Behavior

Jeff Sauro, PhD

In the era of big data, the issue is less about not having enough data, but about deriving enough meaning from the data you have. Techniques and tools that help quickly identify patterns and insights to help improve user experiences are becoming increasingly important.

For years we have helped companies benchmark the overall website user experience with the SUPR-Q and granular task experiences using metrics like completion rates, SEQ, and task time. But these summative metrics aren’t meant to be diagnostic—they don’t tell you what the problems are or what causes low scores.

To better diagnose potential problems within web pages, we’ve developed a remote unmoderated testing platform called MUIQ for researchers to quickly identify patterns in website behaviors. As part of a benchmarking study, participants are asked to complete common tasks using MUIQ and then answer the standardized questions about the experience.

MUIQ generates four visualizations that aggregate clicks and navigation paths users take while completing tasks: heat maps, click maps, tree paths, and linear tree paths. The visualizations complement each other. They are like using different wavelengths of light to view far off stars and galaxies, and each visualization helps researchers understand potential problems with website interactions.

1. Heat Maps

Knowing where participants click down to the pixel helps identify how well calls to action are working and how actions differ by screen size and device type. The heat map below shows actions taken on a desktop computer. Participants in an unmoderated study were asked to find a book they were interested in on the Audible website. You can see the smattering of clicks around the search function (blue) and then around the background (called the hero image).

 

In another example, the heat map below is from an unmoderated study of the restaurant reservation website OpenTable. There is a heavy concentration of clicks on the main calls to action (the search box for reservation times, Location, Cuisine, and the Find a Table button) and a lack of clicks below the fold (not shown).

2. Click Maps

While heat maps show where people click, overlapping elements (like mega menus) on web pages can make it difficult to know which element on the page was clicked. In some studies, we’ve spent a lot of time trying to figure out whether people clicked hero banners or background images from heat maps (like in the Audible example above). The different resolutions participants use to view a web page makes the location of elements on a page less consistent, as well.

Our solution to this problem is the click map that records the exact element that was clicked and the percentage of participants that clicked it. You can see in the click map below that participants in the study clicked elements from the mega-menu (e.g. “Browse Audible”, “Sci-Fi” and “Teens”) and not on the hero-image. It now becomes much easier to understand the first click, which is highly indicative of task success.

As another example, the click map below is based on the OpenTable heat map.

We can see the majority of participants (67%) interacted with the Location, Restaurant or Cuisine search box and Find a Table button (79%). But again the click map provides more clarity to the heat map. We can now see that only 8% changed the search location to Denver (the light blue box floating on the background image) using the “Choose Your Location” drop-down menu at the top of the page. This suggests the drop-down element is not the primary method for changing locations when finding reservations. It means other parts of the experience need to support location changing (which is likely why the search box also supports a Location search).

3. Tree Maps

Having a log file show every URL a participant visits is very valuable to understand individual browsing patterns. But it’s also very time consuming to comb through—another example of having a lot of data but not as much meaning. MUIQ provides a way to visualize these log files and paths users take through a website using a tool we call a tree map. The tree map below is of the paths users took on the Audible website.

 

To support more insight from this display we have the ability to search for URL strings, which can be helpful in identifying how often certain pages were visited. The yellow highlighted boxes show the places where a search results page was displayed on Audible.com (which was around half of the time). It shows how pivotal a role search plays in the browsing experience for audio books.

4. Linear Tree Maps

The tree map shows us all unique combinations of pages (and aggregations of pages). But we often want to know the most common paths users take and that can be harder to derive from the tree map alone. For that reason we derived what we call the linear tree map, which aggregates the most common paths for the first few clicks (typically 1 to 5 clicks). The linear tree map below shows the most common paths users took for the first three clicks on Audible.com and helps answer one of the most common questions we get asked: what paths are users taking on our website?

Summary

Visualizing how users navigate a website helps diagnose potential problems and identify opportunities for improvement. Four visualizations we’ve developed to help diagnose problems from raw navigation data are the heat map (where are users clicking), the click map (what elements did they click), the tree map (what paths users took), and the linear tree map (what the most common paths were).

 

0
    0
    Your Cart
    Your cart is emptyReturn to Shop
    Scroll to Top