Heatmapping is a fun and useful tool for web designers who want to gain insight into how users interact with their content. Most heatmaps look like a screenshot of a webpage with colorful overlays indicating where most people navigate to with their cursors.
Imagine you were to point a heat-sensing camera at a room. You might see bright orange coloring where there are groups of people, lighter orange where one person is sitting on their own, and shades of blue in areas where there is no one. Heatmaps apply this concept to web pages and represent user traffic as ‘heat.’
Click Maps
Take the below example of a click map:
Red spots indicate spaces on the page where a large number of people have clicked. Slightly fewer people have clicked in the orange areas and fewer than that in the yellow zones. A few people have clicked in the blue spaces and almost no one has clicked in the empty white spaces.
In this example, you can see that most people have clicked on drop-down menus and the navigation bar since those are the elements that will bring them to a new section from the homepage.
[H2] Scroll Maps
Another type of heatmap is a scroll map, which shows how many users have viewed each part of a page, even if they haven’t clicked anywhere. In these types of heatmaps, it is common to see warmer colors at the top of a page and cooler colors near the bottom. While every user on the site sees the top of a page, fewer will scroll past that, and even fewer scroll all the way to the bottom of a long page.
Here’s an example of a scroll map:
What to Look For in a Heatmap
Heatmaps give you a view into how website visitors interact with your pages. You can use this information to see which page elements are being used as intended, which are being overlooked, and which non-clickable elements may be drawing traffic.
Below we’ve laid out questions to ask yourself when analyzing your website’s UX with heatmaps.
Are Clickable Elements Getting Clicks?
Your site probably uses clickable icons, buttons, or dropdowns that allow users to navigate between pages or complete actions like signing up for a newsletter or making a purchase. Check to make sure these parts of the page show up as warm colors in your heatmaps.
If they are not, they may not be designed in a way that makes it obvious to users that they are interactive. With a few tweaks, this is usually an easy fix. Try highlighting clickable elements with eye-catching color to make sure they stand out from the static parts of the page.
Use a scroll map to see if users are scrolling down to where these clickable elements are on the page. If they are near the bottom, it’s possible that users simply aren’t getting far enough to see them before navigating to a new page. In this case, important clickable elements should be moved to the top.
Which Elements Are Being Clicked the Most?
If your site has a conversion action like a newsletter sign-up or add-to-cart, it is a positive sign to see many clicks on these elements. If another navigation element is drawing large amounts of clicks ask yourself if this could be hurting your conversion rate. Ideally, the most important elements—like conversion events—will show up in the “hottest” colors.
Are Users Clicking on Non-Interactive Elements?
Heatmaps are a good way to show when many users are clicking on page elements that are not meant to be clicked and don’t serve any interactive purpose. Sometimes this happens if a phrase in a text element is bolded, causing users to think the phrase is hyperlinked.
Are Users Scrolling?
Use scroll maps to see if users are scrolling through all of your content. If warm colors are concentrated only on the very top of the page, the bulk of your content may be going unnoticed. In these cases, can you use navigation elements at the top of the page to bring users directly to important sections lower down? It’s good practice to make sure your most important elements, such as conversion events, are situated at the very top of the page.
Is the Color Gradient in Your Scroll Map Smooth?
It is not unusual for users to gradually drop off as they scroll down the page. However, if there is a sharp color change in your scroll map at a particular point, this indicates that large numbers of users are dropping off at that point. Can you pinpoint anything at that scroll height that may be causing such a notable drop-off? This might be a confusing bit of text, a graphic that is too large, or some other piece of information that may turn users away.
Setting Up Heatmaps for Your Website.
Below are a few heatmap services to try out. Most offer free trial periods or free packages so you can experiment with heatmaps to get a feel for them.
Want to learn more about UX/UI design? Check out our comprehensive guide and find bootcamp programs to level up your skills.
