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.
[View full size image]
GEEKSPEAKLevel is the common name for each division in the hierarchy. For example, if your site drills down to sub-subcategories, you have three levels in the hierarchy (main category, subcategory, and sub-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.
[View full size image]
TIPFor every level in your site hierarchy, create a distinct but related page design. |
TIPDon't even think about designing a site without sketching out the site structure first. You don't need to know every single category or subcategory. These will probably change a dozen times during development anyway. However, you should know approximately how deep the hierarchy will go, so you can provide distinct but related designs for each level of page. |
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.
[View full size image]
Figure 1.4. In this design, the pages get busier the deeper you go, just as the information on the pages gets more specific.
[View full size image]
Figure 1.5. If you want to focus attention on the top-level page, use a less-involved design on the lower level pages.
[View full size image]
TIPUse the most design on the pages where you want to focus the most attention. If your bottom-level pages are the most important, as in an ecommerce site, build your design toward the bottom level. However, if your top-level pages are the most important, as in a corporate site, emphasize the top-level pages instead. |