Heatmaps for Mobile Websites: Complete Guide

Why Mobile Heatmaps Matter

Mobile traffic crossed the 50% threshold years ago, and for many industries—retail, travel, food service, local businesses—it's now 70% or higher. Despite that, conversion rates on mobile consistently trail desktop by 40–60%. The gap isn't because mobile users don't want to convert. It's because the mobile experience is often worse, and most teams don't have the data to understand why.

Standard analytics tools tell you that mobile users bounce more and convert less. They don't tell you that your "Add to Cart" button sits outside the natural thumb zone, that users never scroll past your third section, or that people are tapping on an image expecting it to zoom and nothing happens. That's the gap mobile heatmaps fill.

A mobile heatmap is a visual overlay that shows aggregated interaction data specifically from mobile visitors. It reveals tap locations, scroll depth, and attention distribution on the mobile version of your pages. Because mobile layouts, interaction patterns, and screen constraints differ fundamentally from desktop, looking at a combined heatmap that mixes desktop and mobile data gives you a distorted picture. You need mobile-specific data to make mobile-specific decisions.

How Mobile Heatmaps Differ from Desktop

If you've used website heatmaps on desktop, mobile heatmaps will look familiar but the data tells a very different story. The differences come down to three categories: input method, screen geometry, and context of use.

Touch vs. Mouse

Desktop users navigate with a mouse that provides continuous position data. You can track mouse movement, hovers, and clicks—each revealing something about intent. Mobile users interact through touch, and touch is fundamentally binary: either a finger is on the screen or it isn't. There's no hover state, no gradual approach toward a button, no visible cursor that telegraphs intent before a tap happens.

This means mobile tap heatmaps show committed interactions only. Every dot on a mobile heatmap represents a deliberate action (or at least an attempted one). On desktop, click heatmaps include exploratory hover-clicks on menus and tooltips. On mobile, you're seeing pure intent—which makes the data arguably more valuable for understanding what users actually care about.

Touch input is also less precise than mouse input. Fingertips cover roughly 40–50 pixels of screen area, compared to a mouse cursor's 1-pixel precision. This matters when interpreting heatmaps: a cluster of taps around a small button might indicate that users are trying to hit it and missing, not that they're interested in the space around it.

Viewport and Layout Differences

A desktop browser window might be 1440 pixels wide. A phone in portrait mode is 375–430 pixels wide. The same website renders very differently at these widths, especially if it uses responsive design. Navigation collapses into hamburger menus, multi-column layouts become single-column, sidebar content gets pushed below the main content, and font sizes adjust.

This is why mixed-device heatmaps are misleading. If 60% of your traffic is mobile and 40% is desktop, a combined heatmap will overlay tap coordinates from a 390px-wide layout onto click coordinates from a 1440px-wide layout. The positions don't correspond to the same elements. You need separate heatmaps per device type to get accurate data.

Thumb Zones and Reachability

On mobile, ergonomics matter. Most people hold their phone with one hand and navigate with their thumb. Research by Steven Hoober shows that the "natural" thumb zone—the area comfortably reachable without shifting grip—covers roughly the bottom-center third of the screen. The top-left corner is the hardest area to reach.

Mobile heatmaps reveal whether your most important interactive elements fall within the comfort zone. If your primary call-to-action lives in the top-right corner of the mobile layout, heatmap data will likely show lower engagement even if the button is visually prominent. Users won't stretch for it if there's any friction at all.

Types of Mobile Heatmaps

Tap (Click) Heatmaps

Tap heatmaps show where mobile users touch the screen. Every tap is recorded as a coordinate, and the heatmap aggregates these into a color-coded overlay—hot (red/orange) areas get the most taps, cool (blue/green) areas get few. This is the mobile equivalent of a click heatmap, and it's the most commonly used type.

Key things to look for in tap heatmaps:

• Ghost taps—clusters of taps on non-interactive elements (images, headings, styled text). These indicate that users expect something to happen and nothing does.
• Missed taps—taps scattered around a button rather than on it, suggesting the tap target is too small.
• Concentration vs. spread—are taps focused on your key CTAs, or dispersed across the page? Spread patterns suggest the user doesn't know what to do next.

Scroll Heatmaps

Scroll heatmaps show how far down the page mobile visitors scroll before leaving. The page is divided into bands, with each band colored by the percentage of visitors who reached it. The top of the page is always 100% (everyone sees it), and the percentage drops as you go down.

