Posts Tagged ‘google labs’

 

Horizontal Heat Map

March 1st, 2011

Recenty a study at Useit.net released some valuable information about how user’s view your website’s content – Not top to bottom, but left to right.

What was unique about this study was the concept of how user’s might read/see your content in terms of percentages along the horizontal dimension. Above The Fold meet Mr. Left to Right. This eye tracking study is helpful in understanding patterns, but should be used as a guide, not a law. (Some languages read right to left, and some folks don’t believe too heavily in theĀ above the fold.) This chart helps us understand the data:

But how about visualizing what this means for a website?

I’ve created a horizontal heat map to help quickly solve this issue. Much like Google Lab’s Browser Sizes (an excellent tool for web designers) this Horizontal Heat Map can quickly help you visualize the site’s content. By using opacity of varying levels based on the useit.com dataset, we can properly shade each column from left to right in relative opacity to simulate how a user might “see” a website.

Give it a try. See how your site stacks up.

Visualize your site with theĀ Horizontal Heat Map.