WebDevelopersNotes logo

home-icon Home / Web Design / Website heatmap use – information on visitor activity

Website heatmap use – information on visitor activity

Website heatmap use - information on visitor activity

Website heatmap charts the course of visitor activity such as eye movements or mouse clicks. Different colors are employed to depict the different levels of activity. Typically, areas in red color have the maximum while black or dark blue areas are the ones ignored by viewers. A website heatmap can, thus, let you know where to place important content on the page so that it’s not overlooked by visitors.

This article discusses how you can use the information from your website heatmaps to create a better user experience, making visitors aware of important content and funnelling their attention to your e-commerce goals. To touch base with the fundamentals, read what is a web page heat map? Placing Google AdSense ads based on heatmap of a website is detailed in another article.

Sponsored Links

Heatmaps for a better user experience

In his latest eyetracking study, Jakob Nielsen reports the results of how 232 users go through a web page. He draws the following conclusions:

  • Visitors normally do not read web page contents. They scan the page quickly trying to spot things that would interest them or locate the information for which they came to the page.
  • Eyetracking shows that the web page is scanned in an “F-shaped pattern”. Nielsen also notes that this pattern is conserved (with some variations) across different website layouts. And this means web surfers have acknowledged a standard layout of websites because of which heatmaps didn’t vary much. Read F-shaped pattern for reading web content for details.
  • Put the most important content of the website in the first two paragraphs – that’s what Nielsen advocates. Headings, paragraphs and lists should also start with information carrying words. This, as any search engine optimizer would know, is similar to basic SEO practices in which keywords are placed near the beginning of the page contents.

Results of the Stanford-Poynter Project detail how viewers start on the top left area of a web page, go to other sections and finally arrive in the top right quadrant.

So what can we gather from these studies?
Unless you have a good reason to do so, stick to the standard web site layout practices – logo on top left, a left or right vertical column (or a horizontal row) for the site navigation and the main content starting right below the masthead. The content should also start with a heading because that’s what gets the maximum visitor attention so make sure these contain your important keywords. If the content is valuable, have it displayed as list items or shorted paragraphs and use the bold and emphasis tags to highlight items because they can serve as stop points during the visitor’s scanning process. However, do not go overboard with these tags else the purpose will be defeated.

Making visitors aware of the important website content

You want visitors to read your precious content; unfortunately, expecting them to examine the page thoroughly is wishful thinking. You don’t want visitors to sift through the content trying to locate information; rather, you want to direct their attention to the important sections. Website heatmaps provide a graphical summary in which red color areas signify the ones that get the maximum activity (whether eye balls or mouse clicks).

Garbled mess at important areas on the web site will prompt the visitor to leave. Hence, the use of keywords in those sections is advised. Nielsen, in another study (and I love this one), tells us how important content, if displayed as a promotion is generally ignored by the viewer. He asked viewers to find the population of the United States from the U.S. Census Bureau website. A mere 14% noticed the population clock on the top right of the web page and gave the answer. The rest either did not see it or just didn’t think it was the answer. The results are even more surprising in the light of the heatmap because it shows the maximum eye balls on or near this section.

The conclusion drawn by Nielsen is – Don’t make your important content look like a promotion. It will be ignored even if it got the attention!

Using website heatmaps to make visitors buy your products/services

As we have seen above, important content that looks like a promotion is ignored by the visitors. So how should “Buy Now” or “Download Now” buttons be displayed? More than that, how should such buttons be designed? Should then blend into the web page design? If so, will they not be ignored? I suggest a mix of the two.

There is no doubt that download or buy links/buttons need to standout. But at the same time, any formatting that makes them look like a promotion should be removed.

Web site heatmaps uses

So in short, heatmaps of web sites can be used for:
Structuring your content – To repeat what Jakob Nielsen found, you need to place the important content at the beginning and make sure healines, paragraphs, bullet lists begin with information carrying words.
Deciding ads placements like ones from AdSense – More on this in Google AdSense and heatmaps.
Testing web page design – Does it conform to the standard layout or is it different? Heatmap for a non-standard web page layout is critical for measuring its success.
Visitor behavior – are they able to recognize your links? Are important elements such as download link or buy now buttons ignored?

A final word on website heatmap – if you are looking to succeed with your online venture, you need to pay attention to how visitors behave on your site and heatmaps that track eye balls or mouse clicks can offer valuable insights and information into this.

Sponsored Links

Your comments
Star icon IMPORTANT Have a question / problem? Click here to ask an expert.

Sponsored Links


How do I view a deleted web page?
Is there a way to view a deleted web page - one that is no longer available? Yes there is and the solution is quite simple. [more...]


The first ever text message was sent on December 3, 1992, by Neil Papworth from his computer to the phone of Richard Jarvis. Neil was a test engineer for Sema Group and used the Vodafone network to transmit the text message. [more...]

We use cookies to give you the best possible website experience. By using WebDevelopersNotes.com, you agree to our Privacy Policy