Discover Mobile App Heatmaps to Create Powerful Products

UXCam
Product Coalition
Published in
5 min readFeb 6, 2020

--

Mobile app heatmap

The best product teams have a stronger analytics set-up than the competition.

And if your product team is open to new technology, you can instantly gain an edge on the market. One of those new technologies are mobile heatmaps — they are widely adopted on the web, but haven’t been used much on mobile apps yet.

What is a Mobile App Heatmap?

Here’s a fact: Compared to web, there are not many solutions for mobile app heatmaps on the market.

And there are good reasons for that — most companies think that mobile heatmaps are too complex.

Heatmaps for mobile apps are touch heatmaps. Touch heatmaps are, as the name implies, based on gestures of users.

Here’s how it works: The SDK of analytics solutions like UXCam capture every micro-interaction on your app. This means that it saves all gestures on their respective screens.

mobile app heatmap gestures
Examples of mobile app gestures

This includes simple gestures such as taps and double taps, but also sophisticated ones, for example, long press, zoom or trail gestures.

app gesture selection
UXCam’s Gesture Selection in a Heatmap

This data then gets aggregated to generate the heatmaps. Screenshots of each screen serve to give visual context to the heatmaps.

Mobile App Heatmap Benefits

Heatmaps are incredibly valuable to understand if users are getting the right experience from your mobile app. They are easy-to-understand thanks to their visual nature. Using Heatmaps, you can:

— Find out which elements get the most attention

— Increase conversions

— Find out if users touch on elements that are unresponsive

— Identify device-specific user behavior

— Make decisions for A/B testing

One should not forget about the human element in a modern enterprise as well: Analyzing heatmaps is intuitive, which makes them ideal to show to stakeholders who are no experts in UX Design.

experience analytics world

The Difference between Mobile and Web Heatmaps

First, anyone who worked on both a web and mobile product knows about the general differences between mobile and website navigation.

Websites are placed on bigger screens and have a different input method than mobile apps (clicks vs. gestures).

thumb position smartphone
Natural thumb position for smartphone users (right-handed)

This makes developing a UX system for mobile apps a unique challenge. Aside from that, the technology is different.

On websites, the HTML code of your website serves as a baseline, then the captured usage data generates the heatmaps.

On mobile apps, the process is more complex since UXCam needs to account for different types of development platforms (Native, React Native, IONIC etc.). In addition, while a website is always the same, the “same” app could be different for iOS or Android. Infinite scrolling on mobile apps presents another technical challenge for mobile app heatmaps.

An additional difference is navigation. You can clearly separate websites by URLs, while mobile apps work on a screen-by-screen basis.

Types of Mobile Heatmaps

Mobile Product Management is hard. But when you understand how to use different types of mobile app heatmaps, life gets much easier.

Rage Tap Heatmaps

Imagine this: You use an app, try to tap on an element, but nothing happens. You try to tap on it a few times, get frustrated and leave the app. UXCam calls this tapping behavior “Rage Tap”. A rage tap is defined by over 2 taps within a certain radius of the screen, and at most 500ms between consecutive taps. With UXCam, you can generate heatmaps that show you rage tap elements to help you decrease user frustration.

2. Unresponsive Gesture Heatmaps

Unresponsive gestures are defined by the following: An element is touched, but it’s not an interactive element. Therefore, the gesture doesn’t result in any responses. Heatmaps of unresponsive gestures can be generated to show you elements that get attention when they shouldn’t.

3. First Touch Heatmaps

Human beings form a fast first impression. With first touch heatmaps, you can see where users intuitively tap on when they first see a screen.

4. Last Touch Heatmaps

It’s insightful to know how users leave your app. Last touch heatmaps allow you to see the leaving touch of each screen.

5. Device Heatmaps

When you develop a mobile app, the large number of devices and device sizes that you need to test for is a challenge. If you look at heatmaps for specific devices only, you can identify issues that are caused by specific smartphones.

6. Landscape and Horizontal Heatmaps

Users might not only use your app in landscape mode, but they also might do it in horizontal mode. You can adjust the heatmap accordingly and find differences in usage if users flip the phone.

Conclusion

Heatmaps for mobile apps have more to offer than what you’d first expect.

Above all, if you suffer from bad app store ratings that were caused by bad usability — as many product managers do — using heatmaps will give you a perfect start to clean up your app. Get started with a free trial for UXCam.

heatmap guide

--

--

The single source of truth for mobile app user behavior 🙋‍♂️📲 = 📈