TL;DR: Mobile app heatmaps tools like UXCam are underutilized. They are essential to understand user behavior.
“Let’s review the numbers.”, stated my CEO.
It was 2017, and we were developing mobile apps in an ordinary way with “normal” data. Looking at graphs and charts every day got dull, but it got the job done.
One day at a Product Management meetup, a web PM was holding a presentation about his analytics process. He showcased heatmaps as a way to evaluate and iterate on user behavior.
Inspired, I researched heatmaps as an analytics method for our mobile app, but I was disappointed that heatmap vendors focused on web alone.
Later that year, I received a once-in-a-lifetime opportunity to switch jobs and work under one of my role models in product management.
My new supervisor was a master of data-driven product management. He introduced me to a new solution for mobile app heatmaps.
I will be honest here: it was tough to get used to. Heatmaps for mobile apps worked differently than they did for web. I learned to recognize how users handle gestures rather than concentrating on specific interface elements.
I figured it out with time. Thanks to our heatmap analysis, we could fix issues that were impacting our conversion rates.
Today, I don’t start any app analytics process without studying heatmaps.
Now that you know my origin story, let’s dive further into what mobile app heatmaps are and how they can fit into your mobile app analytics stack.
What are mobile app heatmaps?
Heatmaps are a visualized and aggregated overlay of data. The “warmer” the color of the overlay gets, the more interaction takes place. Vice versa, the color gets “colder” on elements that users don’t interact with.
Heatmaps originated in the 19th century and were used to highlight patterns in geography.
One of the first heatmaps by Loua (1873). Image Source
In the image above, for example, the colors emphasize demographic patterns (e.g. age or national origin) across the 20 districts of Paris. Since then, geography widely adopted heatmaps.
It’s unclear when exactly heatmaps first appeared on computer screens, but they took over the web with the rise of its relevance. One of the first tools to offer heatmap analytics was Crazy Egg, which went live in 2006.
To understand what mobile app heatmaps are, we also need to understand what they are not: They are not web heatmaps.
In the web world, the input method (besides typing) are clicks - there are only two types of clicks: left or right click.
On mobile apps, it’s more complicated: The input method is gesture-based. Users use simple gestures such as taps or double taps, but they can also use more complicated ones such as trail, zoom or long press gestures.
Examples of mobile gestures
Therefore, heatmaps for mobile apps are “Touch Heatmaps”. Heatmaps that you know from web like Scroll Heatmaps or Hover Heatmaps are impossible as of now.
This means you have to adjust how you analyze a heatmap for mobile apps. For mobile, it makes more sense to look at the gestures to see if there are:
- Any gestures that shouldn’t have been used on that screen
- Gestures that are unresponsive
- Device specific differences in user behavior
Mobile App Heatmap Tools
I created this list to show you the difference in saturation in the web and mobile app heatmap markets:
While the web market is saturated (maybe even oversaturated), I found only 3 vendors for mobile app heatmaps, and one of them actually shut down.
Appsee used to be a leading company in the mobile app analytics space. They had a good heatmap solution that combined all gestures into one heatmap and could generate heatmaps of unresponsive gestures. Unfortunately, they were acquired in 2019 and it’s not possible to use the service anymore.
User Experior is a young Indian start-up that’s new to the market. Their Heatmap solution looks good, although they still have to prove that they are a reliable solution.
UXCam is the current market leader for mobile app heatmap analytics.
The solution enables you to generate heatmaps based on:
- Gesture Type
- App Version
- Device Size
- OS Version
- First Tap
- Last Tap
Companies like Nissan, OLX or NBC use UXCam.
P.S. If you also want to get started with web heatmaps, I recommend this great Hackernoon article.
How Mobile App Heatmaps work in the Analytics Context
Mobile Heatmaps have interesting synergies along with other analytics methods. First, let's define at what stage in the process you should use heatmaps. I like this framework of lean UX by Dave Landis:
The idea of lean UX is to combine design thinking with a fast and simultaneous start of development. Using this framework, heatmaps can help to revise hypotheses in the design thinking stage, come up with new ideas, and find/fix issues.
Here are a few examples of analytics methods that heatmaps harmonize with:
- Session Replay: Due to the similarities in technology, almost all heatmap vendors both on web and mobile offer Session Replay as well. Session Replay works well with heatmaps in the sense that they are both gesture-based. If you spot an unusual gesture on a heatmap, you can fire up session replays to get context on why that gesture was performed.
- Funnel Analytics: Let's say you create a funnel of e.g. your check-out screen and notice a high drop-off at one particular screen. Now you can look at the heatmap of the screen to investigate the issue further.
- Screen Flow: Screen Flows let you understand the big picture of your app. The advantage of this analytics method is that you can easily spot unusual flows that you can look into with heatmaps.
Conclusion
Heatmaps for mobile apps are still relatively new and under-utilized in the industry. Using them the right way can give you an edge in the crowded app market.
Do you think it's time to give mobile app heatmaps a try yourself?