Are your pages upside down?

Gradients of function and complexity in Web site design

   When faced with laying out a Web page most people do the obvious thing— they emulate the print documents, newsletters, and magazine layouts they’ve seen all their lives. You see the results on thousands of Web pages: Plunk a big graphic on the top of the page to make it “interesting,” then start listing the links, text content, or minor graphics below the graphic dominating the top of the page. The ironic result is that the important stuff— the menu links, navigation links, and descriptive information— gets pushed off the bottom edge of the screen where it can’t be seen.

   Web designers have borrowed an old newspaper term to describe the lower-value page territory that readers have to scroll to see. Any content too low on the page to be seen on the typical 800 x 600 display monitor is said to be “below the fold,” and is much less likely to be noticed by readers.

   The top four vertical inches of your home page are the most valuable real estate in your Web site, and should be the most dense area in your site in both visual and functional complexity. Although we typically talk about the design of Web “pages,” very few readers have monitors large enough to see whole Web pages at once. Layout for any online document is really about the design of screens of information. This is a crucial difference between Web design and design for the printed page— printed pages are seen as whole units, and are often in spreads of two pages. The typical 17-inch office display monitor cannot show even a single “letter size” page from top to bottom.

   The complete view we get of print documents allows graphic designers much more freedom to lay out pages, where picture and typographic placement can create patterns of contrast and visual entrance points across the whole page as a unit. The same graphic design conventions can work on the Web as well, but only if you remember that readers only see part of the page at any one time.

   Thus you should think of a home page as a vertical stack of screens of information, and lay out major navigation pages to take maximum advantage of the only area you can be sure the reader will see when the page loads— the top of the page. The New York Times home page is a good example of how this principle plays out in a very complex, high-value page that must introduce dozens of major stories and content categories to readers. As you scroll down note how both the graphic complexity and functional density of the pages thin out. Most readers only see the top portions of pages, so there’s much less value to content “below the fold.” There’s also much less incentive to load up the lower page with graphics. Why make everyone pay in longer download times when relatively few readers will scroll the page all the way to the bottom?

   In a simpler example I designed, note how the complexity of this navigational page drops as you scroll down the page. There are really two distinct areas here— a high impact, high functionality screen on top of a more quiet newsletter screen. I pushed the menu links into a dense array at the top, but made sure that the headlines on the news items poked just enough above the “fold” (bottom of the screen) so that even readers with smaller monitors would see that there was more content at to be seen by scrolling down the page.

   What is true of individual pages is also generally true throughout the depth of a Web site. High-level home or navigation pages should be dense with visual impact and offer a highly functional array of content and navigation graphics. As the reader drills down into the site that visual and functional complexity should fall away, so readers are not distracted by irrelevant information even after they have found a specific topic deeper within a site.

   Too many magazine and news sites violate this complexity-gradient principle by making even the most deep and content-specific pages of their sites as noisy and distracting as the home page. When you are done surveying the content offerings of the home page and are ready to settle on a specific story it’s horrible to have to look past an all-singing all-dancing extravaganza of blinking visual confusion when you’re trying to read. Salon's otherwise excellent article pages are an example of poor use of distracting complexity deep within a site aimed at readers. Slate (generally, not always) handles article pages in a much more quiet template that makes reading more comfortable.

   Banner ads may be an ugly fact of life on commercial “portal” pages, but it’s just foolish to hammer readers with distraction after they’ve chosen an article to read. What’s the point of creating content, only to make the uncomfortable business of reading from the screen even worse with animated advertisements? If ads are necessary, put them at the bottom of the page, out of the way, where readers may be more receptive to them after finishing the article. One of the few sites to follow this commonsense practice is the Chronicle of Higher Education. The Chronicle home page is complex and rich with possibilities, but article pages deeper within the site are much more quiet, and ads are often placed below the end of articles, where they are both less distracting to the reader, and more likely to be read instead of ignored.

Summary

• Careful Web design should produce vertical gradients of complexity:
   
  • Down individual pages
     
  • Throughout the depth of the site.
     
• Design pages in screens of information
   
• The tops of major navigation pages should be:
   
  • Dense with navigation and content links
     
  • Graphically complex to draw reader interest
     
• Keep interior pages quiet and undistracting
   
  • Allow your readers to focus on your content