Web “sites” are complete abstractions—they don’t exist, except in our heads. When we identify a site as such, what we’re really describing is a collection of individual linked pages that share a common graphic and navigational look and feel. What creates the illusion of continuity across a cohesive “site” is the design features that pages share. Individual html pages and how they are designed and linked are the atomic unit of web sites, and everything that characterizes site structure must appear in the page templates.
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 visible component of site identity. What seems real is real: a collection of pages that share headers will be perceived as a “site” even if the pages originate from very different technical sources (php/Perl, jsp, .net, blog software, portal systems, SharePoint, web applications, content management systems, and so on).
Placing your organization or site logo in the upper left corner of the page—and linking that logo to the home page—is a widely used convention and one you should adopt. If you are not using a logo or graphic in your header, at least put a “home” link near the upper left corner of the page, where 99 percent of users will expect to find it.
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:
Tabs are another widely used, easily understood convention for global navigation. The best way to implement tabs is to style an ordinary html list with a more elaborate css treatment to form the “tab” graphic around each link. Be sure you get the graphic details right: the selected tab should be graphically unambiguous, and the remaining tabs should clearly be behind the selected tab. This type of “you are here” marker is essential in orienting users within the site. Tabs can also be used to implement a two-tiered navigation scheme, in which a secondary horizontal list of links appears under the selected tab, again as a simple html list with css styling, to keep things semantic, accessible, and search visible (fig. 6.2).
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).
Long ago, Amazon put its “cart” link in the upper right of the header, and that’s where virtually all other shopping sites put it now, too. Don’t buck the trend; it’s one of the most firmly rooted interface conventions on the web (fig. 6.5).
Ad-supported sites often reserve a large area above other header components for banner advertising, and research shows that users commonly expect to see banner ads in this area of the page. This layout convention has important implications, even if your site does not use banner ads, because of the widely observed phenomenon of “banner blindness.” Readers commonly ignore areas of the screen that usually contain advertising, especially if the graphic content looks like a banner ad. Be sure your headers and other page graphics don’t use the heavily boxed and graphically loud visual vocabulary of most banner ads, or your readers may ignore important elements of your user interface.
Subdividing the page field into functional regions is a fundamental characteristic of modern graphic design. Early in the web’s history, designers began using narrow “scan” columns at the edge of the page to organize navigation links and other peripheral page elements, much as scan columns have been used in print publications for a century or more. Research on web user expectations now supports the common practice of locating navigational links—particularly section navigation—in the left column.
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).
Extensive eye-tracking and user research says that it doesn’t really matter whether you use left or right navigation columns. Users seem to do just fine either way, as long as you are consistent about where you put things. We favor the left column for navigation simply because that is the most common practice.
Basic “real world” information about who the company responsible for the site is, where the company is, and how to contact the company is often hard to find on otherwise well-designed sites. If you sell a product or service, don’t hide from your customers. Display your contact information in a prominent location, such as the scan column, on every page.
Our advice about ads in the scan column is the same as with header ads (above): beware! Users often ignore content that looks like advertising when they see it in a scan column. Use formats that don’t scream “advertising!” Never make your scan column content or navigation look anything like a typical banner ad, or users may never notice it.
Web content is so multifaceted that few general rules apply, but the following common practices make content areas easier to use:
<h1>heading at the top of the page to let users know what the page is about.
Page footers are mostly about housekeeping and legal matters. These elements need to be on the page, but place them somewhere out of the way: