You can use a heat map overlay to view the areas of an application interface where visitors use gestures. By tracking this type of user behavior, you can see where users tend to focus on the page and identify flaws in the design of the page.
By applying the heat map overlay to a snapshot, you can:
- See where people selected an object.
For example, if a link is a long sentence, you can see whether they selected at the beginning, middle, or end of the sentence.
- See the frequency of selections that are made in an area relative to the rest of the screen.
The area can be anything; it does not have to be an active link.
For example, if visitors try to select items that have no links, it indicates an expectation that is not met. Similarly, visitors who fail to select the appropriate links provide an indication that the link is not properly designed or positioned on the page.
You can filter the data on the overlay by any dimensions that are associated with the data.
When a heat map overlay is displayed, you can interact with it in the following ways.
- Applying a new range of dates.
- Selecting metrics to display.
- Applying thresholds to metrics.
The threshold setting controls the visualizations that are displayed on the overlay. For example, if you want to suppress a metric with lower-value visualization data from displaying on the overlay, you can increase the threshold for that metric. By increasing the threshold for the metric, you are essentially saying, "show the visualizations for the metric when it exceeds the defined threshold only, otherwise don’t display it".
Heat map hot spots are rendered relative to the new data that is returned, they do not eliminate data points from a current 0-100% heat map threshold.
- Showing the indexed items for the top-layer elements only.
In some cases, a snapshot of a page can include elements that get in the way of one another. For example, a page might include a drop-down menu or a flyout menu that when interacted with, obscures other elements on the page. These top-layer elements have a higher "z-index" than the elements that they obscure. Select the Display top elements only check box if you want the heat map overlay to disregard clicks on those elements that are "hidden beneath" elements with a higher z-index.
When you select Display top elements only the data from the heat map is limited to the element with a higher z-index. The "z-index" is a CSS property that determines how the element is layered when the browser renders the page.
Note: If there are multiple z-index elements on a page (for example, if a page has both a drop-down menu and a flyout menu that obscure other elements), the heat map displays data for both of the z-index elements, as long as they don’t overlay each other. If z-index element A obscures z-index element B, the heat map shows all of element A and the bits of element B that are not covered by element A.
This type of customization can be helpful when you are analyzing pages with modals or other dynamic elements that "pop up" over the main page, such as an extending navigation menu. The Display top elements only feature acts a filter by suppressing the noise that occurs on lower z-indexed elements (things obscured by the menu) to more accurately depict activity on the menu.
- Filtering the data on the overlay by any dimensions that are associated with the data.
- Viewing summary data for subsection of the overlay.
- Go from the overlay directly to the reports that are used to create the metrics data points on the overlay.
To learn more about interacting and analyzing heat map overlay data, check out our Acoustic Academy course, Usability Analysis and Heat Maps.