Chapter 1. Designing to Aid Navigation
| Design on the Web isn't really about giving your visitors something pretty to look at. It plays a more important role: creating a sense of place. A good design unifies the pages of your site by making them look like they belong together. The design gives you the "siteness" of the site, in other words. It draws a border around your particular stake on the Web and says, "This stuff goes together." You achieve this sense of place by using design elements consistently throughout your site. Things like the layout, color scheme, and text style of your pages should hang together visually. If every page of your site uses different design conventions, no matter how effective these individual designs may be, you create a sense of place akin to a strip mall. Every glaring storefront competes with every other with no discernable intelligence or purpose. It's a visual catastrophe. However, when you apply the same design consistently, page after page after page, you get something like an upscale department store. Your level of class goes way up. You attract a more sophisticated clientele. When your visitors navigate your site, they feel like they're moving from floor to floor and department to department, all under the same roof. Even better, the way you use design can help your visitors figure out what department they're in without searching for those floor plans by the escalators. Here's how it works. Most sites organize their content according to some type of hierarchy or logical structure, which means that the site builders break down the information they're presenting into categories and subcategories, like this:
If you're designing this site, the hierarchy does most of the work for you. The top-level items in the list become the choices in the navigation, as in Figure 1.1. These are the floors in your upscale department store. You know right away that you need a page on your site for each of the main categories. What about the subcategories? These are the departments in your department store, with several on each floor of the building. You need a page on your site for each of the subcategories as well. Maybe you need sub-subcategories or sub-sub-subcategories, too, depending on how deep and detailed the hierarchy of the site is. No problem. Count on one page for each item in the list. Figure 1.1. The top-level items in the site hierarchy give you the categories for the nav bar. The great thing about a hierarchical structure is that it funnels your visitors exactly where they want to go. Your navigation gets them to the right floor, and the subcategories direct them to the right department on that floor. It's quick, easy, and intuitive, just like moving through a physical place. Your task as the designer is to enhance this effect to the utmost. You want your graphical representation of the site to match the organizational structure as closely as possible. The trick is to make the pages for each level of the hierarchy visually distinct while maintaining an overall uniform look and feel.
Look at the designs in Figure 1.2. They're consistent. As a matter of fact, they're exactly the same. But notice that the design on the left is for a top-level pagea floor of the buildingwhile the design on the right is for a subcategory pagea department on that floor. Nothing about the design suggests the position of the pages in the hierarchy. In one case, the design identifies a main category. In the other, the design identifies a subcategory. Figure 1.2. The same design appears on two types of pages: a main-category page (left) and a subcategory page (right). The design may be consistent, but it doesn't help your visitors figure out where they are in the site hierarchy. Big deal, right? At least the design is consistent. The navigation is clear and easily accessible. Visitors won't get lost as they browse the site. Well, maybe, maybe not. If your visitors come in through the front doorthat is, if they begin at the front page of your site and work their way through the categories and subcategoriesthey'll probably be all right. But a Web site isn't a physical place. It's a virtual one. It has properties that physical places don't. For one, your visitors don't have to come in through the front door. Thanks to search engines, bookmarks, and friends sharing links by email, your visitors can materialize in the deepest recesses of your site without any idea of where they are in relation to everything else. But if your design suggests a specific location and an overall sense of place, you can help your visitors get their bearings, no matter how they arrive.
Compare the previous designs with the ones in Figure 1.3. Here, the designs themselves reinforce the logical structure of the site. The subcategory page on the right takes its visual cues from the main-category page on the left, but the designs are different enough to suggest that the subcategory page is a different type of thing, which it is. Dress all your subcategory pages like this, while using the main-category design for all your main-category pages, and you're home free. Figure 1.3. Two different but related designsone for the main-category page (left) and another for the subcategory page (right)help your visitors keep their bearings as they navigate your site. You can go a couple of different ways with distinguishing the designs. The pages in Figure 1.4 get busier and more graphically involved as you go down. This scheme works best when your hierarchy drills down from general categories to increasingly more specific information, such as going from a broad category like a book to a type of book such as fantasy to a specific title in that genre such as The Lord of the Rings. The increasingly involved designs suggest to your visitors that they're getting closer and closer to the information they want, which is in the bottom-level pages. Figure 1.4. In this design, the pages get busier the deeper you go, just as the information on the pages gets more specific. If your site focuses on the information in the top-level pages instead, you might try a design as shown in Figure 1.5. Here, the pages get less involved as they go down. This implies that the lower level pages clarify or expand upon the information in the top-level page, but almost as an aside. From your visitor's point of view, the top-level page delivers the goods, while the lower level pages provide secondary information. Corporate sites benefit from this type of structure, since these sites provide general information about a company or organization. This scheme doesn't work as well for ecommerce sites such as bookstores and record stores, which are all about the bottom-level pagesthe specific products for sale. Figure 1.5. If you want to focus attention on the top-level page, use a less-involved design on the lower level pages.
|