Mobile scroll behavior differs from desktop in important ways. Mobile users tend to scroll faster and less deliberately—the swipe gesture encourages rapid movement through content. This means that while mobile users may technically scroll further down a page, they may not actually read or engage with the content they pass through. Scroll depth alone doesn't equal attention.

The practical implication: on mobile, the content you place above the fold (visible without scrolling) carries even more weight than on desktop. If your scroll heatmap shows a sharp drop-off at 30% of the page, everything below that line is essentially invisible to most mobile visitors.

Eye-Tracking Heatmaps

Eye-tracking heatmaps predict where users focus their visual attention on the page. On desktop, these are modeled from mouse movement patterns (research shows a strong correlation between cursor position and gaze direction). On mobile, the model adapts to use scroll position, tap patterns, and time spent in viewport regions to estimate attention distribution.

Eye-tracking heatmaps are especially valuable on mobile because they reveal the gap between what's visible and what's seen. A section might be fully in viewport, but if users are scrolling quickly past it, the eye-tracking heatmap will show it as a cold zone. This helps you distinguish between content that mobile users engage with and content they merely scroll through.

Setting Up Mobile Heatmaps in Inspectlet

Automatic Capture—No Extra Setup

If you've already installed the Inspectlet tracking script on your site, mobile heatmaps are already being collected. The tracking script detects mobile devices automatically and captures touch events, viewport dimensions, zoom interactions, and scroll behavior. There's no separate mobile configuration, no additional script, and no need to tag your mobile pages differently.

Inspectlet captures the actual structure and styling of your pages as rendered on each device. This means your mobile heatmaps render against the real mobile layout, not a scaled-down desktop screenshot. Responsive layouts, mobile-specific navigation, and touch-friendly elements all appear as the mobile user actually saw them.

Choosing Device Breakpoints

Inspectlet's heatmap viewer includes built-in device breakpoints that let you switch between different viewport sizes: Desktop, Tablet, Mobile landscape, Mobile portrait, and Custom width (where you specify an exact pixel value). Each breakpoint shows heatmap data only from sessions that fell within that viewport range.

This is critical for accurate analysis. A heatmap for your tablet layout at 768px wide will show different interaction patterns than the same page at 390px in portrait mode. The navigation, content flow, and element positions often change between these breakpoints. Reviewing each breakpoint separately ensures you're seeing how users interact with the layout they actually experienced.

If your site has unusual breakpoints (say, a specific layout at 600px for a kiosk display), the custom width option lets you view heatmap data for that exact configuration.

Filtering by Device Type

Beyond heatmap breakpoints, you can filter all of Inspectlet's data by device type using Magic Search. This lets you isolate mobile-only sessions in session recordings, form analytics, and funnel reports. You can also combine device filters with other criteria—for example, mobile users who reached the checkout page but didn't complete the purchase.

Reading Mobile Heatmap Data

Tap Patterns and Thumb Zones

When you open a mobile tap heatmap, the first thing to check is whether the hot zones align with your intended primary actions. On a product page, you'd expect the hottest area to be the "Add to Cart" button. On a landing page, it should be your main CTA. If the hottest zone is somewhere unexpected—a decorative image, a non-linked heading, or the navigation toggle—that's a signal your layout isn't guiding mobile users where you want them.

Next, overlay thumb zone maps mentally. The highest-engagement areas should ideally sit in the natural thumb zone (bottom-center of the screen). If your most-tapped element is in the top-left corner, users are reaching for it, which increases the chance of accidental taps on nearby elements and makes the interaction feel effortful.

Scroll Depth on Mobile

Mobile users have shorter effective attention spans when browsing, partly because of context (on the bus, in a queue, during commercials) and partly because of screen size (less content visible at once means more scrolling required). Expect sharper scroll drop-offs on mobile compared to desktop for the same page.

A well-performing mobile page keeps 60–70% of visitors to the halfway point. If your scroll heatmap shows only 30% of mobile visitors reaching the midpoint, your above-the-fold content isn't compelling enough to keep them going, or your page is simply too long for mobile consumption. Consider restructuring: move your most important content and CTAs higher, and use progressive disclosure (expandable sections, "load more" patterns) instead of long single-stream layouts.

Eye-Tracking Insights for Mobile Layouts

