Why device filters matter
Visitors experience different layouts on desktop, tablet, and mobile. Heatmaps should be reviewed by device so the data matches the layout being displayed.
A desktop heatmap over a mobile layout can be misleading. Always select the device that matches the visitor data you want to inspect.
Desktop heatmaps
Desktop heatmaps are useful for reviewing:
- large navigation menus
- hover and pointer movement
- wide pricing tables
- multi-column layouts
- desktop calls to action
Move heatmaps are most useful on desktop because visitors use a pointer.
Tablet heatmaps
Tablet layouts often sit between desktop and mobile. They may use different navigation, spacing, or breakpoints.
Review tablet heatmaps separately when tablet traffic matters or when your design has tablet-specific layouts.
Mobile heatmaps
Mobile heatmaps show taps, scrolling, and attention on smaller screens.
Use mobile heatmaps to check:
- tap target size
- sticky buttons
- mobile menus
- form fields
- long-page scroll depth
- content hidden below the fold
Mobile users often behave differently from desktop users, especially on forms and checkout pages.
Device-specific issues
Common device issues include:
- calls to action too low on mobile
- desktop navigation hidden on tablet
- mobile tap targets too small
- content order changing by breakpoint
- sticky headers covering content
- forms becoming harder to complete on small screens
Device checklist
- Start with the device that has the most traffic.
- Compare desktop and mobile before making page changes.
- Use scroll heatmaps to check mobile content depth.
- Use friction heatmaps for device-specific frustration.
- Watch recordings for the device with the issue.