Mar 17, 2010

AdsMitchell - Heat Maps and How We See Web Pages

Your movement online can be felt and measured down to a fine grain of sand, but is all this accurate? This is talked about as the so called, "visual analytics" measurement tool. Heat Maps are described by Wiki as graphic representation of data where the values taken by a variable in a 2D map are represented in colors. True to this, one can view how unique browsers read a page and view the content on a website. Heat maps look much like the Predators view of life ...

Jakob Nielsen is known to be the, "king of usability" or "the web usability czar" and has explained this topic from a eyetracking study, where 232 users browsed many pages of 3 different sites

This is an image of a random heat map with most of the activity in red. The red being areas that were heavily looked at. The yellow and blue show areas that were less focused on and the gray showing parts that were least viewed. Please bear in mind this was a security case study unique to its story or goals and therefore should not conflict as you read on.

From the study conducted, they determined people to scan web content in a F-Pattern. Indicating that people read a website much like the shape of a letter F. So people start at the top left of a page and read across horizontally. It occurs twice forming the top and middle of the F. Then you and I as people usually read down the left side, while scanning the page. The further down a page we get, the shorter our horizontal views become. So a typical map (I thought it would be called a graph at first) shows up with a nice red F on the page with the yellow, blue and gray areas forming the background.

Recently I was informed by an employee of Google (SA) that it takes a whopping 0.8 seconds to attract a reader to your website. In human interaction it takes 8 seconds to form a first impression. So for a website, the pressure is on to grab the readers attention. Our time spent surfing the web with increasing data leads us to dedicate less time to each new site out there. 

After reading about the F-Pattern some time ago, I always had it on my mind to write a post regarding heat maps. This is also the reason I opted for a template that had the widgets running down the left side of this blog. It was also said last year by Quirk e-marketing in their e-newsletter that they changed the layout to have items running down the left side of the page, rather then the right for this very reason.

the best way to see how heat maps are made up!

I just found this video now and darn right first thing tomorrow I'm going to look for this Google feature!
The F-Pattern is however not the be all and end all. Users behave differently for various reasons. For example a user looking for prices, scans a page much quicker and is only focusing on numbers. So they may not start at the top left corner and follow the same pattern. 

images representing of the F-pattern

True for most in the test of 232 people, I know it is certainly no where near even a small part of the world population, but think about how you read a page when scanning for info.

I started analysing sites after reading about this and I found the majority to have their logo at the top left of the page. This is followed by the navigation tabs to the right of that. I still see pages and blogs, where the authors details or image are often located at the top left side of the page, I wonder why? This is the first impression for most readers and therefore represents where the most important information (the brand) should be. With search results pages it is much the same, most people view the natural results first and then scan the right hand side after. For PPC marketers this is always a challenge and therefore making adverts relevant with appealing bold text and at the right position, is an on going goal. 
Companies specialising in heat map reports like, Egg Crazy and ClickTale are out there. Data or feedback is fundamental to gaining knowledge about your consumer and knowledge is power. So maybe they can really bump up the tracking needed to make educated decisions regarding your site and its optimisation. Would be interesting to compare the data gained from heat maps with that from Analytics don't you think? May I suggest going to ClickTale and watching the introductory video to get a good understanding of what is possible to track with heat maps. Clicks, browsing, mouse movement etc.

popular sites with the F-pattern association

Gumtree Home Page

YouTube Home Page

Even FaceBook

Pitty the pics are not better quality. What do you think of my free advertising on the right of the pic above? 

To answer the intro question, is it accurate? Well we going to have to leave it up to others for now. Only until I actually get my hands on some of software! I know you may have thought that, "HEY, a futuristic central image banner also looks cool or a fantastic interactive flash feature in the middle, that is the funnest?" I agree with you! Don't get me wrong and take a look at my header, but majority rules? If any of you have an eye deficiency with visual perception issues and didn't see the F pattern in the above pics, talk up and I will draw it out for you no quibble.

I invite you to add your say, you can even do this anonymously or now catch AdsMitchell on the Facebook fan page. Write a comment if you like this or if you thought it was absolute garbage. I want to hear from you! 

If I do hear from you, I'll take a picture mimicking your suggestion & post it! Granted the T's & C's apply in small little fine print.


  1. Nice, and interesting read - I definitely have to pay more attention to this kind of thing in the future.

  2. Thx for the shout bud! not new info to many I'm sure, but something I want to explore soon. If any of you see more than 5 F-type pages in a week, SHOUT!