Sunday, December 5, 2010

Things You Should Know About A Website’s Fold

posted by Patrick Burt - A Blog for Web People

In this week’s series about Web Usability, we will be dealing with folds and what you need to know about them. Knowing about your fold can help you with ad click-throughs, general design and web usability. It gives you the needed knowledge so that you can appropriately place elements on your website. Let’s start off with the basics.

When dealing with websites, what is a fold?

A fold is the section of your website that is viewed before a user has to use the scrollbar. The term comes from the newspaper industry where important front page content was literally placed above the fold so it can be viewable in newsstands when the newspaper is folded.

Why are folds so important?

Users are lazy, users are skimmers and users sometimes feel inconvenienced if they have to scroll to reach their destination. Because of this, they might have missed out on something like an ad display or internal marketing campaign just because it was placed too low on your website, below the fold. That’s why it’s important to take your website’s fold into consideration when designing and advertising on your website.

In Jakob Nielsen‘s and Hoa Loranger’s book about Web Usability, they detail that when the users they tested landed on a page with more then a screenful of content, less then half actually scrolled to view the rest of the page. That’s a significant number, that’s enough for you to sit down and think about solutions if you think this is a problem with your website.

Where is a website’s fold?

In a previous article detailing how wide and tall you should design your websites, I stated that to fit vertically into the majority of your users’ browser window, having a total height of less then 500 pixels is a safe bet. That means, your website’s fold is located in the first 500 pixels of your website. You’re nearly guaranteed that when a user arrives to your website, the first 500 pixels are being viewed. This takes into account the place taken up by browser items and operating system items. This is also based on the the fact that your user’s smallest screen resolution is 1024×768.

What should be above the fold?

This all depends on the objectives of your website. There are items that should ALWAYS be above the fold, simply because these are features users are accustomed to and they apply to every website. The more accessible you make them, the more users you are likely to please, and the more likely they are to keep reading your website. The items I recommend are:

  • Navigation (most of it anyway)
  • Contact Page
  • About Page
  • Search Form
  • Logo or Identifier

These are incredibly important. For example, there is no reason you should design a 800 pixel tall website with a navigation uniquely at the bottom of the page. Especially if 50% of users will never see it. Consider these issues if you’re designing a website.

Here are some examples of great items to have above the fold:

  • Ads (Affiliate, Adsense, etc.) – If you’re looking to make some profit
  • Navigation that improve stickiness – In my case, this involves a link to Recent Posts or Related Posts, the least important navigation items such as Archives are located at the bottom of my navigation
  • RSS Feeds - Easier for users to find out how to subscribe
  • Social Bookmarking – Users might feel more inclined to share your article if the button is easy to find
  • Product/Company Intro – Put this information up front, people crave it.
  • Internal Marketing/Specials – If you want to convert visitors into customers, keep your advertising above the fold.

No comments: