Business

Is your site effective? Sure you’re not throwing away money? Are HIPPOs running the show?

Innovation

Take some new turns. Challenge everything. Give away power. Be more efficient.

IxD

I love a site that doesn’t make me think. I admire sites that actually create a new urge I didn’t have.

Javascript

No way around it these days. And frankly, it’s pretty fun and powerful.

Photography

The theme I bought ordered me to have at least five categories. I like photography. Especially the gear.

Home » Business, Headline, IxD, Javascript

How much of your web pages are actually visible to your users?

Submitted by on 18/04/2009 – 18:0512 Comments

What dimensions should your web site be? The width is quite easy, at least it you need to reach most ordinary computer users. But how about the height? What and where is «the fold»? Based on data from 4 million users from Norway’s largest classifieds site, I’ll try to point you in the right direction. And I’ll throw in a free tool to help you in the process!

Viewport, screen and fold

First, we need to make sure we’re on the same page, so to speak. I’ll talk about the viewport, the fold, and screen resolution.

viewport-fold-sr

Most web analysis tools will give you the screen resolution, which unfortunately is pretty worthless. More important is the viewport; the content window inside your browser, below all the toolbars, and inside the scrollbars and the framing. It’s the canvas that’s left in your browser that will put a limit to the experience we give the user.

The fold is at the bottom of your viewport. To see anything below the fold, your user will have to scroll. The expression comes from the printed newspaper industry, where newspapers in a news stand often were (and some still are) folded. Only the top half of the frontpage is immediately visible, thus being the main selling point. The problem on the web is that it’s hard to tell where the fold actually is. More in this further down the article.

Developers have too large screens

A luxury and a problem for most companies with a web based business, or perhaps a business that buys web advertising, is that they will have far better equipment than the average Joe or Jane. The front page that looks good on their 24 inch web developer screen won’t necessarily communicate the same message as the same page viewed on your father’s 14″ CRT monster or his 3 year old 14″ laptop. And our web stats tell us that these screens and laptops will live happily for quite a while, if not ever after.

– This isn’t relevant, you might argue. «I know for a fact that my users scroll.» Well, so do ours. They scroll quite happily. As long as they are given indication that there is more to find. This is the core of the problem.

Depending on Google or other search engine traffic?

My surfing habits change. And more so lately. I no longer stay with the regular dozen of daily sites I visit. My bookmarks are no longer my main source for information. It’s rather search engines or social networks, like Twitter, where I follow links from people I trust, or find interesting.

When I arrive at a new site from a Google link, or a link from my network, I scan the page quickly, to see if this is a good place to hang around. According to Steve Krug, or was it Jakob Nielsen, don’t remember, the average user only spends a very few seconds deciding whether a page meets his or her expectations.

You have very little time to show that you are relevant. This is where the viewport is crucial. Do your typical landing pages tell your users what you’re all about? Or do you show half a dozen ads, and 80 percent of the main image? To me, that might very well be a bounce. That means a one-page-visit, where I don’t even read the content on that page.

What all web developers should consider

expediaYou have to decide for yourself if this is relevant to your site or sites. But I believe this knowledge should always be in the back of the mind of all web developers, and one of the questions you always ask yourself when you design any page.

Will the submit button for this form be visible for most users? A visible submit button will undoubtedly increase the response. Look at the Expedia example on the right. Some 20% of the users don’t see that they can search for a hotel at the same time. I’d say it’s a pretty good chance they are loosing some business this way, especially considering the travel booking market is one with fierce competition.

Will all users see the most important content at first glance?

Do I have typical horisontal spacing near the fold that indicates that the page ends, when there actually is more gold below?

dinside_1239387753615Take Norwegian consumer info site DinSide. It’s a great site, with lot’s of reviews and tips in categories that appeal to most people.

Unfortunately, they don’t tell me that they have all this gold on their frontpage. Roughly one third of all users will see less than the page to the right. If I found it on Google chances are I wouldn’t proceed. At least I’ll bet my father wouldn’t.

dagbladetno-forsiden_1239385861864

Other examples are online newspapers. One of the considered leading online Norwegian newspapers is Dagbladet (example to the right). Most people will assume and know that there is more content below the fold, but I’m quite certain they would keep users longer at the site by always showing off more of the fresh stuff they have.

The list of sites with similar approaches are endless. They give little indication at all that there is tons of content buried inside.

A tool to aid the process: Viewport Gradient Overlay

I have created a tool that will aid these desicions. It’s an overlay that will show what’s actually visible to your users. I use transparency to indicate how many users will be affected. The tool is a bookmarklet that you just drag to you bookmarks, and can be overlaid on any site.

Drag this link to your bookmarks toolbar: Viewport Gradient v3

This is the tool you’ll get, and can use on any page. It should work in most browsers. Tested on Firefox, Opera, Safari and Internet Explorer 6 and 7. (As if I care about IE6 support:)).

expedia-viewport-gradient-overlay

The tool isn’t extensively tested, so feedback and suggestions are highly appreciated! On the todo-list I have at least: support for centered designs and the option to select your own colors.

Convinced or not, where is the actual fold?

I’ve analysed the actual viewport size from all web traffic for FINN.no, Norway’s leading classifieds site, with pretty much every Norwegian visiting the site every month. The numbers are from March 2009, covering more than 16 million visits from more than 4 million users. The numbers should be transferable to most countries with a decent internet penetration, as we buy our equipment from the same manufacturers. If anything, I’d argue that the Norwegian screen sizes might be on the upper range, but that’s only speculations.

viewport-height-march-09

