Navigation is only one segment of a Web site’s information architecture, but it is the most visible segment to the end user. Fortunately, the internal structure of your Web development team doesn’t have to be apparent to the end user. For instance, marketing may maintain most of the site, but human resources maintains the job section, and investor relations has outsourced the corporate finance portion of the Web site to an external vendor. If your site shares a navigation strategy, single sign-on, global style sheets, and a universal search engine, these differences will be much less apparent to the user.
But even though many companies have cleaned up their external Web site to present a unified face for each product brand, department, and country, most intranets and Web applications aren’t nearly as far down the path toward unified information architecture. Unifying all your Web applications under one interface can be extremely difficult. Creating a common user interface and unifying all your user logins and passwords with a central directory server or single sign-on solution is a painful application integration task, especially with legacy, externally hosted (ASP), or third-party software.
When you develop a navigation strategy for your Web site, you should consider some common design elements. Most of these have become patterns of one kind or another: Web designers saw other sites use them and then copied the basic idea to their own sites. To provide some insight into navigation best practices, we’re going to discuss the following elements and analyze which ones work and which ones don’t:
- Navigation bars (such as Amazon.com)
- Drop-down hover navigation (such as PG.com)
- Search boxes (such as Yahoo.com)
- Short, persistent URLs (such as Salon.com)
Navigation bars are the most prevalent form of navigation. These are usually found on the top, left-hand side, or bottom of the page. Your users will expect some of the navigation bars to stay constant throughout your page, usually at the top or bottom. More navigation bars should be added as the user goes deeper into the site. Each level could have a navigation scheme of three or four levels. Any further than that, and you may start chewing into the available space for content, especially with sites that serve banner ads. Most users will also expect to find certain global navigation elements at the top or the bottom of the page (or both), such as Search, Site Map, Contact, Help, and Login/Logout.
You can take two approaches to creating navigation bars: with images or text. Images were more popular before most browsers supported Dynamic HTML (DHTML) and Cascading Style Sheets (CSS), because it was easy to change out the image when the mouse pointer rolled over it, to give the end user visual feedback. Text is faster to load and easier to generate from your site’s structure, and you can copy the “roll over color change” effect with DHTML. Use text for your navigation, and you won’t have to worry about finding a Web designer at the last minute to create a graphic image for your navigation bars.
Drop-down hover navigation
Drop-down hover navigation is where one layer of navigation reveals a submenu of navigation options when the mouse rolls over, and the user can then move down the menu to find the option being sought. The advantage here is that the user can move two levels of navigation with only one page reload, so the user experience is faster. Unfortunately, this can take some mouse dexterity to do properly, especially if moving the mouse off the drop-down menu makes it go away.
In my opinion, this style is more trouble than it’s worth. If the submenus drop down vertically, the next page will devote a large amount of navigation space to the menu, the submenu will have a completely different orientation, or the user just won’t get the navigation submenu at all. Clicking the top-level navigation element should take the user to a page that displays the submenu along with some content that explains the options.
If you use drop-down hover navigation, which I don’t recommend, make sure that it is consistent across your entire application. Nothing will be more confusing than finding this style in some parts of the site and regular navigation bars on other parts. Also, make the drop-down sticky, so it stays visible as the user goes deeper into the site. When the user moves the mouse pointer over options in the submenu, highlight each one.
One useful feature for all but the smallest Web sites is a search element. This element should be able to search through all of the accessible content. The results should be restricted, so that any content the user doesn’t have privileges for is suppressed. Details on the architecture and design needed to add search engine functionality to your Web site could easily fill a book, so we aren’t going to be able to cover it in this article. But we can touch on placing the search element where users can find it. The most common place for a search box on a normal page with content is the upper-left or upper-right part of a page.
Although you can also add a search link to a navigation bar, the search box is better. It’s more convenient for users to type in what they want on the first page they see. Make sure the search box stands out from the rest of the site, so users can easily find it.
Short, persistent URLs
Your users will e-mail URLs, save bookmarks in the browser, or write them down on paper. So if you make the URLs short, you can save your users a few headaches. Some e-mail clients will wrap the URL at 80 characters, which means that when users click on it, they don’t get the page they wanted. Short URLs aren’t as important as the other navigation elements we’ve talked about, but they make your site that much more user-friendly.
If your Web site is migrating from one content management application to another, all your old links could break. It’s probably easier to create a mapping for your old URLs to the new content than to force your new content management system to emulate the old one. You don’t want to break your users’ bookmarks and links on other sites that point to your content.
One way to create new URLs for a Web site with a complicated content management back end is to use mod_rewrite with the Apache HTTP Server. Get the guide to mod_rewrite to learn more.
You can do a number of things to provide your users with a consistent navigation theme for your site. First, try to emulate existing navigation schemes rather than create new ones with Flash. Also, be as simple as possible so that your users will have less frustration and shorter download times. And finally, use short URLs that aren’t tied to a content management system so that you can switch it out later without breaking existing links and bookmarks. Following these few simple guidelines can take you a long way toward providing a convenient, stress-free user experience that conveys the site’s message.