Use cxOverstat heat maps to view the areas of a page that visitors hover on or click. By tracking this user behavior, you can see where users tend to focus on the page and identify flaws in the design of the page.
For example, if visitors click items that have no links, it indicates some expectation that is not being met. Similarly, visitors who fail to click the appropriate links provide an indication that the link is not properly designed or positioned on the page.
The "heat" associated with each spot on the map indicates the frequency of clicks that are made in that area relative to the rest of the page. An area that is clicked can be anything; it does not have to be an active link. A click can be registered by any HTML-based object that is rendered by the DOM.
Click spots are associated with individual objects on the screen, which helps to pinpoint the following elements:
- You can see exactly where people selected the object. For example, if a link is a long sentence, you can see whether they clicked at the beginning, middle, or end of the sentence.
- If the object moves because of scrolling the page or resizing of the browser, the heat spots are repositioned with the object.
- In the top toolbar, you can apply dimensional filters to the displayed overlay.
- You can also focus on specific areas of the page and then generate a report on the data.
- In the top bar, you can also change the range of dates that are displayed in the overlay data.
Intensity
The relative frequency of clicks is indicated by a gradient color. The percentages indicate the percent of visitors who viewed a page during the time period.
If there is no color in an area, it means that no visitors or a small percentage of visitors clicked there.
Web application metrics
These metrics are recorded for web applications:
| Metric | Description |
|---|---|
| Clicks | A click heat map provides a visual display of the areas where visitors clicked the page, whether there is any link to click or not. |
| Hovers | Captures each hover point on a page. A hover is when the mouse pointer is placed on top of an object for more than 1 second. The object does not need to be clicked to capture data. |
| Hover-to-click | Hover-to-click captures each time that an object was hovered on for more than 1 second and then the object was clicked. |
| Avg hover time | Average hover time captures the average amount of time that an object is hovered on without being clicked. The unit of time is measured in seconds. The object data also displays how many times the object was hovered on. |
| Avg hover-to-click time | Average hover-to-click captures the average amount of time that an object is hovered on before it is clicked. The unit of time is measured in seconds. The object data also displays how many times the object was hovered on and then clicked. |
Mobile application metrics
These metrics are recorded for mobile applications:
| Metric | Description |
|---|---|
| Tap | Taps captures the number of times the user made a single tap gesture on a mobile device. |
| Double tap | Double tap captures how many times a user made a double-tap gesture on a mobile device. |
| Swipes | Swipes captures the number of times the user did a swipe on a mobile device. |
Heat Map analysis
In the heat map, spots of greater intensity are the locations where more visitors clicked. How do you use this information?
In the following example, a web application is designed to prompt visitors to make inquiries about new products. A heat map highlights visitor behaviors on the home page.
Observations
- The primary content area is the Discover CEM toolbar and the large image in the middle of the page.
- Most clicks are in the top navigation bar, which is considered a secondary option.
- Further down the page, the number and intensity of the heat maps decrease.
Analysis: The above observations can be caused by scanning patterns, in which the typical user scans the web page in an F-pattern, starting from the banner. However, since the top navigation ("Discovery CEM") bar is so low on the page, users can confuse the navigation bar with the primary content below it. The relative positioning of the navigation can detract from the primary message of the page.
A simple solution might be to move the Discover CEM toolbar higher on the page, even above the top navigation bar, where these options are overlooked. Since one of the primary objectives of the web application is to generate interest from users, the Contact link must be integrated into the main panel area.
When to use Heat Maps
For best results, you can generate heat maps around specific intervals of interest. By analyzing during a targeted period, you can gain insight into visitor behavior at different time intervals and target content for specific groups.
Examples of when to run Heat Maps:
- During high traffic periods
- With feature roll-outs or marketing initiatives
- Over a weekend
- At specific times during the day