Eye-tracking heatmaps on mobile tend to show a strong center bias—mobile users focus most of their attention on the center of the screen, with peripheral attention dropping off rapidly. This makes sense: on a 390px-wide screen, there's very little peripheral content. The practical takeaway is that centered content and CTAs consistently outperform left-aligned or right-aligned elements on mobile.

Another common pattern in mobile eye-tracking data is what researchers call "spotlighting"—intense attention on one area followed by a rapid scroll to the next point of interest, with almost no attention to the content in between. This differs from the gradual scanning pattern seen on desktop. If your mobile eye-tracking heatmap shows cold stripes between hot spots, the content in those stripes is effectively invisible, no matter how well-written it is.

Common Mobile UX Problems Heatmaps Reveal

Buttons Too Small or Too Close Together

Apple's Human Interface Guidelines recommend a minimum tap target of 44×44 points. Google's Material Design recommends 48×48dp. Yet countless mobile sites have buttons that are 30px tall, links crammed together with 8px of spacing, or form elements that require precision tapping. Mobile tap heatmaps reveal this problem clearly: you'll see a scattered cluster of taps around a small target, with many taps missing entirely and hitting adjacent elements or empty space.

Content Below the Fold That Nobody Sees

Scroll heatmaps often reveal that key content—pricing tables, testimonials, secondary CTAs—lives below where most mobile users stop scrolling. On desktop, users might scroll because they can see a teaser of the next section in the viewport. On mobile, the viewport is small enough that there's no visual cue that more content exists below, especially if a section visually "completes" at the bottom of the screen.

Horizontal Scroll Issues

Horizontal scrolling on mobile is almost always unintentional and confusing. If your layout has elements that overflow the viewport width—wide tables, oversized images, code blocks, or third-party embeds—mobile users may accidentally trigger horizontal scrolling and lose their place on the page. Heatmap data will show unusual tap patterns and low engagement below the overflow point, because users who encounter unexpected horizontal scrolling often leave.

Form Fields That Cause Abandonment

Mobile form completion is one of the biggest conversion bottlenecks on the web. Form analytics combined with mobile heatmaps reveal which fields are problematic: fields where users tap but don't type (confusing labels), fields that get re-tapped multiple times (hard to select on small screens), and the exact field where users abandon the form entirely. Common culprits include date pickers that aren't mobile-optimized, dropdowns with too many options, and address fields without autocomplete.

Hamburger Menus That Users Ignore

The hamburger menu (≡) is ubiquitous on mobile, but heatmap data consistently shows that a large percentage of mobile users never open it. Studies vary, but engagement rates with hamburger menus typically range from 20–40%—meaning the majority of your mobile visitors never access the navigation options hidden behind it. If your mobile heatmap shows almost no taps on the hamburger icon, critical navigation paths may need to be surfaced directly in the visible layout.

Mobile-Specific Optimization Strategies

Once your mobile heatmaps reveal where users struggle, apply these proven strategies:

1. Increase tap target sizes. Every interactive element should be at least 48×48 pixels, with at least 8px of spacing between adjacent targets. This single change often produces the biggest improvement in mobile engagement.
2. Prioritize above-the-fold content. Put your primary value proposition and CTA where 100% of mobile visitors will see them. Scroll heatmaps should confirm that your most important content sits above the sharpest drop-off point.
3. Replace hamburger menus with visible navigation for your top 3–4 most-used pages. A bottom tab bar or a compact horizontal nav often outperforms a hidden hamburger by 2–3x in engagement.
4. Use sticky CTAs. A fixed-position button at the bottom of the mobile viewport keeps the primary action within thumb reach at all times, regardless of scroll position.
5. Simplify forms ruthlessly. Remove every field that isn't strictly necessary for mobile. Use autofill, smart defaults, and mobile-native input types (type="tel", type="email") to reduce friction.
6. Eliminate horizontal overflow. Set max-width: 100% on all media and embeds. Use responsive tables or horizontal scroll containers only when explicitly intended and clearly indicated.
7. Design for thumb reach. Place primary actions in the bottom-center of the screen. Move destructive actions (delete, cancel) to harder-to-reach areas to prevent accidental taps.

Combining Mobile Heatmaps with Session Replay

Heatmaps tell you where users interact. Session replay tells you why. The combination is particularly powerful on mobile, where interactions are more compressed and context-dependent.

