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.
Oh I’ve had this conversation at work before. Nothing pisses me off more than bleating about ‘the fold’, especially as we all know, online, there is no fold.
“Anyway, you wouldn’t just read the top of a newspaper,” he adds. He recommends instead that you design website content that cascades down intelligently. “Lead the visitor down the page, and inform clients that scrolling is intrinsic to the medium,” he advises. - https://www.netmag.co.uk/zine/discover-culture/exploding-the-myths-of-web-design
Some interesting reading here from the fine chaps at Boxes and Arrows: https://www.boxesandarrows.com/view/blasting-the-myth-of
And finally, my personally favourite: https://www.thereisnopagefold.com/
Love when tweets and blog posts mix it up. Nick, you got peanut butter on my chocolate…
https://www.thereisnopagefold.com
(via @humanradiator’s RT of @jnunemaker)
A few people were wondering the time frame on the CrazyEgg page test. It was run from Nov 9 - Dec 14,so ~36 days.
Man I love a good heatmap, but I followed Todd’s “thereisnopagefold.com” with the Google Browser Size and got a good lol.
I am CONSTANTLY hearing about “the fold” when we design, and I agree that the most important information should be made clear at the top, but this was a good read.
Thanks Nick!
I think this is the most thought provoking statement in your post:
“Don’t put links you don’t want clicked on the site (ex. our header top menu)”
You’re absolutely right- especially on landing pages where you have a very distinct purpose with (hopefully) well defined actions. It’s easier to just use the site’s standard templates with all of the regular global navigation that’s likely irrelevant to the reason you brought people to this page.
If you’re going to take the time to do a campaign and create a landing page, take the time to think through the entire experience.
Nice to see you’re testing and tracking your results. While I tend to agree that there is no fold, in certain cases I do think it’s a legitimate concern. The best way to know this is through user testing. We can’t assume either way. Good post, Nick.
interesting article, I especially like the comment, don’t have links on stuff you don’t want people to click on! Never thought of it like that before.
Thinking about above the fold stuff is key, good article.
I agree wholeheartedly that this topic follows, as others have noted, the most basic principles of UI design: lead the user.
If you lead the user, they will instinctively know what to do- scroll, click, type- your design will work to afford what the user’s instincts are, and go from there.
That being said, it’s still important to know what users will see when they first land, otherwise you won’t be able to give them visual cues to guide them further down the page.
For that, I offer a shameless plug: https://www.foldtester.com. It’s built based on browser viewport size data from millions of internet users- and since it’s the viewport, this helps answer the question of toolbars and navbars and plugins, and so forth.
Would love feedback on this; it’s still fresh out of the gate.