Heat Mapping Case Study: Epa.gov Homepage
Most people relate the term “heat map” with something they see during the weather forecast on the nightly news, those colorful maps that vividly illustrate how hot it’s going to be during an impending heat wave. The word “heat map” may not usually however, conjure up images of a widely used Web usability tool; but for those who manage Environmental Protection Agency’s (EPA) website, that is exactly what the phrase brings to mind.
Heat mapping tests are one of the many tools at the disposal of epa.gov to evaluate the effectiveness of the homepage. The test tracks the behavior of a visitor to a website, and color codes the results based on the level of engagement. If a link is being clicked frequently, the heat map will display results as being “white hot.” When there is little activity, that area of the page will remain a darker color.
Once a month, EPA conducts a heat mapping test on their homepage to better understand which items users are clicking on and which items aren’t drawing any interest. Based on these results, the homepage can be updated to better match the current needs of users. Here are just a few ways that EPA’s homepage has been altered, based on insights from heat mapping.
1. Identifying Underused Sections
The homepage showcases photos of EPA scientists and ecologists at work throughout the country, as well as photos that highlight the natural beauty of the United States. This area gives users the option to enlarge the photo by clicking on a thumbnail image.
However, heat mapping tests revealed users were not taking advantage of this function. Instead, they were clicking on arrows located on either side of the thumbnail photo to rotate the carousel, but not on the photo itself. Clearly, there was an interest in the photos, but users seemed unaware of the ability to enjoy larger versions.
In response, a separate slideshow label was added to link to the same set of enlarged photos (see the white spot in the bottom right of the pic above). Though not an overwhelming number, recent heat mapping tests show that users are clicking on this link. Heat maps helped to identify an underused, but important, portion of the site being bypassed by users, and allowed epa.gov to take steps to address the issue.
2. Discovering Links of Value
When EPA decided to move their popular jobs category to the bottom of the page, there was a concern that users would not make the effort to search for the link below the fold. It’s easy to see from the heat map, however, that even at the bottom of the page, “jobs” is still getting many clicks, making it glow against the rest of the dormant footer. EPA designers were able to rest assured that changes made to the site did not obstruct users in their search for content.
3. Measuring Benefits of Heat Mapping
Heat mapping tests offer an easy-to-grasp visualization of website user activity and help designers discern patterns more readily. Many tools that measure a user’s interaction with a website, list links in order from most popular to least popular, but this only gives a partial picture of how effective a website design is; whereas a heat map presents a more holistic view of user engagement, and this helps to contextualize the information.
For example, if epa.gov is trying to understand how useful the alphabetical index is, they can look at reports that tell them the letter “W” was clicked 200 times, as opposed to the letter “H”, which was clicked only two times. It’s difficult to draw a conclusion from this piecemeal information. Should the low click rate on the letter “H” be a concern? Are visitors finding what they need through the index or not?
It only takes a quick glance at the heat map, however, to see that as a section on the page, the index is lit up, illustrating its liberal use by visitors, despite low click rates on some individual letters.
Heat mapping is just one of many usability tools out there, but as EPA has demonstrated, whether utilized as a one-off activity or incorporated into a continuous testing cycle, it can provide valuable feedback in an easy to understand format to help improve the usability of a website.
Georgia Gallavin is in her last semester at The New School in New York City, earning an MA in Media Studies. She is interning with the DigitalGov User Experience Program at GSA this summer.
