Questions? (877) 643-7244
FutureNow Post
Tuesday, Apr. 13, 2010 at 11:18 am

How To Test Your Page Layout for Horizontal Attention

By Brendan Regan
April 13th, 2010

Jakob Nielsen’s group is at it again: more eye-tracking research!  We’ve blogged about Jakob’s findings before, and even questioned if they yield hard and fast rules for layout, so naturally we were intrigued to see his group has been crunching the numbers on a recent eye-tracking study, and came up with some interesting insights on how people look at web pages horizontally.

This is just the type of data to fascinate me, but their chart lacked the visual quality that I often crave in order to understand how to apply the insights.  So, I took the liberty of creating my own infographic, heat map style :) [click to enlarge]

horizontal.heatmap.001I mapped Nielsen’s pixels-and-fixation chart on top of a B2B web page to see where the attention hot spots would fall.  Using the “warm” colors to represent more attention, and “cool” colors to represent less attention, just like you would on a heat map, you can see that this web page’s layout is ideal for putting headlines, sub-headlines, and persuasive content in the area where it will naturally get the most attention.

Editor’s Update: We’re not afraid to admit when we’ve been one-upped!  The folks over at the ConversionVoodoo blog have produced a free PNG image or JPEG image you can download and lay on top of your own screenshots.  That will save you 2 steps out of our 6-step process.  Now that’s optimization!  Just remember where you read it first ;)

How does your website template layout match up with the eye-tracking data?  Here’s how you can test it:

1. Size your browser to 1100 pixels

2. Take a screenshot

3. Import it into some sort of image editing program (I used Keynote because I’m a caveman)

4. Stretch a table across the image with 11 equal cells

5. Pick colors for the cells based on “heat map” logic; warm colors for lots of attention, cool colors for little attention.  Use Nielsen’s chart as a guide.

6. Use opacity so you can see your page beneath the colored cells

In the 300-600 pixel range, what areas of your page fall in the “hot spot”? Do your core message and content fall in that zone?  Is your side navigation in a warm zone, or a cool zone?  Could your landing pages leverage this information as well?

Add Your Comments

