Attention Heatmap

What is an Attention Heatmap? #

The attention heatmap is a function that uses thermography to visually represent areas visited by users based on their dwell time. Therefore, even without clicks or other actions on the page, you can identify where visitors are interested.

Areas colored orange to red indicate areas where visitors stayed for a longer duration. The key to analyzing red areas is to consider both "positive factors" and "negative factors" as potential causes.

Areas colored green to blue may indicate areas where visitor interest is low. The cause of blue areas is almost always a "negative factor."

Areas with significant color variation, such as transitioning from red to green or green to red, indicate areas where reading engagement drastically decreases or increases. These areas are often indicative of skimming or strong interest trends.

Heatmap drawing logic #

Ptengine's Attention Heatmaps determine color relative to user dwell time. Specifically, it mainly uses the following calculation formula and three visualization principles to render colors.

Attention Color Calculation Formula

According to the formula above, areas exceeding 90% will be rendered almost red, transitioning through orange, yellow, yellow-green, and blue. 0% results in transparency.

Three visualization principles

• Attention tends to converge towards the center of the browser page.
  

• Areas where users frequently stop scrolling become red (indicating higher attention).
  

• Visualization is based on user dwell time, prioritizing areas where users spend the most time.
  

Supplementary Note: Based on the above, if a specific section of the page is viewed exceptionally intensely (e.g., view time is more than 10 times longer than other sections), the colors of other areas might appear extremely faint. In such cases, you can adjust the red threshold by moving the adjustment bar to the left on the heatmap screen to improve heatmap readability. Please use this feature as needed.

Checkpoints #

When analyzing an attention heatmap, focus on the following points. If you find areas for improvement, immediately bring your ideas to life by clicking the "Implement Measures" button in the top right corner of the screen!

• Which content attracts visitor attention, and which parts are being skimmed?

• Is the content that is attracting attention the same as what was anticipated during page creation?

• Is content that is being thoroughly read located towards the bottom of the page?

• Is the overall color faint? Aim to make it red overall.