Heatmap Attention Score Estimator
Estimate user attention on page elements based on position and contrast. Enter values for instant results with step-by-step formulas.
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.