Whether you are designing a new website, re-architecting an existing domain, or fixing user experience issues, site navigation plays a major role in overall user experience and conversions. Your top-level navigation should accurately reflect your organized online content system and provide users with a consistent mechanism to move through your site effortlessly. It needs to reflect your brand and seamlessly fit into the rest of your site layout and design.

The basics
If this article were in a magazine, you'd turn pages to read more content. If it were a book, you would look up chapters in the table of contents. TVs have remote controls, and libraries have the Dewey decimal system. Web navigation is nothing more than another method of accessing information in an online environment. Unlike printed material, the internet is interactive. Most sites don't house all of their content on a homepage, and website content isn't usually arranged in alphabetical order. Information is cut up into smaller, manageable pieces, and users must maneuver through the site to find information.

Navigation on the web can range from obvious to experiential depending on the type of site you have, the types of visitors you are attracting, and the way the site is organized. In this article, I'll provide some tips and guidelines for ensuring your site's navigation fits your brand's broader online strategy.

No matter the organization or navigation, good website design enables users to effortlessly find information. Like turning on a light switch, elegant web navigation shouldn't be a conscious action. As when you flick a light switch and expect the lights to come on, users expect to see certain information when they click the "About" tab. Navigating websites is a learned behavior, and after countless trials, users have compiled first-hand navigation experience that helps them find content. This reinforced learned behavior helps them successfully navigate through new sites.

Intuitive navigation examples:

• All pages contain basic site navigation.
• Navigation states (on/off) and page titles are consistent and indicate the current page.
• Hypertext link naming is consistent and exclusive to associated pages.
• All navigation goes somewhere specific and is obvious to the user.
• Category naming is directly related to content type.
• Global site categories or main sections are mutually exclusive and grouped intuitively.
• Similar types of navigation elements are grouped together and treated consistently from a visual perspective, indicating link priority and grouping methodology.
• An HTML site map is included for navigation and SEO purposes.

Common navigation mistakes:

• Confusing navigation naming and grouping with inconsistent visual treatments
• Global navigation that contains too many or too few categories
• Poor page indication and confusing or nonexistent bread-crumbing
• Inconsistent visual treatment of similar navigation devices like inconsistent colors for hypertext links
• Navigation items that disappear or move around, and dead-end pages that force users to use the back button
• Pages without a clear call-to-action
• Active links to the current page
• Not linking directly to the item named
• Priority content that is buried or hard to find
• Navigation that gives users an inconsistent or poor user experience

Great website navigation starts with organizing content correctly. Content should be categorized into mutually exclusive sections and labeled accurately. There are reasons for standard section naming like "Products," "Community," and "About Us." Users know what to expect in these areas. The general rule of thumb when naming sections and pages is to be familiar and specific. Research other sites in your industry and follow proven architecture organization and classification. If you want to be different, have a testing mechanism in place to see if your users are embracing your genius or getting frustrated by your curveball.

Too deep versus too shallow
When organizing your architecture, strive for a site that doesn't have too many top-level sections, but also doesn't have content that is too many clicks away. Limit main section navigation links to seven or eight, and keep your most detailed content within four clicks.

Be exclusive
One way to keep your navigation from being too shallow or too deep is to borrow a concept from newspapers. If your homepage is a front page, grouped sections are the equivalent to the main sections of your site. Newspapers keep the politics articles in the world section and the football stories in the sports section. However, sometimes content wants to live in more than one section. In these instances, root the content in the most obvious section and reference it from the other. Make sure users know they are moving laterally across sections rather than down deeper within a section.

Business perspective vs. user perspective
Sometimes where you want users to go isn't where users want to end up. Good information architecture, prioritized page layout, strong calls-to-actions, and consistent treatment of navigation will help funnel users to the information you want them to see. Make sure content goes somewhere, and avoid dead ends. 

Successful business-centric sites focus on business goals. Sites that accomplish both business and user goals are often the most successful. Find that balance by encouraging user interactions. Lead users looking for articles to sign up for newsletters or users looking for locations to provide their ZIP code. Ask visitors to share with friends, follow you on Twitter, or add that second pair of socks to their shopping cart.

Site mapping vs. flowcharting
Site maps show the structure of the site and indicate where content lives. When mapping a new site, we find a large wall and arrange page names with sticky notes. When finished, we group content into main sections and re-organize the sticky notes until mutual exclusivity and optimal content "depth" has been achieved.

Once the structure is complete, we start to look at how we expect traffic to flow through the site. Flowcharting moves users across sections and funnels them to pages we want them to visit. We leverage content, calls-to-action, and "marketing" columns to suggest the next action users should take. Obvious trigger elements like submit buttons, add-to-cart links, and send-to-friend tabs fulfill on our preset metrics and ultimately prove the site's success. Finally, make sure you have a web analytics package in place to measure your decisions. Test and revise regularly to optimize your organization, naming and flow success.

