Heat Maps

by Eric S

Heat Maps, What Are They?

Retrived from Crazy Egg

You have created this amazing E-Commerce website for you business. You have spent the last month perfecting your SEO and meta tags for optimization. Yet you have not received a single order. What might be causing this? You know the links are all working and your processing information is correct. But have you ever considered the location of your information on your website?  Maybe people can’t see what you want them to see or they are not looking where you want them to look. There are a few tools out there that can help you figure this out. One of these tools available to use is what is called a “Heat Map.”


What is a heat map?

A heat map is a graphical representation of data where a visitors habits are tracked so that you can see where your visitors look at or focus on the most. These areas are displayed as “heat” on a map. The colored spots demonstrate how many users viewed or clicked sections of the web page. Every heat map software has a different breakdown of what each color represents but in general Blues represent  less than 40%, light green 40-50%, Green 50-60%, Yellow 60-70%, Brown 70-80% and Red 80-100% (Choros) Obviously the goal is to get lots of red on the important information areas on your site. According to Amol Tondwalkar, a user experience designer “Heat maps generally work off x/y positions of clicks, not the target of the link making” which makes it an easy tool to add to your website without having to do much work.

Why use one?

Now you might be saying I already use Google Analytics, I don’t need to use another tool. What is the difference between Google Analytics and the use of a heat map software? Heat maps are used for displaying the areas of a Web page most frequently scanned or clicked on by visitors. These maps make it easy for people to interpret website usage statistics into data. (Hilton) However, a heat map is not about who visited your site from where (ex accessed from Cal Poly Pomona) or which search engine linked the visitor to your site. But more about general areas of usage. Heat maps help in determining prime focus areas of the website, which in turn helps you place the right content in the right place. They are many  useful reasons for using a heat map on your website including: Knowing exactly how a viewer uses a specific page, seeing which parts of a page are unused as well as seeing which parts of a page that are used the most, and understanding patterns of use on the site as a whole. (Intuit) But most importantly, by being able to capture this data, you are able to use it to predict how visitors will use the site in the future. Giving  you the upper hand on maximizing where to place key information to drive sales. (Farney)


Different types of heat maps

<Different types of heat maps>

There are a few different types of heat maps available. The most commonly used heat maps are “click” heat maps “mouse over”  heat maps and “scroll” heat maps. They do pretty much exactly what there names say they will track.  They all show different valuable information but when coupled together they become a very valuable tool. With a click heat map you can see where your visitors are clicking and weather or not there is an area on the page that should have a link. One example of this would be if you made a products page on your website and you made only the product name a clickable link yet most of your customers were clicking on the picture first and not the name to see more product information. By knowing this valuable information and you can now make the picture a clickable link and hopefully drive up sales.


The other popular type of heat map is a “scroll” map.  Unlike the click heat map the scroll heat map helps you track how far down your customers scroll or look at information you have provided on a page.  By determining how far down your customers are scrolling you can adjust your content accordingly and remove unnecessary information which might be confusing your customers.  One great example of where you can see this work is if there is a frequently asked question (FAQ) page.  You will be able to see which question is scrolled to the most which can help you figure what need to be fixed or better clarified on your website. Scroll heat maps also play a huge roll in showing you how far down people will read before they start to loose interest.


You need to remember heat maps will not be very effective when tested on only a small amount of users or traffic. You should let your heat map run for a while before considering any drastic changes to your website, as it will be difficult to make any conclusions as their might not be enough data to support these changes.

< Scroll Heat  Map displaying the “Hot” Spots > 

Any side effects or limitations with using a heat Map?

Most of the time you will not have any side effects using a heat map for your website. However, there are some cases where your heat map may not be telling you the whole truth. I found this to be true in when seeing if a heat map would work for my website.  It all worked well until it got around the Java script. Then it was not capturing the proper data. So if I were to guess when using Java Script or Ajax code/script to do certain effects on your website such as a drop down menu, expanding or collapsing paragraph tabs, or anything that is not static. You will encounter some false “hot” spots. For example if you have a navigation bar with a dropdown link that hovers over a paragraph, the heat map will show the paragraph as being clicked on not necessarily the navigation drop down.  So it it important to keep that in mind when developing a website you want to use a heat map on.


So how do I add a Heat Map to my website?

There are many different sites out there that you can use to run your heat map software. The three I found were CrazyEgg, ClickTale, and Clickdensity.  For the most part they all do the same thing but each  puts a little twist on there features and price.  Some of the compines I found using this software are: Ebay, Costco, Dell, (crazyegg) Cnet Amazon, Zappos , T-Mobile, CBS, Target, Citrix, Mint and many more. (clicktale)

 <Customers of Click Tale  that use heat maps>

