Using Heat Maps to Improve UI design
Heat maps are a user testing methodology that can give designers valuable insights they need for better UX design.
Using a heat map in your UX design process means you can make informed decisions about how you want your product to look as well as understand how your users are interacting with your website.
What is a heat map?
A heat map is a graphical representation of data where the individual values contained in a matrix are represented as colours. “Heat map” is a newer term but shading matrices have existed for over a century.
A heat map is a method of analysis, which when used within UX design, tracks a user’s mouse pointer on the screen. The data is presented using colours so that the information is easily understood. The idea behind a heat map is to track where users are spending time on any given page. They’re a quick way to visualize data.
Heat maps are often seen outside of the world of web design when there is an election taking place. Usually, you’ll see a map of America with varying shades of blue representing the Democrat vote and the same but in red to represent the Republican vote. The darker the red, the more Republican the state, for example.
When it comes to UX design, you can use the data gleaned from a heat map to do tests and further analysis as well as gain an understanding of which areas of your website need to be improved or changed.
A heat map will use a colour spectrum made of warm to cool colours; the warm colours represent where your users linger most, the cold tones are where they spend less time on your webpage.
Several heat map software implementations are freely available:
- R, a free software environment for statistical computing and graphics, contains several functions to trace heat maps, including interactive cluster heat maps(via the heatmap R package).
- Gnuplot, a universal and free command-line plotting program, can trace 2D and 3D heat maps
- Google Fusion Tables can generate a heat map from a Google Sheets spreadsheet limited to 1000 points of geographic data.
- Dave Green’s ‘tube helix’ colour scheme provides resources for a colour scheme that prints as a monotonically increasing greyscale on black and white postscript devices
- Openlayers3 can render a heat map layer of a selected property of all geographic features in a vector layer.
Benefits of Heatmaps
Analytics tools like Google Analytics or Site Catalyst are great at providing metrics to show which pages users visit. Still, they can lack detail when it comes to an understanding of how users engage with those pages. Heatmaps can give a more comprehensive overview of how users are behaving.
Heatmaps are also a lot more visual than standard analytics reports, which can make them easier to analyse at a glance. This makes them more accessible, particularly to people who are not accustomed to analysing large amounts of data.
Right heat mapping tools, such as CrazyEgg and Clicktale, enable analysts to segment and filter the data. This means that it can be easy to see how different types of users are engaging with a particular page.
Heatmaps help visualize data — they might, for example, outline the weather forecast or show various government statistical data.
Online, heatmaps help track user activity on a page. With a heatmap tool, you can monitor a user’s cursor activity to observe:
- The screen elements they attempt to click on (i.e. links, graphic elements etc.)
- The screen areas to which they pay attention (i.e., which features they point the cursor to without clicking).
Such information can help you discover your users’ preferences, behaviour patterns, and how they interact with product features. They can help you determine whether users find your interface simple enough to use and offer insight into which elements they might encounter or prioritize on each screen.
How heat maps can improve UI design
The heat maps listed above are handy tools for the UX designer. They can help you understand your users’ behaviour, which can lead to better designs.
They can also be used to understand the difference between how male users interact with your page and how your female users do. These variables can be drilled down further to consider age and location.
Heat maps are also one of the most effective methods of increasing conversions on your website because they’re cheap to carry out, but the return on investment can be massive.