A heatmap shows you how visitors interact with your website and – just as importantly – how they don’t interact. In statistics, it’s a graphical representation of data where the data values are shown as colors.
Where other services like Google Analytics show static data such as session length, heat maps give extraordinary details about how your users actually use your site. This means you can pinpoint elements of your website layout that deserve extra attention and care.
Photo from Hotjar
The data on the left is the same as that on the right—but one is much easier to understand. The practice we now call heatmaps is thought to have originated in the 19th century, where manual gray-scale shading was used to depict data patterns in matrices and tables.
An early heat map showing population density in 19th Century Paris districts. Photo from Hotjar.
The term heatmap was first trademarked in the early 1990s, when software designer Cormac Kinney created a tool to graphically display real-time financial market information.
Analyzing your web traffic is extremely important when it comes to optimizing your site for conversions and user experience. Heatmaps are a great way of analyzing which parts of your website are popular with users and which parts need improvement. Mouseflow, Hotjar, Attention Insight and Visitor Analytics are definitely some of the best software.
The benefits of using heat maps on your website
Heatmaps help product managers and website owners understand how people interact with their website pages to find answers to critical business questions and goals such as ‘why are my users not converting?’ or ‘how do I get more visitors to take action?’ Using heatmaps, you can determine if users are:
Reaching important content or failing to see it
Finding and using a page’s main links, buttons, opt-ins, and CTAs
Getting distracted by non-clickable elements
Experiencing issues across devices
As a visual tool, heat maps help you make informed, data-based decisions for A/B testing, updating, or (re)designing your website. They're also useful on a wider business scale: heat maps let you show team members and stakeholders what’s happening and get their buy-in more easily when changes are needed—it’s hard to argue with a heat map!
What are the different types of heatmaps?
Heatmap is really an umbrella term for different heatmapping tools: scroll maps, click maps, and move maps. Knowing the difference is handy, as each type helps you investigate a slightly different aspect of your website and product performance.
1. Scroll Maps
An example scroll map
Scroll maps show you the exact percentage of people who scroll down to any point on the page: the redder the area, the more visitors saw it.
2. Click Maps
A click map example
Click maps show you an aggregate of where visitors click their mouse on desktop devices and tap their finger on mobile devices. The map is color-coded to show the elements that have been clicked and tapped the most (red, orange, yellow).
3. Move maps
A move map example
Move maps track where desktop users move their mouse as they navigate the page. The hot spots in a move map represent where users have moved their cursor on a page, and research suggests a correlation between where people are looking and where their mouse is—meaning that a move map gives you an indication of where people might be looking as they go through your page.
4. Desktop & mobile heatmaps
A desktop (left) and mobile (right) click map
Desktop and mobile heat maps help you compare the performance of your website on different devices. For example, content that is prominent on a desktop page might sit much further below the fold on a phone—and you need to see if interaction differs, and how.
Conclusion
Heatmaps are easy to create and understand, and they let you discover actionable insights that help you improve the user journey and your product pages to increase retention and sign-ups on your website!
Photo by Sharon McCutcheon on Unsplash