Category: Visual Testing -- Since: v18.28.0 -- Tier: All

Analyze where a persona's visual attention goes on a page. Uses Wasserstein-2 saliency on CIE-Lab color data. Produces persona-specific attention maps showing what each persona actually sees as visually prominent.

The Science

Based on Klein & Frintrop (DAGM 2012). For each grid cell on the page, we compute the mean and variance of the CIE-Lab color values. Then we measure the Bures-Wasserstein distance between each cell and its neighbors.

High contrast between a cell and its surroundings means high saliency. High saliency grabs attention.

Different personas have different attention filters:

Motor impairment: Center-heavy. Narrows attention to avoid accidental clicks.
ADHD: Motion-attracted. High-saliency areas capture more attention.
Dyslexia/elderly: Text-focused. Suppresses flashy distractors.
Low vision: Large-elements only. Small details do not register.

Parameters

Parameter	Type	Required	Description
`url`	string	Yes	URL to analyze
`persona`	string	No	Persona name (default: first-timer)
`cellSize`	number	No	Saliency grid cell size (default: 16)

Response

{
  "persona": "cognitive-adhd",
  "alignmentScore": 0.971,
  "entropy": 0.915,
  "concentration": 0.562,
  "transportCost": 0.3571,
  "topAttentionAreas": [
    { "region": "(384, 128)", "saliency": 0.98 },
    { "region": "(640, 256)", "saliency": 0.87 }
  ],
  "interpretation": {
    "alignment": "Attention follows intended design",
    "entropy": "Scattered attention (overwhelmed)",
    "concentration": "Attention distributed across page"
  }
}

Metrics

Metric	What It Measures	Good	Bad
Alignment	How well persona attention follows the design intent	> 0.8	< 0.5
Entropy	How scattered or spread out attention is	< 0.5 (focused)	> 0.8 (overwhelmed)
Concentration	Share of attention on the top 20% of regions	> 0.6 (focused)	< 0.3 (distracted)
Transport Cost	How much attention shifts from the base saliency map	Low (natural)	High (forced)

Use Cases

Analyze where an ADHD user's attention goes on our checkout page

Compare attention patterns between elderly-user and power-user on the dashboard

Related Tools

attention_compare -- Compare two personas' attention patterns
empathy_audit -- Full accessibility audit (includes attention analysis)
cognitive_load_estimate -- Cognitive complexity estimation

Your Visual Reports Gallery

Every attention heatmap this tool generates saves to your account. View, filter, and compare all your heatmaps at cbrowser.ai/account/reports. Click any image to expand with full metadata.

Tool Attention Analysis