{
    "version" : "https://jsonfeed.org/version/1",
    "content" : "news",
    "type" : "single",
    "title" : "Heatmapping Tools Show What’s “Hot” on Your Pages |Digital.gov",
    "description": "Heatmapping Tools Show What’s “Hot” on Your Pages",
    "home_page_url" : "/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/","feed_url" : "/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/2014/04/04/heatmapping-tools-show-whats-hot-on-your-pages/index.json","item" : [
    {"title" :"Heatmapping Tools Show What\u0026#8217;s \u0026#8220;Hot\u0026#8221; on Your Pages","summary" : "Most analytics tools can tell you how many times a link on your page is clicked on, but they can’t help you draw conclusions about a page with just a mere list of top links. A tool called a heatmap turns data into a data visualization, so you can more easily see how people are","date" : "2014-04-04T10:00:37-04:00","date_modified" : "2024-07-10T08:44:18-04:00","authors" : {"tlowden" : "Tim Lowden"},"topics" : {
        
            "research" : "Research",
            "usability" : "Usability",
            "user-experience" : "User Experience"
            },"branch" : "snyk-fix-08ac0319715b31f28b1a7897cd249f39",
      "filename" :"2014-04-04-heatmapping-tools-show-whats-hot-on-your-pages.md",
      
      "filepath" :"news/2014/04/2014-04-04-heatmapping-tools-show-whats-hot-on-your-pages.md",
      "filepathURL" :"https://github.com/GSA/digitalgov.gov/blob/snyk-fix-08ac0319715b31f28b1a7897cd249f39/content/news/2014/04/2014-04-04-heatmapping-tools-show-whats-hot-on-your-pages.md",
      "editpathURL" :"https://github.com/GSA/digitalgov.gov/edit/snyk-fix-08ac0319715b31f28b1a7897cd249f39/content/news/2014/04/2014-04-04-heatmapping-tools-show-whats-hot-on-your-pages.md","slug" : "heatmapping-tools-show-whats-hot-on-your-pages","url" : "/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/2014/04/04/heatmapping-tools-show-whats-hot-on-your-pages/","content" :"\u003cp\u003eMost analytics tools can tell you how many times a link on your page is clicked on, but they can’t help you draw conclusions about a page with just a mere list of top links. A tool called a heatmap turns data into a data visualization, so you can more easily see how people are interacting with the design. With it, you can find out some really important stuff: if the page design plays a part in clickthroughs, where on the page your users are moving, and what on your page might be worth featuring/not featuring. Then you can try moving pieces around for better results.\u003c/p\u003e\n\u003cp\u003e\n  \u003ca href=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/03/USA_gov-heat-map.jpg\"\u003e\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/09/250-x-162-USA_gov-heat-map.jpg\"\n    alt=\"250-x-162-USA_gov-heat-map\"/\u003e\u003c/div\u003e\n\n\u003c/a\u003eHeatmapping tools do exactly what it sounds like: they map out the most-trafficked (hot) and least-trafficked (cold) areas of your pages. As you can see in the picture, a side-by-side screenshot of \u003ca href=\"http://www.usa.gov/\"\u003eUSA.gov\u003c/a\u003e’s page on both mobile and desktop, the level of engagement is displayed by color. The gray and blue colors mean there was little movement in those areas, while the red and white denote very popular areas. In this case, the USA.gov team wanted to make sure the popular spots on the desktop page were prominent on the mobile page, and refrain from putting important content in the “dead zones” (the gray areas).\n\u003c/p\u003e\n\u003cp\u003e\n  Generally, there are two kinds of heat maps:\n\u003c/p\u003e\n\u003ch2 id=\"mouse-tracking\"\u003eMouse-tracking\u003c/h2\u003e\n\u003cp\u003e\n  Mouse-tracking maps record the mouse movement and click behavior of your users, allowing you to analyze why certain links are clicked at higher rates and where your users’ mouse is crossing. For example, you might note that a particular piece of important content is not being clicked at the desired rate. By using a mouse-click heatmap, it would be easier to see why people weren’t clicking; maybe the content was below the fold, or in a lower traffic “dead-zone” area. That’d allow you to move content around and continue to use the heatmap to optimize the chance of a click.\n\u003c/p\u003e\n\u003cp\u003e\n  These tools are \u003ca href=\"https://www.google.com/search?q=heat+map+tools\u0026oq=heat+map+tools\u0026aqs=chrome..69i57j0l5.2271j0j7\u0026sourceid=chrome\u0026espv=210\u0026es_sm=122\u0026ie=UTF-8\"\u003egenerally cheap or in some cases free\u003c/a\u003e.\n\u003c/p\u003e\n\u003ch2 id=\"eye-tracking\"\u003eEye-tracking\u003c/h2\u003e\n\u003cp\u003e\n  \u003ca href=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/03/FF-home-page-eyetracker-2-21.jpg\"\u003e\u003cdiv class=\"image\"\u003e\n  \u003cimg\n    src=\"https://s3.amazonaws.com/digitalgov/_legacy-img/2014/04/250-x-225-FF-home-page-eyetracker-2-2.jpg\"\n    alt=\"A heatmap in the shape of a capital F shows how a user\u0026#39;s eyes scan a web page\"/\u003e\u003c/div\u003e\n\n\u003c/a\u003eEye-tracking devices actually follow the movement of the user’s eyes, painting an interesting portrait of how visitors view the content on your page. They generate heat maps that you can analyze. This allows you to put the content you want people to see in the areas you know they will probably look upon a quick scan. The use of eye-tracking heatmaps has led to some proven trends, such as the fact that \u003ca href=\"http://www.nngroup.com/articles/horizontal-attention-leans-left/\"\u003eusers spend most of their time on the left side\u003c/a\u003e of the page and \u003ca href=\"http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/\"\u003escan in an “F” shape\u003c/a\u003e (see image below), but being able to see the pattern on your specific pages can prove to be invaluable.\n\u003c/p\u003e\n\u003cp\u003eThe downsides to this method are that it is generally much more expensive than mouse-tracking, and requires special equipment and extensive training. You also need to test with only a small sample, rather than get data from all of your visitors. For more information about these tools, do a search for “eye-tracking software.”\u003c/p\u003e\n\u003cp\u003eIf you’re interested in heatmapping or other User Experience techniques, why not join the Federal User Experience Community listserv? To do so, send a request to \u003ca href=\"mailto:Jonathan.Rubin@cfpb.gov\"\u003eJon Rubin,\u003c/a\u003e Program Manager for the \u003ca href=\"/preview/gsa/digitalgov.gov/snyk-fix-08ac0319715b31f28b1a7897cd249f39/resources/digitalgov-user-experience-resources/\"\u003eDigitalGov User Experience Program\u003c/a\u003e.\u003c/p\u003e\n"}
  ]
}