A heatmap is a graphical representation of the data using a color-coding scheme to represent various values. Heatmaps are used in different forms of analytics but are most commonly used to view user behavior on individual webpages or entire templates.
Heatmaps can be used to indicate where users tapped on a tab, how far they scrolled down a list, or used to view eye-tracking test data. Heatmaps depict a scale of colors: red represents popular (hot) areas of the screen, and less popular (cold) areas are blue.
Analytics tools such as Google Analytics or Site Catalyst are great at providing reports to demonstrate which pages users are visiting but they may lose information when it comes to understanding how users are interacting with those sites. Heatmaps will provide a broader snapshot of how users are actually behaving. They are often much more realistic than traditional analytics reports and can make learning simpler at a glance. This makes them more accessible, particularly to those who aren’t used to interpreting large volumes of data.
Effective heatmapping tools, such as CrazyEgg, Heatmap.me and UserExperior, help analysts to classify and analyze the data. That means it should be easier to see how different kinds of users interact with a particular website.
A variety of heat maps are available, each focusing on different user activity and interactional aspects.
These are the main types you can test with:
Where users click the mouse. Click maps are useful in determining how well the CTAs do.
Scroll maps will help you discover how your readers are interested (or engaged) in a piece of content.
Attention maps show critical places on your website. Ensuring that a reader understands your content means reducing noise which can steal your attention.
Mouse movement maps, while associated with eye movements (or attention heatmaps) by 84-88 percent, provide strong data on how readers handle through your text. Do they know where to go next after they have finished reading an article? If they don’t, it may be useful to properly put a CTA to a similar piece of content, product or service.
Below are five key ways to gather UX data using heat maps to test your ideas and identify optimization opportunities.
Sometimes users click on elements (e.g., images or headings) they expect to be links. These can be mis-clicks, but heat maps can collect data from enough users to ignore anomalies and show you typical click patterns through your audience.
Not every user who lands on the website drops down to the bottom of each page, meaning that essential material may be missed. Users often view the site from several different platforms and apps, and they don’t all get to see the same above-the-fold information (the portion of the website that is automatically available without scrolling).
CTAs (calls-to-action) are prompts for user action–usually buttons or links–which may be programmed primarily to encourage clicks and improve sign-ups or purchases. Click maps show which CTAs have the most views, something that is overlooked. You can consider things that prevent users from seeing your key CTA, or you can recognise an opportunity to try a new CTA in an environment that encourages more user interaction.
Your web pages can look stunning on their own, but heat maps help you to show how well they actually perform to clients and colleagues. Heat maps are super easy to interpret at a glance, and can better explain your work to non-designers, helping you to get crucial buy-in to update website ideas or highlight popular projects.
Responsive web design (pages that conform to the user’s screen) is a fast and efficient way to deliver content to all of your customers, but you need to note that scrolling on mobile devices will require a lot of what looks like a few lines on the desktop. Compare smartphone and desktop heat maps to see whether significant CTAs are absent from mobile users or to detect any behavioural variations. You may have to develop different mobile and desktop interfaces to ensure good UX across all devices.
Heatmaps won’t answer all the questions on how users engage with your website, but they will provide information from other analytics resources that isn’t readily accessible. So long as they are properly used and assumptions are not derived from limited volumes of data, heatmaps can be a highly useful tool in the hands of a website analyst. Heatmaps can be integrated with A/B testing within tools such as UserExperior which means you’ll be able to get a better view of how people interact in your test combinations as contrasted to your original.