Google released a tool yesterday called Google Browser Size in effort to show how users with various screen sizes see your site. They also wrote up a blog post about it.

Personally I think it’s great they are making people aware of the fold. And working in a higher education Web office we hear “everything needs to be above the fold” all the time. I’m sure we aren’t the only group that hears this but we do hear it a lot.

An example

I have been meaning to write a post and show off the heatmap of a landing page we’ve used recently and this seemed like the perfect opportunity. The campaign was mainly image building and was targeted nationally and to various age groups. The goal was to get visitors to learn a little something about our institution and then click one of the action items on the right. Explore our programs, request information or schedule a tour.

Google does a great job putting the fold into prospective but I have always said that people do scroll if you give them a reason to. This page is a good example of that, the fold is just below the thumbnails so we made the “In the News” title was visible to someone with a 1024×768 screen. Taking a look at the heatmap you will see the majority of clicks were above the fold except the Wayne Bloggers image, the second most clicked link and it is quite a bit down the page.

Heatmap of test page

We use a service called CrazyEgg to track visits and clicks. In total this heatmap contains:
1035 clicks from total 3021 visitors. The clicks are from both both links and background areas.

Now compare that to the same page with Google’s visual hierarchy. The blogger button is at about the same distance down as the “Give Now” button in Google’s example. 30% of visitors could not see the button but it still accounted for 11% of all the clicks on the page.

A few things to notice

• Most of the clicks did happen above the fold
• Offered Programs was the most clicked link with 15%
• The blogger image at the bottom was the second most clicked with 11%
• People like to click on faces
• Don’t put links you don’t want clicked on the site (ex. our header top menu)

Looking at these results we learned a lot about how an average user reacts to elements and positioning. We run these heatmaps every time we test a new design and continue to refine our designs based on the results. If you have not done heat mapping on your site before I encourage you to test it out at least once, you might be surprised.

This post was written by Nick DeNardis