Comments (53)

  1. Thanks. I’ve been using this technique for ages. Now it is kinda official :D

  2. I see some sites put the add to cart button in the far right area of the page. Seems like if you want more eye balls on the add to cart button you need to have it in the center of the page. Yes I know testing would tell but it sounds like a solid guess right? :-)

  3. this is a very helpful post, i looked on the vertical study also. Now i can optimize my sites better for users..so would u change your site base on this study?

  4. @cook careers: i would TEST my site based on these studies.

  5. Thanks to this post. I’ve never tried it before. Now I’m going to apply it. :)

  6. how can i use headmap? Any tools for this?

  7. Brilliant – I love it – so simple! Its great to have some real scientific backing to the design rather than stumbling along.

    I will have to change my site around!

  8. I really like to see those eye-tracking results. They are very helpful to learn what the average user look at. Thanks Brendan for the article !

  9. I was involved in similar research when we applied eye-tracking and I must say you wrote a goof article for this field of research. I hope many people will use it and apply it to their websites.

  10. [...] the FutureNow blog, Brendan Regan suggests developing an infographic that to lay Nielsen’s findings over your own [...]

  11. Do you think that any sites/templates are specifically setup to fit the specifications of where a visitors eyes travel? Also I am having trouble with the testing that you have outlined above. Are there any cloud computed sites or programs that I can test it on?

  12. Nielsen Group is doing a very good job on usability of websites.
    I m reading their articles and book for years now, and i apply most of their suggestions. Your findings on this article are a little different that the heat map?

  13. Interesting. I am going to try the layout on my website and test it. Is there a website where you can enter your url and let it does the work for you regarding the page out horizontal? :)

  14. This could be a good marketing usage on a sales page where you try to get the customers to click “buy” on a product at their eye-level.

  15. When pagemaker first came out for the Mac back in the mid 80′s we were doing this. Programs may have changed and time have changed but this has remained constant.

  16. I have always used the tool in Chrome to see the warm spots on the website. I wonder though, if your site is centred does this really mean that all that white space on the left isn’t looked at?

  17. @Lisa what tool is that in chrome that you use.

  18. The chrome tool is pretty useful. I’ve also used the GWT tool as well.

  19. Great and useful info. I am going to change some locations around and see if it helps based on that heat map.

  20. I got a new one up. Didn’t resize it at all, it’s been 500 px all the way through. I’ll use picnik to resize another one later tonight and test.

  21. Very interesting, espically when you consider most people have the adverts on the right of the page. Perhaps if you wanted to monetize your blog more you could move them to the left.

  22. The heatmap pictures are great. I didn’t knew till now, that the middle-left is more recognized than the left side. Is there such a heatmap for vertical attention?

  23. Do you think it is best, then, to put a link to your landing pages on the left so everyone sees them over and over?

  24. Hmm…interesting. When it comes to layout of my sites, I take mental notes of where my own eyes “land” on sites. As it turns out, the warm colors indicated in you graphic do signify where my eyes land.

  25. I knew about the fact that people have their attention more on the left side. So would it be a good decision to put your sidebar on the left too?

    I read an article about this topic which suggested to keep your ads on the right cause people are used to them on the left and simply ignore them.

  26. 非常有趣的,espically当你考虑大部分人都对页面右侧的广告。或许,如果你想赚钱你的博客越多,您可以将它们移动到左侧。

  27. Thanks for the link and the credit. Hopefully it helps your readers. You’re awesome.

  28. I think is not that simple the hot zone of the site depend on the layout and how users eyes land on the page first time. A generic heat zones map might be good for generic analysis but not enough.

  29. This is the “Thirds” rule in action.

    In photography, Web Design, etc., that third from the left always grabs a lot more attention.

    Nice post. I always cared about the VETICAL Eye focus, but not the horizontal.

    Cheers!

    Alex Kei.

  30. I tend to put adds on the left side of the page but the click rate is still very low.

    My theory on why people prefer left side is that in most used websites, like email services, left is for navigation and right is used by ads.

  31. Interesting study, It’s one of those things that everyone sort of sub-consciously knows but it’s good to have some verification. Thankfully my site was created to require little to no vertical scrolling and is rather compact horizontally speaking.

  32. I tend to agree with this completely. If you don’t believe it take a look at how Google places their ads on a search page.

  33. That is awesome. I use the left side of the page for navigation and the right side of the page for ads. This is because people normally expect to see a navigation on the left.

  34. [...] Brendan Reagan from Grokdotcom came up with his own way to apply that data for testing the page layouts. [...]

  35. I have made changes to the layout of my landing page based (partly) on results of this test. Its a little early to say for sure, but split testing suggests that it has made a small difference to click through rates.

  36. Excellent info and tool – thanks.

    I’m a visual learner, too, so being able to visualize this using the tool you linked to makes it even easier.

  37. I worked on a study about horizontal visualization for my company WordPress site. We didn’t have funding for eye tracking technology, but asked a forum of users to note where their eyes moved to on the page. It was fascinating and had a big impact on the overall design of our new site.

  38. While the study will work for certain websites, you need to actually test if this approach works for your audience, or not. Taking any research for granted it’s not a good idea. Anyway the research makes a good case for testing.

  39. i scanned this and didn’t see the logic to why a left column is of greater interest.

    I would have thought the eye is drawn to familiar elements and visual cues over zones.

  40. I think this piece of research matches my own experience. Having advertisement on the right hand side seems to draw less clicks compared to the same banner placed on the left hand side.

  41. I was inspired by your post and Nielsen’s data. I found some A/B testing results that support these numbers. Layer my heat map with the A/B test images.

    Here is the post. http://thinkstick.net/2010/04/horizontal-attention-heat-map/

    I also posted my version of heat map template. (I don’t mean to one up you or anything) :)

    Thought you might be interested to check out the A/B test images with the heat map.

    Thanks for the inspiring post.

  42. Really is interesting how horizontal layout affects so much. Combine this with placing things above the fold, and bingo!

  43. Thanks for this info. I’ll definitely be performing these tests for optimal visualization.

  44. This type of eye heat map also correlates with the eye tracking studies about the golden triangle.

    You need this kind of helpful info when setting up a website.
    Thanks

  45. Excellent research and I would have missed it had you not taken the liberty to write a post. Makes perfect sense and I will look at our web designs for current clients to take a look at where I have placed key call to action messages.

  46. I created a online version of this test at my blog. Just plug in the URL you want to test and click Go.

    http://spanishgringo.blogspot.com/p/horizontal-layout-heat-map-onine-test.html

  47. [...] Hat tip to Brendan Regan from FutureNow for finding a downloadable overlay tool from the Conversion Voodoo Blog. It’s a (kind of) heat map based on Nielsen’s findings that you can superimpose over your landing page to see where most user attention-time is spent. The tool can be downloaded as a .png or a .jpg. [...]

  48. If you aren’t going to test for visuals than don’t bother with visual based ads!

  49. Very easy to use test. Trying it out now. Thanks for posting and directing us to the other links as well.

  50. [...] Information Design Filed under: Uncategorized by shreya139 — Leave a comment September 24, 2010 How To Test Your Page Layout for Horizontal Attention [...]

  51. Great article for those who have skills in establishing their online web site and presentations. Although I am fashionable savvy, time and devotion to your web site, in my view, is best left to the professional.

  52. I think this piece of research matches my own experience. Having advertisement on the right hand side seems to draw less clicks compared to the same banner placed on the left hand side. Why Google Adwords go to the right?

  53. [...] How To Test Your Page Layout for Horizontal Attention | Conversion Rate Optimization & Marketing… [...]

Add Your Comments

 

Print this Article
Share

More articles from Brendan Regan

Marketing Optimization Blog
FREE Newsletter Sign-Up
send it once every: