B8 Category Pages

B8 Category Pages

Figure B8.1. Categories are labeled well and laid out consistently throughout Martha Stewart's Web site. When visitors travel deeper down the levels, they know where they are by the color scheme, the navigation elements, and the content.

(www.marthastewart.com, February 1, 2002)


graphics/common.jpg Background

This pattern shows how to design different sections of a Web site so that they are distinct but still obviously part of the larger overall site. Category pages are often reached through one of your MULTIPLE WAYS TO NAVIGATE (B1) including any of the organization schemes for BROWSABLE CONTENT (B2), such as HIERARCHICAL ORGANIZATION (B3), TASK-BASED ORGANIZATION (B4), CHRONOLOGICAL ORGANIZATION (B6), and POPULARITY-BASED ORGANIZATION (B7).

graphics/common.jpg Problem

As customers navigate through a site, if category sections are not introduced through a consistent layout, each section may seem like a new site.

Whether navigating through sections of content, products, or applications, when customers come across a new area, it must be consistent with the rest of the site or they might think they have gone to a new site. Category sections that are consistent in layout and navigation elements reinforce a sense of location (see Figure B8.2). This does not mean that all categories must look exactly alike, but the basic structure must be the same. With a consistent structure, customers can recognize not only their location, but also the main elements of the section.

Figure B8.2. Consistently colored categories and banner titles show Amazon.com customers that no matter which section they're in, they are still on the same site.

(www.amazon.com, August 23, 2001)


Use a Consistent Layout

Customers may become confused if they expect to find a section title in a certain location and it is not there. They might go to another page even if they are actually in the right place. Keep all the content and navigation elements in the same locations on each page so that people recognize the layout and feel secure that they are still on the right site. Keep the name of the section in a consistent place as well so that you can maintain a strong sense of location while introducing customers to a new section. You can do this by using the same or similar GRID LAYOUTS (I1) throughout your Web site and consistently placing these key elements in the same place.

Maintain Consistent Navigation

Make your navigation system the same throughout your site. You can change the color of a TAB ROW (K3),for example, and the subsection search element of a SEARCH ACTION MODULE (J1), to give it a sense of place, but avoid radical changes to other elements.

Provide Strong Feedback That Visitors Have "Arrived"

When you drive into a new town, it helps to see a big sign that says, "Welcome to Woebegone"; you know you have arrived. The same is true on the Web and within sections of your site. Provide a large sign or just a page title that indicates the category page section name the way it appears in navigation elements throughout the site.

graphics/common.jpg Solution

Use a section category layout consistently throughout your site, with the same navigation elements, giving customers a strong sense that they have "arrived" at a new section and a clear idea of how to get back.

Figure B8.3. Focus category pages on the featured content, while using consistent navigation.


graphics/common.jpg Consider These Other Patterns

Build a consistent category page layout using a PAGE TEMPLATE (D1) and CONTENT MODULES (D2), with consistent GRID LAYOUT (I1), NAVIGATION BARS (K2), and LOCATION BREAD CRUMBS (K6) to indicate where the customer is on the site. If you're using TAB ROWS (K3), you might change the color of the tab for each category section. If you're using a subsection element in a SEARCH ACTION MODULE (J1), make the default the current section. Use the CLEAR FIRST READ (I3) to indicate the section name so that visitors know they have "arrived" at a new category.

     Python   SQL   Java   php   Perl 
     game development   web development   internet   *nix   graphics   hardware 
     telecommunications   C++ 
     Flash   Active Directory   Windows