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 website visits and 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.
Conclusion
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.
