Jakob Nielsen's Alertbox, February 10, 2003:

Homepage Real Estate Allocation

Summary:
On average, sample sites evenly distributed valuable screen space between content, navigation, fluff, blank areas, and system overhead. Areas of user interest should occupy more than the current 39%.

Corporate homepages are the most valuable real estate in the world. Space on a big company's homepage is worth about 1,300 times as much as land in the business districts of Tokyo.

How is this valuable real estate allocated? Very inefficiently. Most pixels go to waste.

A homepage really has two main goals: to give users information, and to serve as their top-level navigation for information that's inside the site. However, these two goals accounted for only 39% of the screen space across a sample of 50 homepages.

A third important homepage goal is to tell users the site's purpose and where they are relative to the Web as a whole. Sites typically accomplish this using a logo and a tagline. On the sample sites, these elements were sometimes much too big, but on average, the sites spent an appropriate 5% on welcoming and situating the user. Even including these elements, however, the sample sites allocated less than half the screen space to useful pixels.

Usage Mapping Diagrams

The following list and pie chart show the average percentage of pixels used for each category across the sample of 50 homepages:

Operating system and browser overhead: 19%
Navigation: 20%
Content of interest to users: 20%
Advertisements: 2%
Self-promotions (ads for the site's own stuff): 9%
Welcome, logo, tagline, and other site identifications: 5%
Filler (useless stock art, such as "smiling ladies"): 5%
Unused: 20%

Pie chart of homepage screen space use, visualizing the percentages in the above list
Average real estate allocation across 50 homepages.

We performed usage mapping on screenshots that were 800 pixels wide and 768 pixels tall. This size corresponds to popular monitor sizes, but keeps the browser window to the most common Web page width, rather than the maximum screen width.

Using these major categories to map a site's use of space above the fold is a revealing exercise. You can do this yourself: Grab a screenshot of your homepage and superimpose semi-transparent colored boxes on top of each design element, using color-coding for each important screen space category. You will often find appallingly small areas colored green (useful content) or orange (navigation).

The pie chart represents the average homepage, but of course there is no such thing. Advertising, for example, can represent anywhere from 0 to 10% or more of a page; other categories also vary drastically from site to site.

Five Types of Screen Elements

The pie chart shows a surprisingly even distribution between five types of screen elements, each of which occupies about one-fifth of the screen:

Two are actionable and interesting to users: navigation and content.
Two contain fluff that users typically ignore: all types of promotions, site identity, and filler clipart, as well as pixels that are literally unused. (Note that "unused" space does not include pixels used for white space or separators, which we coded as belonging to the category they were inside or adjacent to. By "unused space" I mean areas of the page that were simply empty, often due to a frozen layout.)
Finally, it's amazing how much space is spent on browser chrome, scrollbars, and other system overhead. The typical website designer can't do anything about these pixels, other than appeal to Bill Gates to go easy on the toolbars in the future. (A few percent of browser overhead can be saved by using liquid layout, thus eliminating the horizontal scrollbar.) Of course, users don't care who is to blame: for the total user experience, all that matters is how the pixels the user paid for are being utilized. The more pixels consumed by overhead, the more urgent the need to focus the remaining pixels on those elements that are most important to users.

Recommended Real Estate Allocation

It is impossible to present a single recommendation as to the percentage of pixels to use for each screen element category. The classic corporate website, for example, blends content and navigation, emphasizing the latter. Newspaper and magazine homepages, on the other hand, usually need a huge amount of content, while portals often require much more navigation.

In most cases, content and navigation do need the lion's share of space. It's a disgrace that they only account for 39% of the precious pixels on today's limited computer screens.

Site identification and welcome are definitely not useless, but should be kept at a minimum -- offering just enough to let users know what site they are on and its main purpose. The more detailed purpose is usually best revealed through content and navigation, but a well-chosen tagline can facilitate users' interpretation of these elements.

Although I can't tell you exactly how many pixels to put into each bucket, I encourage you to map out your homepage's real estate allocation. If you're anywhere near the average, it won't be a pretty picture.

Full Details

My recent book, Homepage Usability: 50 Websites Deconstructed, contains full-sized screenshots of the 50 homepages we used for this analysis. The book also contains usage mapping diagrams for all 50 designs, with colored overlays showing which parts of each page were used for what purpose.