Imagine you're visiting a friend in the hospital. Most regional health facilities these days are enormous, made up of many separate buildings joined by hallways and tunnels. Some elevators go to patient floors, others only go to offices, while others lead to staff areas. It's very complex, and yet people must be able to find their way around intuitively and quickly. How do the institutions solve this problem?
Consistent signage. No matter where you go in a hospital, there are signs at every corner identifying the major locations. It's easy to find your way around by checking the signs as you walk along. Cafeteria, gift shop, patient floors, emergency, main entrance and other key landmarks appear with corresponding arrows to direct you, no matter where you are in the complex. As you pass through specific areas, more signs appear under the main ones - Radiology, In-Patient Waiting Room, Human Resources etc.
Despite having to walk through three buildings, cross a mezzanine, and take countless turns, you can easily find the cafeteria, then return to your original location. You might not be able to visualize it or plot it on a map, but you don't need to. You just need to trust the signs to get you there.
Websites are very similar - no matter what their ultimate goal is, your site visitors need to intuitively find their way around. Like the consistent signs in a large building, your primary navigation links help visitors find the general area that they're interested in. Similar to the smaller department signs in a large facility, secondary links define the path to specific pages. Too often, general website navigation disappears or changes on internal pages. It's very similar to going down a hallway and seeing the sign for where you want to go, but suddenly the main entrance, cafeteria, and emergency signs are gone. You wonder if you'll be able to find your way back!
When planning your site or your site redesign, think about the structure first. It sometimes helps to physically map out the pages: using index cards, write a page topic on each card and group them together, laying them out on a table or on the floor or pinning them to a bulletin board. If you prefer a linear approach, simply make a numbered outline with the title of each page and again, group them together. This is your site architecture - your blueprint for the foundation of your site.
The bold headings are the main navigation links and will appear on every page. When designing your site, build these links into the design of the page so that they'll appear consistently on every page in the same place. Leave room for future expansion as needed!
Place your links in order of importance - think about how users progress through the site. They'll scan the navigation links from left to right or top to bottom until they find what they are looking for. Put the links you want them to see first in the list. Keep them in that order on every page.
Secondary navigation or sub-navigation are the links that appear as we get closer to our destination.
These links may appear as:
The deeper your site is, the more likely it is that you will have several layers of sub-navigation. As long as users feel confident they're headed in the right direction, they'll continue to progress through the site, but try to minimize the number of clicks it takes to get to the relevant information whenever possible.
Breadcrumb trails are links (usually in a small font and placed directly below the page header) that show where the user is in relationship to the home page. For example:
> > > This Page
Breadcrumbs give the user a quick way to jump to a higher level in the site. This is particularly useful for sites with deep structures but can be helpful on any site. If a visitor lands on a page from a search engine query, they can easily find similar pages without having to start over at the homepage.
Make it easy for visitors to find the depth of information you have available! Review each page of your site to see where it makes sense to link the text in the copy of the page to a related page for more info.
We may want to link directly to a featured special from the home page, and we definitely want to link to Widget Installation and specific Widget Resource pages from our widget product pages, in case visitors want more info.
This is confusing to users and disables their back button. They end up with a bunch of windows open and may close them all in frustration.
Once a user has learned where the main links are on the page, don't make them look for them by changing their order, moving them all to the footer on some pages, or eliminating them entirely from others. While this may seem boring or hampering creativity, remember a website has to be functional first and foremost or no one will appreciate your creativity.
Unless the site is relatively small, don't try to link to every page from every page. A footer full of lists of links or a side navigation bar that scrolls for two pages is confusing and simply more information than the visitor needs. Create a logical organisation of pages using sub-navigation and add a site map to help users quickly find the page they need.
Use CSS to add a hover colour to links so that users can see what they are about to click. Your links don't have to be underlined, but do make them a different colour so that they stand out from surrounding body text. Don't expect visitors to mouse over every word on the page to discover if it is a link or not!
Similarly, don't colour plain text the same colour as your links. Your poor visitors will click and click on that text. If your links are red, don't emphasize sales text with red as well!
If you use images as your navigation links, be sure to add descriptive text to the alt attribute - typically the words you would have used if it were a text link. This will allow visitors who can't see the images to still be able use your site and help search engine spiders (including your own site search functions) to identify what the page is about.
Above all, be consistent! However you decide to organize your navigation, don't make visitors re-learn it from one section of the site to the next. Once they find their way around, they want to be able to navigate the site without thinking too much about it.
Good site architecture is the foundation of your site - take some time to think it through and test it with real users to make sure your foundation is stable and strong.
This article was written by Scottie Claiborne. Scottie is the owner of Right Click Web Services, a firm specializing in usability, search engine optimisation, and Internet marketing.
Sign up to our monthly newsletter and keep up-to-date with what's new in UX and digital