Put your main content below 600px and a whopping 40% of your users will miss it without scrolling!

If you need a general rule; make sure the main content on your typical landing pages are within 1000 by 550 pixels. As you see from the plot the height varies, but not even a third of your users have a higher viewport than 650 pixels!

Finally, a word about the width. Very little variation here. Stay below roughly 1000 pixels, and you’ll reach pretty much everyone. It you want it wider, you might as well move upt just below 1260 pixes. 76% will see this. If you cross the 1260 barrier, you’re left with 25%, falling rapidly.

How many percent do you need to target Max width Max height
90% 1003 564
80% 1003 578
70% 1003 594
60% 1259 603
50% 1259 617
40% 1259 630
30% 1259 654

Yes it’s a <table>. Because it’s tabular data.

The most common viewport resolutions measured on FINN.no March 2009:

  1. 1259 x 654 (425.565 visits)
  2. 1003 x 592 (352.856 visits)
  3. 1259 x 628 (327.107 visits)
  4. 1259 x 624
  5. 1259 x 631
  6. 1259 x 604
  7. 1003 x 599
  8. 1003 x 566

Feedback

This is the first article on this site. Please share your feedback on this matter! I want to be better at every aspect of the web business, especially in the crossing between technology and business. And I truly believe that the way to get there is to share anything I learn!

If you share my passion for the web business I also invite you to follow me on Twitter: @nerdegutt (mainly Norwegian tweets) and @schei (English).

12 Comments »

  • Owen says:

    What I’d like to see is a statistic on how many users of screens that are small don’t realize that they can scroll down when they see a cut off form.

    The stats shown are interesting, but the implications made suggest that users who are savvy enough to fill out online forms can’t operate the fundamental scrollbar UI element.

    • Erlend Schei says:

      Tnx for your feedback! My first comment :D I guess some kind of A/B-testing could reveal how many users will skip a half cut-off form. I don’t mean to say you’ll lose *most* users by having central elements below the fold, but I’m quite certain you will lose some.

  • Haakon says:

    Nice first post! I’ve always wondered about users viewport, even though I’ve had a educated guess – it’s great to back it up with statistics.

  • Nice tool, though it doesn’t quite accommodate for centered designs, like for instance the design you’ve got on your site here where the main content is centered in the browser…

    Also it doesn’t quite work 100% perfectly (in FF) when scrolling…

    Apart form that it’s a really great idea (and tool) – especially coupled with the information here and the statistics …

    • Erlend Schei says:

      Centering is first on the todo-list, should be relatively simple to implement. I’ll also allow users to turn off the large box with my ugly face! I suppose that will make it somewhat more tempting to use a screenshot of the overlay in your presentations :)

      Could you be more specific about the FF scrolling problem?

      Tnx a mill for you feedback!

  • I actually think there is far to much focus on putting content above the fold. The lesson is good. Every designer should be aware of the viewport-related issues. Important content and calls to action should probably go “above the fold”, but as designers, we should be to afraid of a little scrolling. Users scroll! – Jacob Nielsen concluded in 1997. They didn’t in 1994. :-)

    So the key, I think, is dealing with the fold in a constructive manner. Put key features above the fold, but don’t be afraid to make the user scroll. Hey, maybe you even have som white space left.

    • Erlend Schei says:

      I totally agree, Jonas. This is just one of many pieces of knowledge that should be in a web designer’s toolbox. Sometimes it’s more important than others. But as a general rule I think it’s getting more and more important to make clever designs that will tell the user instantly what this site and page is all about, as competition hardens.

      To aid that, I hope the overlay tool can be of assistance!

      Tnx for your feedback, I really appreciate it!

  • KC says:

    It works on Chrome! Thanks for this great tool.

  • […] Questo articolo, ad esempio, parte da questo assunto e da una serie di dati raccolti analizzando gli accessi ad uno dei principali siti norvegesi per svolgere alcune osservazioni sull’importanza di avere sempre i contenuti principali nella parte superiore della pagina, evitando di posizionarli, se possibile, sotto i 600px in senso verticale. […]

  • Matt Hill says:

    There is no fold on web pages.

    While it is sometimes good practice to get important content and user-actionable functions high up on a page, the time for seeing web pages as having a “fold” has long since past.

    Jacon Nielsen in 1994 discovered that only 10% of users scrolled a web page. That was 15 years ago and has changed significantly.

    Users aren’t dumb. Most users, even those who aren’t yet web savvy, understand that pages scroll and they often use the scroll wheel on the mouse the get an overview of a page from top to bottom, before returning to the top and reading the page in detail.

    Be aware of the issue, yes, but I wouldn’t lose too much sleep over it.

    • Erlend Schei says:

      Thanks for your comments, Matt! I truly appreciate a different opinion. To some degree I agree with your views, especially about not losing too much sleep :) There are greater concerns that should keep us awake at night ;)

      From 8 years of using a lot of user testing, and studying empiric data from the behaviour of most Norwegian users (I have the privilege of working with a site that is visited by most Norwegians regularly), I’ve learned that some users will hit absolutely every possible obstacle. Indeed they do scroll, I hope that isn’t the message I’m sending, but many also consider everyting that is on the page they’re on. I mean everything! And they often don’t reflect over the perhaps obvious parts that may be hidden below the fold.

      Users aren’t dumb at all. But I, as a web developer, have been pretty stupid numerous times :) And a lot of users don’t have the faintest idea what a scroll wheel is, let alone that you can scroll without using the scroll bars. I hope we can make it more obvious to them what they’ll find on the page they’re at, and the site they’re on.