TWV Media


Where does your eyeball go first?

If you’re looking at anything … a car, a cat, a dog, a couch, a print advertisement, the TV, a website, anything…what’s your gaze going to be drawn to first, before anything else? And where does your eyeball linger longest, or keep coming back? My guess is that this is something you’ve never even given much thought to.

Well, as you know, marketers like to get a corner on every last aspect of user behavior, emotions and mentality. This eyeball idea is something that’s been analyzed before, going back decades, really. Think about the layout of a print advertisement, with its use of white space and palette of colors, or even the layout of a newspaper page with white space, gutters and photo placement. The big difference is that in the past, much of this sort of analysis was guesswork or gut feeling.

Google’s Page Heat mapping has taken all the guesswork out of this equation.

Here’s how it works …

Google research has tracked pupil movement to pin down the areas of color, text and images that the gaze is drawn to when a person is presented with visual information. It’s a tool that has come into play not just for graphic designers and web designers, but marketers as well.

Page Heat Map

Google’s Page Heat mapping allots a different color to each part of the page, with each color denoting a range of viewing activity. The study tracks the length of time a user’s pupils actually fixate on a certain region of the page (presumably to read the copy on that particular section). A red section is the “hottest,” with 80-100% of the page’s viewers lingering on that particular section.

The color values break down this way:

  • Red – 80-100%
  • Brown – 70-80%
  • Yellow – 60-70%
  • Green – 50-60%
  • Light Green – 40-50%
  • Blues – 30-40%

So how does this serve you as a marketer, web designer or webmaster?

Like in the print advertising days, it’s important that you understand how people look at webpages, how they travel through sites and what areas you can train your own attention to so that you maximize the efficiency and effectiveness of your own website’s design.

Sweet Spots and the Golden Triangle

What, another new industry term? It’s not that intimidating. SEO people refer to “the Golden Triangle” as a way of breaking down some of these Page Heat ideas a little bit more. For SEO-mavens, the Golden Triangle “sweet spot” is up at the upper left corner of a search engine results page. Think about where your eyes go first when you’re doing a Google search for spaghetti, saddles, custom rims or anything else. Unconsciously, your gaze is almost always going to go to the upper left of the results page…and there’s your Golden Triangle. It’s useful in narrowing down not only natural search, but the visibility of paid ads. Heat maps seem to indicate that the top center/left region gets the most visibility, with the top right-column paid ad coming in second. Makes sense, really, when you consider that print English is read from left to right.

This can all, of course, be very useful for marketing ends. You can even narrow it down to what part of a hyperlink is attracting the user’s attention. And Google’s research into heat maps has been able to break things down further, looking at differing user habits by sex, age and other demographic factors. The Google Eye Tracking Report is now available; it goes into a lot more detail on much of these studies than I ever could here.

A case in point:

Google’s studies have categorized the following habits for a user who lands on a search engine results page (all fairly self explanatory):

  • The Quick Click
  • The Linear Scan
  • The Golden Triangle
  • The Deliberate Scan
  • The Pick Up Search

OK, well, that’s all well and good, but … how does it apply to your site, other than just in generalities, right? Well, that’s certainly a legit question. Google Analytics doesn’t include a Page Heat/heat map feature at this time, although it’s rumored to be in the works. Here are some useful alternatives, though, that operate on some of the same principles:

  • Click Heat – rather than scanning a user’s eyeball movement, Click Heat tracks the trails of the mouse cursor as it scoots around a page. It’s a bare-bones way of keeping tabs on some of these variables, but you can’t beat the price (free!).
  • Crazy Egg – much the same idea as Click Heat, Crazy Egg keeps track of clicks and mouse movement. It features RSS or email notification of its reports, and can also do real-time reporting.
  • Click Density – this one is a little more involved, requiring you to put about five lines of Javascript into each page where you want to track the results. It plots mouse movement on an x/y coordinate grid for you, which over time will show patterns that can be developed into heat maps.
  • Codynamix Cannoli – this one is open source and still in the beta stages. It not only tracks click patterns and mouse movement over time, but also by day of the week, time of day and date. Are people clicking on links for your products/services more on Friday? Or every two weeks? Friday…two weeks…payday? That’s information that you can extract and use it to promote specials or fine-tune your marketing by putting up fresh product information towards those days.

So there you have it.

You’re a small business owner with a website, a webmaster, a full slate of SEO ideas and a site that’s been optimized for all it’s worth. You need all the tools for site optimization that you can put in the toolbox and keep at your disposal. Page Heat and heat maps may not be the be-all and end-all, but it’s a technology that’s certainly interesting (if somewhat Orwellian). One thing that’s for sure – it’s still in its earliest stages now and as it evolves and gets refined, more marketers and web designers will be keeping track of it (no pun intended) and seeing how they can get the most use out of it in their marketing efforts.