Website Heat Maps – Three Key Lessons

Pete Prestipino — Thu, 12 Aug 2010 19:30:00 GMT

Website heat maps are used to give designers insights into which areas of a Web page are most frequently used by visitors. By understanding how visitors interact with a website's elements, developers can improve the site's usability and, ultimately, influence conversion.

In today’s Design & Development Digest from Website Magazine, we have outlined three key lessons to learn from website heat maps.

The key lessons to be learned from any heat map implementation include:

- Identifying the Optimal Navigation Structure
Tracking user behavior by visualizing the data makes the use of heat maps nearly mandatory today. While designers and developers are not in every case responsible for tracking user behavior, they can influence how both websites and applications are built. Tracking user behavior through the use of a heat map provides unbiased information on what’s important to users and what might just be confusing or outright unimportant. Heat maps provide empirical data (in a visual form, of course) that could be immensely useful in organizing the most important parts of a Web page – particularly in the case of navigation. For example, we might learn that users primarily click two of five links within a site-wide navigation bar. This might provide the proof you need to either restructure the navigation so that those links are positioned closely to one another, or, to push the design envelope a bit, to restructure the navigation entirely to make those two links the primary focus of the page itself.

- Refining and Adjusting to Clear User-Conversion Paths
The end result from using heat maps should be improved performance. But improvement in what? Conversions, of course. As you might imagine, a “conversion” is different for each business and in some cases for each page. Enterprises that need leads and sales (and who among us is not in that group) can quickly understand visually, from mass amounts of data, where users are clicking, where there might be leakage (particularly useful for analyzing landing pages) and whether there might be a better opportunity to call attention to a fundamental part your business and website. If we follow some best-practice guidance and include a prominent call-to-action (which can come in various forms like 'learn more' buttons, or 'add to cart' icons) but users are not selecting the paths laid out, then perhaps modifications need to be made, such as removing some of the attention barriers (such as additional links). Identify why users are falling off the conversion path and you are able to adjust the experience and give key calls-to-action more prominence.

- Modifying Ineffectual Elements & Removing/Replacing Neglected Space
Once an effective navigation structure is in place and you are confident that users are taking pre-defined conversion paths, you can turn your attention to modifying design elements that are not receiving attention, and remove any neglected design space. For example, it’s common for content sites today to have large sections above the fold which scroll through news stories (typically achieved through jQuery). If you find that users are not using this functionality, it might be time to consider modifying elements of that design element with large arrows to indicate that more content is present. Heat maps are also useful in identifying areas of a design which receive no interaction and thus no attention. These areas need to be re-thought and should not currently hold mission-critical elements of a page.

No discussion of heat maps for websites would be complete without highlighting a few of the industry vendors. Four such services that Website Magazine has either used in the past or heard good things about include Click Density, ClickHeat, Click Tale and, of course, the very popular Crazy Egg.

You might also want to take a look at AttentionWizard (a service provided by Website Magazine contributor Tim Ash of SiteTuners), which uses advanced artificial intelligence algorithms to simulate human visual processing and attention. The solution creates an "attention heatmap" of your Web page that predicts where someone would look during the first few seconds of their visit. While more of a visual tracking tool than actual click tracking, a similar attention heatmap service is Feng-GUI, which simulate human vision and predicts the attention path between the elements of a webpage.

Further Reading on Heatmaps from Website Magazine:
- Analyzing Where Users Click – Open Source Heatmap Cannoli

Analyzing Where Users Click - Open Source Heatmap Cannoli

Pete Prestipino — Thu, 23 Apr 2009 17:03:00 GMT

Where are users "clicking" on your page?

Using heat maps is perhaps the easiest way to determine where users are clicking. Many analytics solutions have added the functionality to their set of core features, so you may be using the information already. If not, the visual representations of how/where users are taking action can provide Web professionals with valuable insights into how content presentation is performing - or should perform.

Some of the most popular hosted services, covered at great length on Website Magazine and elsewhere, are Clickdensity and CrazyEgg. But there are open source variations, including ClickHeat and now, another open source click heatmap solution has hit the market, and it's certainly one to consider using.

Cannoli (created by codynamix) is written in Ruby on Rails 2.2 and based on the Ruwa analytics solution. Features include the ability to "save" clicks, to develop per page generated heat maps, and to generate statistics (provided by Ruwa itself).

- Found through Web Analytics World

'Net Features : clickheat

Website Heat Maps – Three Key Lessons

Analyzing Where Users Click - Open Source Heatmap Cannoli