Whether you’re a UI or UX designer, heatmaps are incredibly important for you. In this post, we’re going to highlight 5 questions you, as a designer, should ask.
Before getting into the details, let’s talk about what heatmaps are and their types.
What are heatmaps?
Heatmaps are graphical representations of data. The purpose of heatmaps is to show you user engagement and site interaction at scale.
The data is shown in two colors: red and blue. Red shows the hot areas, the ones that get lots of attention, on the page. Blue shows the cold areas, the ones that get little attention, on the page.
Types of heatmaps
Before talking about the 5 things you should know about heatmaps, it’s best to know the type of heatmaps you’re going to need. When you know what’s the purpose of the heatmap you’re using, you’ll be better able to understand why you’re using it.
In total, you’ll need 4 types of heatmaps for following the 5 tips.
Desktop and Mobile map
The function of this heatmap is to compare the performance of web pages across two different devices. You want to use it because sometimes the level of attention a feature receives on mobile and desktop (placed at the same spot) is extremely different.
When you know which feature is getting less attention across both devices and why this is the case, you can come up with a good solution.
Click map
A Click map shows you where users are clicking. It shows the objects clicked most by the users and objects clicked least.
This is a big advantage. When you know how many times an object is being clicked upon and at which area, you can easily find the ideal spot for the object.
Move map
The purpose of a Move map is to tell you where the user is looking on the screen. It does it by tracking the mouse cursor.
Studies have shown a strong correlation between cursor and human eye. This is why a Move map is good for getting an idea about where the users look on the screen.
Scroll map
This one shows you whether the users are scrolling down to the bottom or not, and how many people are scrolling at each area of the page.
5 things you should know
1. Does the main CTA get the most clicks?
Heatmap Type: Click map
Check how many clicks your main CTA is getting. If it’s not getting the most clicks, place it at the spot where people are clicking the most. If this doesn’t work, ask yourself how you can improve your CTA.
2. Are people clicking on the wrong objects?
Heatmap Type: Click map
Find out whether people are clicking at the objects without links. If they are, find out whether the object looks similar to a button. In case it does, change its shape.
3. Does any feature work differently on Mobile vs Desktop
Heatmap types: Click map, Scroll map, Desktop and Mobile maps
To find out whether it's true, here is what you should do. Check if a device is missing an important element and weather users on one device are behaving very differently.
If the answer for any question is a yes, change the design and interface so the user experience on both devices is similar.
4. Are users getting distracted?
Heatmap Type: Move map
Check out at how many places are users moving their mouse to. If they are moving their mouse to elements you don’t want them to, it means they’re distracted by elements that are not important.
The solution is pretty simple. Delete or change the non important elements so the main elements grabs all the attention.
5. How far are users scrolling?
Heatmap type: Scroll map
Here are the things to check. Are users scrolling to the bottom? Where do users stop scrolling? Is there important information below the point users stop scrolling?
To fix any issues related to scrolling, you will have to move the important elements or remove unnecessary ones. Creating shorter pages is also a great idea to keep readers engaged.