B2 Browsable Content

B2 Browsable Content

graphics/common.jpg Background

Used in any pattern of Pattern Group A—Site Genres that allows customers to navigate by browsing, and as a requisite element of MULTIPLE WAYS TO NAVIGATE (B1), this pattern makes content browsable through a combination of organization and navigation cues.

graphics/common.jpg Problem

Browsing content on a site can be difficult if the information is not organized, or if there are no clear and consistent navigation cues for finding content and returning to it later.

Customers group and organize information in many ways. Just go to a local library and take a look at how things are organized. In the United States, every library uses either the Dewey decimal system or the Library of Congress system for organizing books. These methods work fairly well for a wide variety of libraries—from small libraries of just thousands of books to national libraries of millions of books. Libraries are organized for searching. If patrons know the system, they can find anything.

Now think about how a bookstore is organized. In contrast to a library, magazines are usually grouped together in the front of the store, recent novels are in another section nearby, children's books are in yet another section, and so on. Often books are organized alphabetically within each group, but sometimes a series is so successful and numerous that it warrants its own subsection. Bookstores are organized for browsing as well as searching. Customers of bookstores and patrons of libraries have slightly different needs. The same is true for content on the Web.

Use an Organizational Scheme

Web sites need architectures that depend on the types of information involved, on the amount of information, and on customer tasks. Finding the best organization schemes for a particular site requires analysis. We have included patterns on HIERARCHICAL ORGANIZATION (B3), TASK-BASED ORGANIZATION (B4), ALPHABETICAL ORGANIZATION (B5), CHRONOLOGICAL ORGANIZATION (B6), and POPULARITY-BASED ORGANIZATION (B7). Other organizational schemes that might make sense for your site include spatial (for example, geographic) or numerical organizations. Use CATEGORY PAGES (B8) as directories to content in subcategories.

Structure Content with Customers in Mind

Use card sorting to group items so that people will be able to find what they're looking for by recognizing the group names (see Chapter 3—Knowing Your Customers: Principles and Techniques). It is best to do this with several customers to see if there is a consensus. If there isn't, try to change the names of the items or groups that are causing confusion. Asking these questions about where to put each item and what to call the categories will make it easier for customers to browse your content, picking the right links each step of the way.

Help Customers Find Their Way Back

While navigating from page to page, customers can go down a path on purpose to explore or go down a path accidentally and find themselves lost. If they cannot find their way back to a place they remember, they will feel less adventurous. Leaving links on TAB ROWS (K3) or as LOCATION BREAD CRUMBS (K6) gives customers the reassurance they need to explore freely and to find their way back (see Figure B2.1). Most customers expect to be able to return to your homepage by clicking on your site logo in the upper left-hand corner of any page, as described in SITE BRANDING (E1).

Figure B2.1. Wal-Mart's site provides customers with easy navigation and clear signals for finding their way back. They can click on the Wal-Mart logo to return to the homepage, on the tab row at the top or the navigation bar on the left to go to another section, or on the location bread crumbs near the top to backtrack. (Image courtesy of Wal-Mart.com, Inc. Copyright 2000–2002 Wal-Mart.com, Inc. and Wal-Mart Stores, Inc.)

(www.walmart.com, February 12, 2002)


When Does Content on a Page Become Too Much?

Customers can be overloaded with too much information, and the overload might shut down their ability to read, even though your page could be jam-packed with valuable information. Many factors contribute to the feeling of being overwhelmed—from fonts that are too small, to sections on a page that are indistinguishable, to an unclear hierarchy of content. You do not want customers to concentrate too much on figuring out what's important and what's not. You can mitigate information overload by using techniques that allow customers to scan a page and find what they seek. Lay out each page with a clear GRID LAYOUT (I1), a strong visual hierarchy, consistent content areas, consistent NAVIGATION BAR (K2) and link areas, and a font that customers can read easily, even if it means they will need to scroll (see Figure B2.2).

Figure B2.2. The information on The Knot's Web site is organized clearly and aligned in a clean grid layout. The navigation bar consists of a tab row along the top and links along the left-hand side, making it easy to move through the site.

(www.theknot.com, August 26, 2001)


graphics/common.jpg Solution

Organize your content in several ways, in categories that make sense to your customers and in the intuitive ways they think about doing their tasks. Build navigation tools and cues that let customers know where they are, where they can go, and how to get back. Build each page with its own reading hierarchy so that customers can scan it quickly.

Figure B2.3. Present content in a simple, scannable format that leads browsing readers from one page to the next, while giving them clear navigation markers to make their way back.


graphics/common.jpg Consider These Other Patterns

Determine the best organizational schemes for your content by using HIERARCHICAL ORGANIZATION (B3), TASK-BASED ORGANIZATION (B4), ALPHABETICAL ORGANIZATION (B5), CHRONOLOGICAL ORGANIZATION (B6), and POPULARITY-BASED ORGANIZATION (B7) separately or in combination. Use CATEGORY PAGES (B8) as directories to content in subcategories. Make it easier for everyone to navigate your site with SITE ACCESSIBILITY (B9).

Give customers ample opportunity to find their way back, by employing NAVIGATION BARS (K2), TAB ROWS (K3), SITE BRANDING (E1), and LOCATION BREAD CRUMBS (K6).

On every page, make the content browsable by building a hierarchy of content with a clean GRID LAYOUT (I1), CLEAR FIRST READS (I3), and clearly defined areas with CONTENT MODULES (D2).

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