Once your strategy is set, it's time to decide how your site navigation will be displayed. Typically this occurs in the wire framing stage where page layout is designed. There are many styles and types of navigation design. Whichever kind of navigation system you use, it should visually anchor the layout. Global navigation should live in the same spot on every page and be visually treated in a consistent manner.

There are some common layout types that a majority of websites use when it comes to designing navigation.

Top horizontal text. Probably the most common type of navigation is the horizontal text-based design. For top-level navigation, seven to eight single or paired section names fit well horizontally at the top of the page within standard resolution specifications. A common practice is to use HTML text styled with CSS or graphics to denote used and rest states and hover and active links. Everything lives at the top of the page so it doesn't get lost below the fold. Just make sure you don't get any horizontal scrolling by having too many section names.

Examples:

• UPS
• IBM
• Apple
• Starbucks
• Crate & Barrel
• Microsoft

Side vertical text. If your site has top-level and secondary navigation sections, you may want to consider vertical or stacked navigation on either side (right or left) of the layout. Because most sites have content below the fold, users have grown accustomed to scrolling up and down. This type of navigation dedicates a column for navigation and accommodates links that users have to scroll down to see. Just keep the most important sections at the top.

Examples:

• Nike 
• The New York Times 
• Sears 

Experimental navigation. If you're looking to break the rules of engagement, there are several examples of non-standard, experimental navigation. Just remember that navigation is still the way users are going to access information, so the discovery process should reinforce the experience you are trying to create.

Examples:

• Adidas
• Lucas Lindeman Rosinski
• Burger King 

Roll-over menus. If you want to get users deeper into your site you can add sub menus with deeper links and/or descriptions that appear when you roll over main navigation links. These can be used both horizontally and vertically and help users identify content that lives in the section and access specific information more quickly.

CSS vs. graphic navigation. With recent developments in CSS coding, designers can make HTML text look more like graphics. HTML text navigation can help with your search engine optimization, and it certainly makes sites easier to manage when adding or changing sections. Animated and interactive navigation can also be created using Flash, Flex, Silverlight, Javascript, and jQuery. Just continue to apply best practices and offer users without these technologies a secondary method for navigating the site.

Icon navigation. Many sites incorporate iconography to simplify the navigation process. Icons take up less room and provide navigation signage for sites that are space challenged, multilingual, or just looking for enhanced branding and personality. But be careful: Icons that make sense to internal team members may have different meaning among different users and multinational visitors. Icons executed correctly are consistent, obvious, and enhance the design of the site. One of the most important aspects of navigation, and interface design generally, lies in an understanding of graphic symbolism.

Above all, when planning your page navigation, get some more eyeballs on it. You may be too close to your own project. Have coworkers, colleagues, friends, family, etc., look at your site and give you their feedback. You may find some interesting trends that weren't expected.

Solutions to navigation can range from simple to complex. Finding a balance that works for your situation is usually the key in making your important site navigation decisions. Here is a summary list of things to keep in mind when trying to find this balance. Following these guidelines will help provide a convenient, stress-free user experience that conveys your site message and meets your business goals.

1. Use a global navigation system on all pages. As a rule, each page should provide a link to the main sections of the website, the homepage, a site map, search, and basic contact information. These links should anchor any well-designed site.

2. Be consistent. Treat all your navigation the same on every page. Navigation type, treatment, naming, and grouping should all be consistent.

3. Be obvious and expected. Naming of sections and pages should be clear and obvious. The type of content in each section should be expected. Give users an indication of where the next link will take them so they won't waste time clicking to information they didn't expect.

4. Funnel your navigation. Start with overviews or introductions of main sections. As users navigate deeper into the site, the content and navigation should get more detailed and specific.

5. No dead ends. Every page should lead somewhere. Don't drop users into dead-end pages. Keep visitors engaged by moving them forward in your site. Provide the shortest possible routes to information.

6. Segment users. Try to group your users into distinct personas. Once you have identified the different types of users visiting your site, you can better address their unique needs and expectations. Design items, naming, and callout content and links can be targeted individually and served more effectively to different types of visitors.

7. Use analytics to measure navigation effectiveness. Monitor user activity and popular site paths by adding an analytics package to your site. Google Analytics is free, so you have no excuses. Refine naming and grouping according to what's working and what's not.

8. Test and refine. Use A/B and multivariate testing on your navigation elements to see how you can improve engagement and conversion. You can experiment with individual design elements, content grouping, and section/page naming to determine what works best.

9. Keep it simple. Try to emulate existing navigation practices rather than create new ones. Be as simple as possible so that your users will have a clean, positive experience.

Dan Bucko is a senior art director at Geary Interactive.