{"id":337,"date":"2010-04-27T00:39:23","date_gmt":"2010-04-27T05:39:23","guid":{"rendered":"http:\/\/thinkstick.net\/?p=337"},"modified":"2010-04-27T12:56:28","modified_gmt":"2010-04-27T17:56:28","slug":"horizontal-attention-heat-map","status":"publish","type":"post","link":"http:\/\/thinkstick.dreamhosters.com\/2010\/04\/horizontal-attention-heat-map\/","title":{"rendered":"Horizontal Attention Heat Map"},"content":{"rendered":"<p>Nielsen&#8217;s group recently published the results from an eye tracking study for <a href=\" http:\/\/www.useit.com\/alertbox\/horizontal-attention.html\">user attention for horizontal dimension.<\/a><\/p>\n<p>Their main observation is<\/p>\n<blockquote>\n<ul>\n<li>Left half of any page gets 69% of viewing time and right half gets about 30%.<\/li>\n<li>Their recommendation is &#8216;Stick to the conventional Layout&#8217; for the best results.<\/li>\n<li>Keep navigation all the way to the left. This is where people look to find a list of current options.<\/li>\n<li>Keep the main content a bit further in from the left.<\/li>\n<li>The most important stuff should be showcased between one-third and halfway across the page. This is where users focus their attention the most.<\/li>\n<li>Keep secondary content to the right.<\/li>\n<\/ul>\n<\/blockquote>\n<p>Brendan Reagan from Grokdotcom came up with <a href=\"http:\/\/www.grokdotcom.com\/2010\/04\/13\/how-to-test-your-page-layout-for-horizontal-attention\/\" target=\"_blank\">his own way to apply that data for testing the page layouts<\/a>.<\/p>\n<p>Nielsen&#8217;s data for viewing time across horizontal dimension by 100 px each is found in the chart below.<br \/>\n<a rel=\"attachment wp-att-338\" href=\"http:\/\/thinkstick.net\/2010\/04\/horizontal-attention-heat-map\/eyetracking-fixations-across-page\/\"><img decoding=\"async\" class=\"size-full wp-image-338 alignnone\" title=\"eyetracking-fixations-across-page\" src=\"http:\/\/thinkstick.net\/wp-content\/uploads\/2010\/04\/eyetracking-fixations-across-page.png\" alt=\"\" width=\"560\" height=\"374\" srcset=\"http:\/\/thinkstick.dreamhosters.com\/wp-content\/uploads\/2010\/04\/eyetracking-fixations-across-page.png 560w, http:\/\/thinkstick.dreamhosters.com\/wp-content\/uploads\/2010\/04\/eyetracking-fixations-across-page-300x200.png 300w\" sizes=\"(max-width: 560px) 100vw, 560px\" \/><\/a><\/p>\n<p>I translated this data into a reusable heat map to be shared with UX team at work and I figured I should share it here as well. You can get the full sized png template <a href=\"http:\/\/thinkstick.net\/wp-content\/uploads\/2010\/04\/HorizontalHeatMap.png\" target=\"_blank\">here<\/a>.<\/p>\n<p><a href=\"http:\/\/thinkstick.net\/wp-content\/uploads\/2010\/04\/HorizontalHeatMap.png\"><img decoding=\"async\" class=\"size-large wp-image-339 alignnone\" title=\"HorizontalHeatMap\" src=\"http:\/\/thinkstick.net\/wp-content\/uploads\/2010\/04\/HorizontalHeatMap-804x1024.png\" alt=\"Horizontal Heat Map Overlay\" width=\"226\" height=\"287\" srcset=\"http:\/\/thinkstick.dreamhosters.com\/wp-content\/uploads\/2010\/04\/HorizontalHeatMap-804x1024.png 804w, http:\/\/thinkstick.dreamhosters.com\/wp-content\/uploads\/2010\/04\/HorizontalHeatMap.png 1100w\" sizes=\"(max-width: 226px) 100vw, 226px\" \/><\/a><\/p>\n<p>When I came across <a href=\"http:\/\/www.abtests.com\/\" target=\"_blank\">ABtests.com<\/a>, I looked through the samples uploaded and found <a href=\"http:\/\/www.abtests.com\/test\/18014\/sign-up-for-less-accounting\" target=\"_blank\">this sign up page A\/B testing<\/a> by LessAccounting. <a href=\"http:\/\/b.lesseverything.com\/2009\/5\/11\/buttons-on-the-left-is-the-winner\" target=\"_blank\">Original test write up<\/a> theorized that having the buttons on the left might be the primary contributing factor to 20% increase in conversion rate. His hypothesis is correct if we can believe Nielsen&#8217;s data as correct across all sites with left to right reading languages.<\/p>\n<p>Comparing the sums of attention percentage for each layout, we can clearly see the left layout got much more attention. This test is particularly a good A\/B test to support Nielsen&#8217;s data since all other elements (content, call to action button color, size) remain exactly the same in both layouts. The only difference here is the position of the call to action buttons and more informational bulleted text.<\/p>\n<table>\n<tr>\n<div>\n<td>\n<a href=\"http:\/\/thinkstick.net\/wp-content\/uploads\/2010\/04\/HeatMapRightLayout.png\"><img decoding=\"async\" class=\"size-full wp-image-344 alignnone\" title=\"HeatMapRightLayout\" src=\"http:\/\/thinkstick.net\/wp-content\/uploads\/2010\/04\/HeatMapRightLayout.png\" alt=\"Less Accounting Right Layout\" width=\"336\" height=\"173\" srcset=\"http:\/\/thinkstick.dreamhosters.com\/wp-content\/uploads\/2010\/04\/HeatMapRightLayout.png 1018w, http:\/\/thinkstick.dreamhosters.com\/wp-content\/uploads\/2010\/04\/HeatMapRightLayout-300x155.png 300w\" sizes=\"(max-width: 336px) 100vw, 336px\" \/><\/a>\n<\/td>\n<td>\n<ul>\n<li>Call to action buttons are on the right\u00c2\u00a0 starting from 700 px to 1000 px horizontally<\/li>\n<li>Sum of attention percentage ~20%<\/li>\n<li>Conversion rate 10%<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/div>\n<tr>\n<div>\n<td>\n<a href=\"http:\/\/thinkstick.net\/wp-content\/uploads\/2010\/04\/HeatMapLeftLayout.png\"><img decoding=\"async\" class=\"size-medium wp-image-345 alignnone\" title=\"HeatMapLeftLayout\" src=\"http:\/\/thinkstick.net\/wp-content\/uploads\/2010\/04\/HeatMapLeftLayout-300x155.png\" alt=\"\" width=\"333\" height=\"171\" srcset=\"http:\/\/thinkstick.dreamhosters.com\/wp-content\/uploads\/2010\/04\/HeatMapLeftLayout-300x155.png 300w, http:\/\/thinkstick.dreamhosters.com\/wp-content\/uploads\/2010\/04\/HeatMapLeftLayout.png 1018w\" sizes=\"(max-width: 333px) 100vw, 333px\" \/><\/a>\n<\/td>\n<td>\n<ul>\n<li>Call to action buttons are on the left starting from 100 px to 500 px horizontally.<\/li>\n<li>Sum of atention percentage ~58%<\/li>\n<li>Conversion rate 12%<\/li>\n<\/ul>\n<\/td>\n<\/div>\n<\/tr>\n<\/table>\n<div><strong>How<\/strong><strong> to Use This Heat Map<\/strong><\/div>\n<div>\n<ul>\n<li>If it&#8217;s an existing site, resize your browser window to 1100 px before taking a screen shot.<\/li>\n<li>If it&#8217;s a design in progress, you should capture it around 1100 px size.<\/li>\n<li>Open your image in\u00c2\u00a0 Photoshop and layer this heat map over.<\/li>\n<li>Line up the top of the heat map color bars with top of your image so that you can see the percentages clearly. (optional)<\/li>\n<li>Adjust the opacity till your image is visible.<\/li>\n<\/ul>\n<\/div>\n<div>\n<p>You can take <a href=\"http:\/\/thinkstick.net\/wp-content\/uploads\/2010\/04\/HorizontalHeatMap.png\" target=\"_blank\">this template<\/a> and start layering over landing or new content pages you are designing and optimize your layout to maximize intended conversion metrics.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Nielsen&#8217;s group recently published the results from an eye tracking study for user attention for horizontal dimension. Their main observation is Left half of any page gets 69% of viewing time and right half gets about 30%. Their recommendation is &#8216;Stick to the conventional Layout&#8217; for the best results. Keep navigation all the way to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[32,3],"tags":[],"_links":{"self":[{"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/posts\/337"}],"collection":[{"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":39,"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/posts\/337\/revisions"}],"predecessor-version":[{"id":380,"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/posts\/337\/revisions\/380"}],"wp:attachment":[{"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/media?parent=337"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/categories?post=337"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/thinkstick.dreamhosters.com\/wp-json\/wp\/v2\/tags?post=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}