Heatmap Attention Score Estimator

Formula

Attention = (Fold × 0.35 + Scroll Retention × 0.25 + Size × 0.2 + Contrast × 0.15 + Proximity × 0.05) × Device

Weighted combination of position relative to fold (35%), scroll retention at depth (25%), element size (20%), color contrast (15%), and proximity to anchor points (5%).

Worked Examples

Example 1: Hero CTA Button

Problem: Desktop page. CTA button: 400px from top, 250×60px size, 85% color contrast, 100px from main headline. 2000px page height.

Solution: Position: 400px (above 900px fold) ✓\nFold score: 100\n\nScroll depth: 400/2000 = 20%\nScroll retention: 90%\n\nSize: 250×60 = 15,000px² (Good)\nSize score: (250/300)×100 = 83\n\nContrast: 85 (Excellent)\nProximity bonus: <100px = +20\n\nAttention: 100×0.35 + 90×0.25 + 83×0.2 + 85×0.15 + 20×0.05\n= 35 + 22.5 + 16.6 + 12.75 + 1 = 87.85\n\nRating: Prime Position\nEstimated view: 83%\nEstimated CTR: 2.9%

Result: 88/100 attention (Prime) | 83% view rate | Above fold optimized

Example 2: Mid-Page Feature

Problem: Desktop. Feature at 1500px, 180×180px, 60% contrast, 400px from CTA. 2200px page.

Solution: Position: 1500px (below 900px fold)\nFold score: 100 - ((1500-900)/100)×5 = 70\n\nScroll depth: 1500/2200 = 68%\nScroll retention: 40% (users drop off)\n\nSize: 180px (small)\nSize score: (180/300)×100 = 60\n\nContrast: 60 (Moderate)\nProximity: 400px = +0\n\nAttention: 70×0.35 + 40×0.25 + 60×0.2 + 60×0.15\n= 24.5 + 10 + 12 + 9 = 55.5\n\nRating: Moderate Attention\nMany users won't see this.

Result: 56/100 attention (Moderate) | 40% view rate | Move up or enlarge

Example 3: Footer Element (Low Attention)

Problem: Mobile. Element at 2500px, 150×100px, 70% contrast. 3000px mobile page.

Solution: Position: 2500px\nMobile fold: 700px\nFold score: 100 - ((2500-700)/100)×5 = 10 (floor at 20)\n\nScroll depth: 2500/3000 = 83%\nScroll retention: 20% (footer traffic only)\n\nSize: 150×100 = small\nSize score: (150/300)×100 = 50\n\nContrast: 70 (OK)\n\nAttention: 20×0.35 + 20×0.25 + 50×0.2 + 70×0.15\n= 7 + 5 + 10 + 10.5 = 32.5\n\nMobile multiplier: 32.5 × 1.1 = 36\n\nRating: Low Visibility\nOnly 5-10% will see this element.

Result: 36/100 attention (Low) | Footer placement | Expect <10% views

Frequently Asked Questions

What is a heatmap in web design?

Heatmaps visualize where users look, click, or scroll on a page. Red = high attention, blue = low. Types: click heatmaps (where users click), scroll heatmaps (how far they scroll), and eye-tracking heatmaps (where they look).

How does element position affect attention?

F-pattern (desktop) and Z-pattern (mobile) dominate eye movement. Top-left gets most attention. First screen (hero) gets 80% of attention. Every 500px down halves attention. Upper left quadrant is prime real estate.

What tools measure actual attention?

Heatmap tools: Hotjar, Crazy Egg, Microsoft Clarity (free), Mouseflow. Eye-tracking: more accurate but expensive (Tobii, EyeQuant). A/B testing measures impact on conversions.

Does mobile change attention patterns?

Yes: smaller screens mean less simultaneous content, more linear scrolling, thumb zone matters (bottom third most accessible), and tap targets need 44px minimum. Mobile users scroll more but convert less.

How do I interpret the result?

Results are displayed with a label and unit to help you understand the output. Many calculators include a short explanation or classification below the result (for example, a BMI category or risk level). Refer to the worked examples section on this page for real-world context.

How accurate are the results from Heatmap Attention Score Estimator?

All calculations use established mathematical formulas and are performed with high-precision arithmetic. Results are accurate to the precision shown. For critical decisions in finance, medicine, or engineering, always verify results with a qualified professional.