Making navigation user-friendly
Published: 02 Jul 2003 15:29 BST
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.
Search boxes
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 email 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 email 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.
Best practices
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.
For a weekly round-up of the enterprise IT news, sign up for the Tech Update newsletter.
Let the editors know what you think in the Mailroom.









