Finding Your Way Through the Maze
Imagine you are 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 3 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.
Finding Your Way Around a Website
Websites are very similar- no matter what their ultimate goal is, your 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 are 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!
Start with a Site Architecture
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.
Example Site Architecture Home
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 will 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 will 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 subnavigation are the links that appear as we "get closer" to our destination.
These links may appear as:
a) A new column of links indented directly under the main page link
b) A new column of links in a new page element, such as a colored bar next to the primary navigation links
c) The central page content, with short descriptions or images to accompany each link
The deeper your site is, the more likely it is that you will have several layers of subnavigation. As long as users feel confident they are headed in the right direction, they will 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. Example:
Home > Subject > Category > 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 home page.
Body Text Navigation
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.
Navigation Do's and Don'ts
Don't Open Pages in New Windows
This is confusing to users and it breaks their "back" button. They end up with a bunch of windows open and often close them all in frustration.
Don't Move Page Elements from Page to Page
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 that may seem "boring" or hampering creativity, remember a website has to be functional first and foremost or no one will appreciate your creativity.
Don't Try to Put Every Link on Every Page
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 2 pages is confusing and simply more information than the visitor needs. Create a logical organization of pages using subnavigation and add a sitemap to help users quickly find the page they need.
Use "Coolness" Sparingly
Do Use Color to Identify Links
Use CSS to add a hover color 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 color 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 color plain text the same color 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!
Do Use Alt Text on Image Links
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) identify what the page is about.
Consistentcy, Consistency, Consistency
Above all, be consistent! However you decide to organize your navigation, don't make visitors relearn 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.
Discuss this article in the Small Business Ideas forum.
June 3, 2005
Scottie Claiborne is the facilitator of the Successful Sites Newsletter. She is a speaker at the Search Engine Strategies conferences and the High Rankings Seminars as well as the administrator of the High Rankings Forum.
Copyright © 1998 - 2013 K. Clough, Inc. All Rights Reserved. Privacy