Thursday, July 19, 2007

Lost in the Golden Triangle

A look at a heat map of the CSU, Chico home page and how it measures up.

A couple of years ago, some companies got together and did some research on how users viewed a Google results page using eye tracking heat maps. The results showed a "golden triangle" where users spent the most time looking on the page.

Last year, usability guru Jakob Nielson conducted similar research that indicated that most pages generated an F-shaped heat map.

In reality, the 'golden triangle' and the 'F-shaped' pattern are really the same thing. To a degree, they reflect the organization of textual content on content pages, but they also reflect our "training" to look in the upper left-hand corner of web pages as a starting place because we expect:
  • To read (or scan) from left to right and top to bottom
  • To find the most relevant content at the top
  • To find navigational options at the top and/or left
Of course, usability experts understand this behavior and design pages to take advantage of it, and in the process they reinforce and reward that behavior.

Well, I'm proud to say that we at Chico State are bucking that trend. No Golden Triangles for us!

Our Web Development guys got a free Crazy Egg account and tracked user clicks on several pages, including our home page. Though the free account only gave us a half a day's information, what information it did provide was revealing.

Clicks Percent
Portal Login 623 31%
Search Chico State 351 17%
WildcatMail 254 13%
MS Exchange Email
181 9%
Class Schedule 73 4%
CSU, Chico Catalog 70 3%
Directory 60 3%

70% of all clicks were on the top four items. The Portal Login alone accounted for nearly 1/3rd of all clicks.

Of course, these top links were all placed in the upper left-hand portion of the page, right? In fact, none of the most commonly clicked on areas were in the golden triangle - or even near it.

Here's a heatmap of our home page from the test:

Even better, here's the heat map without the site overlay:

As you can see, just about the least clicked part of the page is the golden triangle.

The Portal (lower right), search (top right) and email (far right) links are all in non-prime real estate areas of the page.


Hopefully, we'll be able to purchase at least a full month's usage of Crazy Egg in order to gather some real data that will further help guide us to better redesign the new home page...whenever that may or may not happen.


vincenthec said...

Nice. Instead of using a heatmap with clicks, we used an eye tracking system. The results were amazing also.

vincenthec said...

I forgot, here's our video example of an eye tracking system for the web. Here's a blog post about it (in French sorry).

Anonymous said...
This comment has been removed by a blog administrator.
Anonymous said...

Your captive audience is different from the type that is impacted by the "golden traingle". Students, faculty, ... who want/need to use your site must go where the items they need to use are placed. That is significantly different from a seller on Internet trying to grab the attention of a potential customer. Such persons have little motivation to discover how to use the site, since they can almost always go somewhere else to buy the same or a similar product.

Someone coming to this site usually has a purpose which can only be accomplished by finding the appropriate link, ... on the site no matter where it is located.

The "golden triangle" and other similar research is trying to help page owners attract and keep traffic.

Tony Dunn said...

Actually, one of the main purposes of the university home page is exactly to "attract and keep traffic" and "grab the attention of a potential customer" (referred to as 'prospective students'). So I actually don't feel that there is any significant difference in the goals motivating an online retailer and a university, or in the best practices that will help them sell their product, whether it be widgets or a bachelor's degree.