Heat Maps{10}

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/