Heatmap Attention Score Estimator
Estimate user attention on web page elements based on position, size, contrast, and proximity. Optimize layout for maximum visibility and engagement.
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) ✓ Fold score: 100 Scroll depth: 400/2000 = 20% Scroll retention: 90% Size: 250×60 = 15,000px² (Good) Size score: (250/300)×100 = 83 Contrast: 85 (Excellent) Proximity bonus: <100px = +20 Attention: 100×0.35 + 90×0.25 + 83×0.2 + 85×0.15 + 20×0.05 = 35 + 22.5 + 16.6 + 12.75 + 1 = 87.85 Rating: Prime Position Estimated view: 83% Estimated 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) Fold score: 100 - ((1500-900)/100)×5 = 70 Scroll depth: 1500/2200 = 68% Scroll retention: 40% (users drop off) Size: 180px (small) Size score: (180/300)×100 = 60 Contrast: 60 (Moderate) Proximity: 400px = +0 Attention: 70×0.35 + 40×0.25 + 60×0.2 + 60×0.15 = 24.5 + 10 + 12 + 9 = 55.5 Rating: Moderate Attention Many 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 Mobile fold: 700px Fold score: 100 - ((2500-700)/100)×5 = 10 (floor at 20) Scroll depth: 2500/3000 = 83% Scroll retention: 20% (footer traffic only) Size: 150×100 = small Size score: (150/300)×100 = 50 Contrast: 70 (OK) Attention: 20×0.35 + 20×0.25 + 50×0.2 + 70×0.15 = 7 + 5 + 10 + 10.5 = 32.5 Mobile multiplier: 32.5 × 1.1 = 36 Rating: Low Visibility Only 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).
What is the fold in web design?
The fold is the bottom of the visible screen before scrolling. Above-the-fold content gets 80%+ view rate; below-fold drops to 50% then 20% further down. Critical elements should be above fold, especially on mobile.
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 is color contrast and why does it matter?
Contrast ratio between element and background. WCAG recommends 4.5:1 minimum for text, 3:1 for large text. High contrast (70%+) draws attention and improves readability. Use contrast to guide attention to important elements.
How do I improve element visibility?
Tactics: move up the page, increase size, boost color contrast, add white space around it, use directional cues (arrows), animate (subtle), and position near high-attention areas.
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.
What is the banner blindness effect?
Users ignore banner-like elements at page top/sides due to ad conditioning. Avoid: rectangular shapes at top-right, 728×90 dimensions, and excessive borders. Make important content not look like ads.
How do I prioritize page elements?
Hierarchy: 1) Primary CTA above fold, high contrast. 2) Value proposition in hero. 3) Social proof in upper half. 4) Features mid-page. 5) FAQ/details lower. Guide eye-flow with size, color, position.
What affects click-through rates?
Position (above fold 3-5× higher), size (larger = more clicks), color contrast, surrounding white space, clear CTA copy, button vs link styling, and visual hierarchy. Test variations to optimize.