Homepage Real Estate Allocation

Corporate homepages are the most valuable real estate in the world. Millions of dollars are funneled through an area that’s roughly one square foot in size — 0.1 m² — if we consider only the region above the fold. (The top part of web pages gets the lion’s share of user attention.)

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

A homepage has two main goals: to give users information, and to provide top-level navigation to additional information inside the site. However, these two goals accounted for only 36% 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; on average, however, sites spent an appropriate 3% of space welcoming and situating the user. Even including these elements, however, the sample sites allocated less than half the screen space to useful pixels.

Saddest of all? These statistics are even worse now than they were in 2001 when I conducted a similar exercise:

• In 2001, 45% of the screen was useful (content, navigation, or logo/tagline).
• In 2013, 39% of the screen was useful.

Screen Space Use: 2001 vs. 2013

In the 2001 book Homepage Usability: 50 Websites Deconstructed, we analyzed a broad sample of 50 sites — mainly corporate sites and ecommerce sites, but also government, nonprofits, and news sites.

In 2013, I analyzed the same homepages again with the help of my research assistant Shih-Hsuan Chou. (Because 5 of the sites no longer exist, we replaced them with similar sites; for example, in place of CDNow, we analyzed Best Buy.)

The following table and pie charts show the average use of screen space in 8 categories in 2001 and 2013.

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 green (useful content) or red (navigation) areas.

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

The most striking thing about these pie charts is how similar they look. Very little has changed in 12 years.

Bigger Screens = Less Chrome and Navigation

The only positive development during these 12 years is that much less space is consumed by system chrome — that is, the Windows taskbar, the browser menus, the URL field, and so on. Of course, when I say “less space,” this is true only in a relative sense: because computer screens are much bigger now, the chrome consumes a smaller proportion of the available pixels, even though its absolute size is slightly bigger.

Navigation also consumes a smaller share of the (larger) screen these days. I’m not sure this is actually positive, however, because navigation is crucial on homepages. Users rarely go to a homepage to admire it. They go there because they want to find their way to a destination elsewhere on the site. (In contrast, on article pages and product pages, navigation should indeed be smaller than the content.)

Another positive development is the slightly larger area spent on content of interest to users (as opposed to self-promos and advertising). Today, user-oriented content gets almost a quarter of the screen. Although this is still very little, sites at least show a good deal more information now given the larger monitors in use these days.

Half the Screen Space Wasted

52% of screen space is completely wasted on things users ignore: filler, self-promos, ads, and blank space. It seems that no matter how much research we present about the uselessness of stock photos, the fluffy areas of web pages grow every year.

Although there can be some disagreement about whether something is useless filler or content of interest to a few users, there is no excuse for completely unused screen space. I’m not talking about whitespace for layout purposes; pixels can definitely be left blank and still contribute to a page’s usability. When I say “unused space,” I mean huge areas of the screen with absolutely nothing on it, except possibly a solid block of color.

(Learn more about how to use the screen space wisely in the full-day course on Web Page Design.)

Web design’s biggest disgrace over the past decade is that we haven’t discovered a good way to use the increasingly wide screens on desktop and laptop computers. Pages are still designed as if people had 1024 × 768 monitors.

Progress instead seems to focus exclusively on optimizing web pages for the smaller screens on mobile devices and tablets. All our research on mobile usability confirms the need to modify designs for a tiny screen. But an equivalent argument supports the need to modify pages for bigger screens as well, and that hasn’t happened.

Example: GM Homepage 2001 and 2013

The following screenshots show examples from the two analyses: gm.com’s homepage in early 2001 and mid-2013.

I don’t particularly want to pick on General Motors, though they are big enough to take it. The company’s site was quite representative of those we studied in 2001 and 2013. That is, it was typical of corporate homepages in both years.

In fact, if anything, GM deserves an honorable mention for trying to utilize the wide screen in their current design — even though it’s mainly through the fluffiest of fillers. Although the skyscrapers look nice, most people are probably at this site to see cars. At least GM did nice by offering big, clear navigation to its main car brands.

Design Agenda: More User Focus, Better Screen Use

When I decided to redo my homepage analysis from 12 years ago, I assumed I’d find major changes to discuss in this article. Instead, the news is “the dog that didn’t bark in the night.” Still, this lack of change is actually pretty big news considering how much the web has otherwise changed since 2001. If you compare the two sample screenshots, they certainly look very different. And yet the two pie charts are very similar.

So, my challenge for the next decade is simple:

• Cut the fluff and spend the pixels on design elements of interest to users — mainly content, but also navigation (particularly on homepages that are very navigation-intensive).
• Invent page designs that can stretch across widescreen monitors and still adapt to smaller screens.

See also:

• Full list of 113 usability guidelines for homepage design
• Canonical Intranet Homepage
• Same analysis applied to popular blogs