Data Visualization: Heat Map

• What is a Heat Map?

• A heat map is data analysis software that uses
color the way a bar graph uses height and
width: as a data visualization tool.
• What Does a Heat Map Show?
• A heat map uses a warm-to-cool color
spectrum to show you which parts of a page
receive the most attention.
• This heat map, for example, shows how far
down the page visitors have scrolled:
Heat Map
 Heat Map

• With a heat map, the data for your web page

is right there: the CTA above the fold glows
bright orange, or it doesn’t.
• If it doesn’t, consider moving it higher up the
page so it aligns with where visitors are paying
the most attention.
• The practice we now call heat maps is thought to have
originated in the 19th century, where manual gray-scale
shading was used to depict data patterns in matrices and
tables.
• The term heatmap was first trademarked in
the early 1990s, when software designer
Cormac Kinney created a tool to graphically
display real-time financial market information.
• Heatmaps can still be created by hand, using
Excel spreadsheets, or with specialist
software.
Heatmap (Matrix)
• Heatmaps visualise data through variations in
colouring.
• Heatmaps are useful for cross-examining
multivariate data, through placing variables in
the rows and columns and colouring the cells
within the table.
Anatomy
• Heatmaps are good for showing variance
across multiple variables, revealing any
patterns, displaying whether any variables are
similar to each other, and for detecting if any
correlations exist in-between them.
 Heat Map
• A legend is required alongside a Heatmap in order for it to be
successfully read.
• Categorical data is colour-coded, while numerical data requires a
colour scale that blends from one colour to another, in order to
represent the difference in high and low values.
• A selection of solid colours can be used to represent multiple value
ranges (0-10, 11-20, 21-30, etc) or you can use a gradient scale for a
single range (for example 0 - 100) by blending two or more colours
together.
• Because of their reliance on colour to communicate values,
Heatmaps are a chart better suited to displaying a more
generalised view of numerical data, as it’s harder to accurately tell
the differences between colour shades and to extract specific data
points from (unless of course, you include the raw data in the cells).
• Heatmaps can also be used to show the changes in
data over time if one of the rows or columns are set
to time intervals.
• An example of this would be to use a Heatmap to
compare the temperature changes across the year in
multiple cities, to see where’s the hottest or coldest
places.
• So the rows could list the cities to compare, the
columns contain each month and the cells would
contain the temperature values.
• The most commonly used color scheme used
in heatmap visualization is the warm-to-cool
color scheme, with the warm colors
representing high-value data points and the
cool colors representing low-value data points.
 Benefits of heatmaps
• Analytics tools like Google Analytics or Site Catalyst are
great at providing metrics to show which pages users visit,
but they can lack detail when it comes to understanding
how users engage with those pages. Heatmaps can give a
more comprehensive overview of how users are really
behaving.
• Heatmaps are also a lot more visual than standard analytics
reports, which can make them easier to analyze at a glance.
• This makes them more accessible, particularly to people
who are not accustomed to analyzing large amounts of
data.
 Considerations
• Heatmaps need to have a large amount of data before
they can be accurately analyzed.
• As heatmaps show trends, it is important to have
enough information to ensure that any anomalies do
not affect the overall heatmap picture.
• When used incorrectly, heatmaps can be misleading.
• They can encourage analysts to make assumptions
that may not be correct.
• It is important to remember that, as with other forms
of quantitative data, heatmaps can tell you what has
happened on a page, but cannot tell you why that
happened.
• In the world of online businesses, website
heatmaps are crucial to visualize visitor
behavior data so that business owners,
marketers, and UX designers can identify the
best-performing sections of a webpage based
on visitor interaction.
• More importantly, heatmaps help to classify
the sections that are performing sub-par and
need optimization.
Types of website heatmap data visualization

• Due to their dynamic and robust nature, website

heatmaps enable the graphical representation of data
in many forms based on the nature of the data sets.
• Businesses use website heatmaps with an online
presence to visualize the visitors’ clicks, scrolls, mouse
and eye movement, and so on, on their website, in
real-time.
• Visitor interaction on webpages is visualized in
heatmaps, scrollmaps, click maps, mouse-tracking
heatmaps, and eye-tracking heatmaps. 
 Heatmap
