What are Heat Maps used for in User Experience – | Blog

Surely when we consider making a heat map or Heatmap, we already have data on the navigation that users carry out through the pages of the website, having used different techniques. Data such as bounce rate, page views, conversions, etc.

Heatmaps help collect data about how people or users interact with the website and reveal certain aspects of their experience.

What is a Heat Map?

A heat map can be defined as a data visualization that determines how website users click on the different pages that make up the website. The term heat, in the name of this type of test or UX test, is given by the color scale used to represent the data.

The red color (hot), represents the area with the most clicks while the blue color (cold), are the less popular areas, so to speak.

Types of Heat Maps

There are different types of heat maps. Each of the types represent similar but different data.

All heatmaps represent where users show their attention on a web page. Each type of heatmap will say different things.

1. Click Maps

This type of map is used to visualize where users click on a web page. It can also return data on the number of users who visit the page and the percentage of users who interact with a given button or link.

This type of maps is very useful since they are able to pick up if users click on something that is not interactive. This finding may not be so much a weakness as an opportunity. We can detect part of a bad design of something that seems interactive but is not, or put something really interactive in that area.

See also  UX and UI. They don't clash, they complement each other! - USABLES | Blog

2. Displacement Maps or Scroll

These maps represent how far users scroll or move through the pages of the website whether they are scrolling or swiping on a mobile device.
The data is displayed through horizontal bands that show the percentage of users who reached each part of the page.

With this type of maps we can discover several things, such as, for example, if there is a link at the top that users click, taking them out of this page and they do not get to view the parts or contents below the first 670px of the page or if there is a mixture of bad content and design, at some point, that makes users leave the page.

3. Motion or mouse maps

Hover heatmaps indicate which parts of the page users are hovering over and help you discover which elements generate the most interest.

Mouse tracking is a good way to determine where users are looking. Numerous studies indicate that users tend to look at where the mouse cursor is positioned, although to have relevant and conclusive data it is better to use the technique of .

Advantages of using Heat Maps in UX

Heat maps allow us to validate design ideas and spot opportunities to optimize them.

Some of the advantages are these:

  • They help present a design and make sure it works properly.
  • It allows us to check the effectiveness of buttons and other CTAs or calls to action.
  • We will be able, thanks to the heat maps, to measure the extent to which users come to view the content on a page of the site.
  • We will detect clicks in areas that are not clickable, which means a detection of new opportunities.
  • Optimization taking into account users both on desktop and mobile devices.
See also  Responsive or mobile data tables - | Blog

How to make a Heat Map?

There are numerous tools to be able to make heat maps on our sites. I particularly recommend two tools: Hotjar and Crazyegg.

Both tools are very easy to use and to implement on our sites.

1.Hotjar

This tool has many features apart from heat maps. They have a Free account with certain limitations, but for small tests it is really useful.

2. Crazy Egg

Crazyegg also has a Free account with all the options for 30 days.

credits

Loading Facebook Comments ...
Loading Disqus Comments ...