Structural Design

As the web has matured over the past decade, the structure of web pages in text-driven information sites has become more uniform and predictable. Although not all web pages share the exact layout and features described here, most web pages incorporate some or all of these basic components, in page locations that have become familiar to web users (fig. 6.1).

Page headers are like miniature versions of the home page that sit atop each page and do many of the things that home pages do, but in a limited space. Headers provide site identity and global navigation, with search and perhaps other tools. The exact location and arrangement of the components vary from site to site, but the overall design pattern has become fairly consistent.

Headers are the most frequent location for global navigation links that span the site. The ideal arrangement is to use an html list of links, styled with css to spread horizontally across a section of the header. This gives you:

Breadcrumb navigation is a widely used, easily understood navigation device that is particularly useful in large sites with deep levels of content organization (see chapter 4, Interface Design Conventions). Breadcrumbs integrated into the header are best at the top of the header, as in the Google and useit.com sites (fig. 6.3). Another popular location for breadcrumb navigation is just above the main page content.

All sites with more than few dozen pages should offer local site search. The upper right area of the header is a popular location for search boxes, but a header search box must necessarily be simple to fit in this relatively small area (fig. 6.4). If you need more screen area to offer more controls and choices to the search user, consider locating your site search in the left or right scan columns of the page (see Scan columns, below).

Scan columns are also useful as locations for web search boxes, mailing address and contact information, and other more minor but necessary page elements. Research shows that the left scan column under the local navigation links is the second place most users will look for search features, after they look in the right header area (fig. 6.6).

Web content is so multifaceted that few general rules apply, but the following common practices make content areas easier to use:

Page footers are mostly about housekeeping and legal matters.