• Heatmap is a graphical way to
visualize visitor behavior data in
the form of hot and cold spots
employing a warm-to-cool color
scheme.
• The warm colors indicate sections
with the most visitor interaction,
red being the area of highest
interaction, and the cool colors
point to the sections with the
lowest interaction.
 Scroll map
• Scroll maps visually present the
state of your webpages in the form
of a heatmap where all the scroll
data (scroll depth, scrolling pattern,
etc.) are plotted.
• A scroll map indicates the number
of visitors scrolled to each section of
a webpage, the section after which
the percentage of people scrolling
drastically falls, the maximum depth
till which people scrolled, and more.
This data is visualized using colors in
a single scroll map, with each color
signifying varying intensity of
interaction. 
 Click map
• Website heatmaps also offer click
maps that track and visualize click
data on the webpages to help you
understand visitor behavior at a
granular level.
• Click maps visually presents clicks on
each element of a page like clicks on
links, missing/broken links, images,
CTA, pop-ups, and so on.
• With each and every click registered
on the webpage, click maps present
multiple variables and data points in
one single heatmap.
 Mouse tracking heatmap
• A color-coded heatmap is
generated that visualizes mouse
movement data of each visitor as
well as data where the individual
reports are combined to trace
patterns in the mouse movement
of the visitors.

• At the most general level, mouse

tracking heatmaps visualize where
visitors’ cursor hovers the most,
which section/s of a webpage the
cursor keeps coming back to, and
more such mouse movement data.
 Eye-tracking heatmap
• Like mouse tracking heatmap, eye-
tracking heatmap also visualizes
viewing patterns, but instead of
cursor data, data on visitors’ gaze is
visualized. Eye-tracking heatmap
tracks visitors’ eye movement and
visualizes gaze data.
• These data include fixation length
based on the number of times an
image is looked at, which elements
attract the visitor’s gaze the most,
which irrelevant elements are
distracting the visitors’ eye away
from the main CTA, and so on.
The benefits of using heat maps on website

• Heatmaps help you understand how people interact

with your website pages, so you can find answers to
business-critical questions such as ‘why are my users
not converting?’ or ‘how do I get more visitors to take
action?’ Using heatmaps, you can determine if people
are:  
– Reaching important content or failing to see it
– Finding and using a page’s main links, buttons, opt-ins, and
CTAs
– Getting distracted by non-clickable elements
– Experiencing issues across devices
• As a visual tool, heat maps help you make
informed, data-based decisions for A/B
testing, updating, or (re)designing your
website. And they are also useful on a wider
business scale: heat maps let you show team
members and stakeholders what’s happening
and get their buy-in more easily when changes
are needed—it’s hard to argue with a heat
map!
 What is heat map analysis?
• Heat map analysis is the process of reviewing
and analyzing heat map data to gather insights
about user interaction on the page.
• This data analysis can lead to improved site
designs with lower bounce rates, fewer drop-
offs, more pageviews, and better conversion
rates.
• These results can be even more effective by
running usability tests (like A/B testing).
• There are at least 5 questions you can answer
through heat map analysis, and we grouped
them into this handy checklist:
– Are people seeing important content?
– Are people clicking on key page elements (links,
buttons, and CTAs)?
– Are people confused by non-clickable elements?
– Are people getting distracted?
– Are people experiencing issues across devices?
• 1. Are people seeing important content?
• To understand if people are actually seeing important
content elements or sections on your page, take a look at
a scroll map—i.e., the heat map that shows you how far
down the page people scroll.
• Start by reviewing the position of the average fold, which
is the portion of the page people see on their
screen without scrolling as soon as they land on your site:
 Are people clicking on key page elements (links, buttons, and
CTAs)?

• While a scroll map helps you understand if

people are seeing specific content elements, a
click map quickly confirms if users are clicking
on them or not:
 Are people confused by non-clickable
elements?
• Non-clickable elements that look like
they might be clickable can cause confusion
and frustration for users who waste their clicks
while expecting to be taken elsewhere.