Fix mobile navigation issues with dynamic heatmaps & recordings

1. Use a dynamic heatmap software like Lucky Orange to view engagement with your mobile navigation elements like expandable menus. Start with a high-impact page such as your home page or one that is a critical part of the conversion process.

Some heatmap software programs are not dynamic and don’t allow you to evaluate user engagement with elements like overlays, expandable/hamburger menus or single-page apps. A website being viewed on a mobile phone with a Lucky Orange dynamic heatmap showing engagement with an expandable navigation element. Areas with more visitor engagement are shown with a red or orange overlay on them.

2. Use the device menu to view traffic from phone or tablet visitors.

If your website is optimized for mobile, filtering by device type allows you to see your website exactly how a user on that specific device type sees your website. A screen shot of the Lucky Orange app showing how to filter traffic to see a heatmap with only interaction from visitors from mobile devices.

3. Choose a precise interactions heatmap to see additional detail like exactly where a visitor tapped.

Instead of a colored overlay, a colored dot is displayed to show the exact point where a visitor interacted with your site. A Lucky Orange heatmap showing the precise location mobile phone users engaged with a website. Areas where a visitor tapped are shown with an orange dot overlaid on the website.

4. Use the Elements option to see the parts of your site that received the most engagement from visitors.

Elements are ordered by the number of clicks they received from visitors. The warmer overlays – reds and oranges – show where most visitors are engaging with your site. A Lucky Orange heatmap on a mobile device with the option to see the percentage of visitor engagement different elements on a website received.

5. Look for engagement issues with aspects of your site that might be problematic for mobile visitors.

See if expandable menus are working properly. You should see warmer overlays on the menu expand icon as well as items inside the menu.  Review CTA buttons and note the amount of user engagement. Evaluate forms to make sure visitors can engage with all the fields without having to pinch the screen or scroll for a lengthy period of time.

6. Review a heatmap of the same page with traffic filtered to desktop users to compare engagement on mobile with engagement on desktop. User engagement should be proportionate if your website is responsive.

If you see significantly lower engagement with an element for mobile visitors than from desktop, it can be an indicator of a mobile-specific problem.

7. If you find differences in engagement between mobile and desktop users, view recordings to see firsthand what the visitor experienced.

Click the Recordings menu to see a playback of a visitor engaging with the page. Recordings are already filtered based on the parameters you set for the heatmap.