Overall, I believe adding a heat map will definitely help you optimize your website for ease and usability, which in turn will increase your sales or overall layout of your website. As a newer optimization technique this will only get better with technology.





Choros, K. (2011). Further tests with click, block, and heat maps applied to website evaluations. Lecture Notes in Computer Science (Including Subseries Lecture Notes in Artificial Intelligence and Lecture Notes in Bioinformatics), 6923(PART), 415-424.


Crazy egg. (n.d.). Retrieved from www.crazyegg.com


Customer logos. (n.d.). Retrieved from http://www.clicktale.com/nofollow/customer-logos


Farney, T. A. (2011). Click analytics: Visualizing website use data. Information Technology and Libraries, 30(3), 141-148. Retrieved from http://search.proquest.com/docview/883688740?accountid=10357



Heat maps. (n.d.). Retrieved from http://en.wikipedia.org/wiki/Heat_map


Hilton, B. N., Horan, T. A., Burkhard, R., & Schooley, B. (2011). SafeRoadMaps: Communication of location and density of traffic fatalities through spatial visualization and heat map analysis. Information Visualization, 10(1), 82-96. doi:http://dx.doi.org/10.1057/ivs.2010.14


Ogden web design. (n.d.). Retrieved from http://ogdenwebdesign.com/?tag=tag1


Ralph, R. (11, 11 11). How to use heat maps to maximize your site’s success. Retrieved from http://www.intuit.com/website-building-software/blog/2011/10/how-to-use-heat-maps-to-maximize-your-sites-success/

10 thoughts on “Heat Maps

  • May 30, 2013 at 11:05 am

    Very interesting blog Eric! It seems like websites that sell products would benefit most from using heat maps. Web developers would be able to display their most popular products in an area that would attract attention. It would have been great if you could have went over the differences between each competitor’s interpretation of a heat map, and the prices they offered. Good job again!

  • June 3, 2013 at 4:25 pm

    This is a really cool topic to look at and I enjoyed your blog on it. Heat maps seem so useful because unlike other analytic tools you arn’t stuck with just a set of numbers to interpret, instead you get a visual representation of the data that is collected. One thing that would have been interesting to look at the cost of using the various heat map tools that are offered and how affordable it would be to use them on your own site.

  • June 7, 2013 at 11:59 am

    This was a great topic and an informative article; Heat Maps seems to me as a effective tool that many businesses can use to improve and expand their website and also “The main motive” make their websites user friendly and eye catching to drive up the businesses sales. Heat Maps can be used as a tactic to make ones website look more attractive, informative and interesting which can lead to gains in popularity of the website.

  • June 7, 2013 at 6:15 pm

    Really informative blog. I am glad that you presented this topic. I definitely feel that heat maps would make a great added bonus alongside using analytic tools, as it gives developers unique perspective on a given site. I like that you noted how to be heat maps would have trouble with any javascript and/or ajax.

  • June 7, 2013 at 7:46 pm

    While I’ve known about heatmaps and their uses, I was unaware that there were multiple types. Glad that you mentioned the scroll heatmaps. I didn’t know that you could track to see how far down someone scrolls through a page.

    I’m not so sure about it sensing “false data” though as it is just telling you what part of the page is being clicked/moused over.

    Still very informatiev.

  • June 8, 2013 at 9:38 pm

    Well written blog, Eric! I know what I’m using when I build websites! I like how this is such an easy read and yet so informative. I agree with Jason about the scroll heatmaps. I also did not know that you could track where people scroll to.

    I thought heatmaps also use eye movements. Where your eyes first land, but maybe that is just something else? Or is it also encompassed within the heatmap software.

  • June 9, 2013 at 2:29 am

    This was a really well written article. I still feel that heat mapping by mouse position feels more like Effect than Cause analysis. What I mean about this is, I have never followed my mouse along where im reading I just scroll as I read. Which leads me to being impressed by the coloration of your scroll mapping example. I think you covered this article very well, and it gives me enough information to ask educated questions if i run into someone who is more familiar with the technology. Thanks.

  • June 10, 2013 at 1:41 am

    This was a very interesting blog and presentation. I never knew heat maps existed that could tell web developers where visitors on the sites would mainly focus. I liked how you discussed about the different kinds of heat maps that are offered and which one is most commonly used.

  • January 27, 2014 at 8:59 pm

    Interesting way to gather unique site usage statistics. It can kind of give you an idea of how people are using the interface based on the heat maps.

  • March 20, 2014 at 8:56 pm

    It amazes me what they come up with! That is what I love about the IT field, it’s always changing and evolving, you don’t know what to expect. I can only image what is to come in the near future! I”m glad to be there while it changes.

Comments are closed.