Here's a workflow that works well: start with a mobile tap heatmap to identify unexpected patterns—ghost taps on non-interactive elements, low engagement on a key CTA, or drop-offs at a specific scroll depth. Then filter your session recordings to mobile-only sessions on that page and watch 10–15 of them. The replays will show the full context: what the user did before and after the problematic interaction, whether they pinched to zoom (a sign that text is too small or elements are hard to target), and exactly where they gave up.

Inspectlet's mobile session replay captures the complete mobile experience, including viewport changes, orientation shifts, and zoom behavior. When a mobile user pinches to zoom into a form field, you'll see it. When they rotate their phone from portrait to landscape to get a better view of a table, you'll see that too. These details are invisible in heatmap data alone but often explain the patterns you see.

Mobile A/B Testing with Heatmap Validation

Heatmaps are a powerful complement to A/B testing on mobile. Here's why: an A/B test tells you which variant won, but not why. If you run an A/B test that moves your CTA from the top of a mobile page to the bottom and Variant B wins by 15%, the test result alone doesn't explain the mechanism. Was it thumb zone proximity? Was it that users had scrolled past more persuasive content before reaching the CTA? Did the original position suffer from accidental taps?

Running mobile heatmaps on both variants simultaneously gives you the answer. You can compare tap distributions, scroll depth, and attention patterns between variants to understand the behavioral difference, not just the metric difference. This understanding compounds: it informs your next test hypothesis, making your optimization cycle faster and more directed.

Practical tips for mobile A/B testing with heatmaps:

• Run heatmaps on both variants from the start of the test, not as an afterthought
• Use the same device breakpoint when comparing variants to ensure a fair comparison
• Pay special attention to scroll depth—mobile layout changes can dramatically affect how far users scroll
• If Variant A has more ghost taps (taps on non-interactive elements), it likely has a less clear visual hierarchy

Frequently Asked Questions

Do I need to install anything extra for mobile heatmaps?

No. If the Inspectlet tracking script is on your site, mobile data is captured automatically. The script detects mobile devices, records touch events, and tracks viewport dimensions without any additional configuration. You switch between mobile and desktop heatmaps using the device breakpoints in the heatmap viewer.

Can I see heatmaps for a specific phone model or screen size?

Inspectlet's heatmap viewer offers preset breakpoints for desktop, tablet, mobile landscape, and mobile portrait. You can also enter a custom pixel width to match a specific screen size. If you need to target sessions from a particular device model, use Magic Search to filter sessions by device before generating the heatmap.

How is mobile scroll depth different from desktop?

Mobile users typically scroll faster and less deliberately, driven by the swipe gesture. They may scroll through more content but engage with less of it. Scroll heatmaps often show steeper drop-offs on mobile, especially on long-form content pages. The critical threshold is your first visible CTA: if the scroll heatmap shows significant drop-off before that point, you need to move it higher.

What are ghost taps and why do they matter?

Ghost taps are taps on non-interactive elements—images, headings, or styled text that users expect to be clickable. They show up as heat on tap heatmaps in areas where there's nothing to tap. Ghost taps represent missed opportunities: either make those elements interactive (link the image, expand the heading) or redesign them so they don't look tappable.

How do eye-tracking heatmaps work on mobile without a camera?

Eye-tracking heatmaps don't use a camera. They use predictive models that estimate visual attention based on behavioral signals—scroll position, time spent in each viewport region, and tap patterns. On mobile, these models are adapted for the smaller screen and touch-based interaction patterns. While not as precise as hardware eye-tracking, they reliably identify the high-attention and low-attention zones on your mobile pages.

Should I look at mobile and desktop heatmaps separately?

Always. Combining mobile and desktop data produces a misleading heatmap because the page layouts are different, click/tap positions don't correspond to the same elements, and the interaction patterns are fundamentally different. Analyze each device category separately, then compare insights to find issues that are unique to mobile versus issues that affect all users.

Can mobile heatmaps show pinch-to-zoom behavior?

Heatmaps themselves don't visualize zoom gestures, but Inspectlet's mobile session recordings capture pinch-to-zoom and viewport scale changes. If you see unusual tap patterns in a heatmap (e.g., taps clustered on a zoomed-in area), watching the corresponding session replays will reveal whether users were zooming in—a strong signal that text is too small or tap targets are too close together.