A heatmap records users’ activity on a web page. This tool has the ability to measure many factors- user clicks, visitors’ engagement, the places people spend time on a page. This data allows improving the design, functionality, and organization of a website. Tracking results can help us figure out if we need to make adjustments to any bottle-necks in user flow, make certain fonts bigger and more clear, or review call-to-action (CTAs) placements. It can also help with search engine optimization strategies.
To understand the user experience of a customer navigating a website through a computer or a smart screen, we need to know several facts:
How do visitors use the site?
Where do they click?
How much are they scrolling on the page?
Which parts of the page do they hover over?
What actions can we optimize to increase profits?
Thanks to heatmaps, we can track all these behaviors and determine the ‘popularity’ of different page elements. This is extremely valuable information available for desktop, laptop, tablet and smartphone visitors. This transcript helps us see the changes that need to happen in order to guide users towards a better conversion rate.
How to Read a Heatmap
Heatmaps are very easy to read and self-explanatory. They do not require analysis interpretation. Visualization is represented using colors with “hot” and “cold” density zones on a map. In most cases, warmer colors (red and yellow) indicate lots of activity, while cooler colors indicate little to no activity. The darker the shade, the greater the quantity/the higher the value.
There are several functions recorded by a heatmap:
Clicks are recorded whether they open interactive links or not. This is very helpful to see if people are clicking on elements that look like links, but are not.
Scrolls (or swipes) are displayed in horizontal bands showing the percentage of users that reached each part of the page. This is helpful to see if any content is being skipped or if people get bored and exit the page before seeing the entire content. This is an opportunity to investigate if a link is taking people out of your site or if the information featured on a particular page is irrelevant to users.
Mouse movement shows which part of the page your audience focuses on. This data only applies to user hovering over content with a mouse. The heatmap software cannot yet detect finger hovering over a smart device.
Heatmaps are a lot more visual than standard analytics reports, which makes them easier to read, particularly to people who are not accustomed to analyzing large amounts of data in table views.
Analytics tools are great at capturing page visit metrics but may lack information about how users engage with the content. Heatmaps on the other hand can give us a more comprehensive overview of visitors’ behavior. Some analytics tools (like Google Analytics), consider different links to the same destination as the same link. This makes it impossible to tell which of the page links has received the most clicks.
By combining both traditional analytics with a heatmap, we can start a deeper investigation and resolve UX inefficiencies. For example, we can identify why a page that attracts lots of traffic doesn’t convert. The heatmap software can give us clues about the invisible hurdles users are struggling with.
Let’s take an example. We recently installed a heatmap on a sales page. The page is promoting different brands of sunglasses and features really beautiful icon art. After running a heatmap for a week, we realized many people were trying to click on the icons. The problem- none of those icons were clickable. They were designed as part of brand’s story. The heatmap reading was very helpful. We used this feedback to add information. Now when a visitor hovers over the icons -sales advice pops up on the screen.
A heatmap tool can also help identify areas of a site that cause confusion. Analyzing the heatmap of a different project helped us see that users were struggling with competing calls-to-action the company had originally designed. The “donate now” button on this particular page was placed way too close to the “sign up for our newsletter link”.
There are a lot of Heatmap tools on the market. Here is a list of the most popular ones:
For marketing advice or for help testing your existing website design, say email@example.com