Iowa LTAP has moved from CTRE to the Institute for Transportation
Helping users navigate your site
This is the fourth article in a series about web site development for local transportation agencies. The first three articles covered planning a web site, acquiring the tools for creating it, and choosing and organizing content.
Choosing and organizing content for a web site is a big job. To make sure the visitors to your site appreciate what a great job you've done, you need to label things clearly and well, and provide an easy way for visitors to navigate your pages.
What are good labels?
- Labels are the names you give to sections of your site
and to links within it. See the City of Des Moines web page
below. Clicking on the "City Clerk's Office" button,
an example of a link label, will take you to a page with
the same label. Labels are part of a whole labeling system
that should be consistent throughout your site.
- Good labels are specific and descriptive from the perspective of the site's users. "Employment Opportunities" and "Breaking News!" are specific, descriptive labels that visitors to your site would readily understand. "Engineering Division" may be meaningful to people in your agency, but it doesn't tell outsiders much. Would that link allow users to contact the engineering division or learn more about what the engineering division does?
One great thing about the World Wide Web is how much we can learn (and borrow) from other sites' strengths and weaknesses. One metropolitan public works department has developed a well organized site chock-full of helpful content for the public. Labels, however, are not this site's strongest feature.
One problem is the label "Index" on the department's main page. The label sets up specific web user expectations-mainly that the index is an alphabetical listing of main topics or ideas within the department's web site.
But this index doesn't fit a user's expectations because it is neither alphabetical nor a consistent listing of main topics. At the time of this writing, the index looked like this:
Services at a Glance
_______ Road EIS Executive Summary
Snow Emergency Info
Other Public Works
_______ Bridge Opening
If the list were alphabetical, two related ideas such as "Street Closings" and "Street Construction" would be next to each other in the list.
As to the link labels themselves, some are specific and descriptive, giving users a clear idea of where the link will take them. "Snow Emergency Info" and "Director's Greeting" are two examples.
Other labels are more ambiguous. "_____ Bridge Opening" sounds like a news item. Will the general public know what "_____ Road EIS Executive Summary" is? "Other Public Works" is also unclear; the link takes you to a list of national organization's web sites rather than nearby cities' public works departments, as users might guess. Ambiguous labels can generate confusion, which doesn't help create a positive impression about a site.
Even when you think your labels make perfect sense and can't be misunderstood, it may help to get some feedback on them, especially from people outside your agency.
A user dealing with ambiguous labels will also have problems navigating the site. Effective labeling systems work together with navigation systems to help users develop a mental map of a site so they can find the information they're seeking.
A popular and useful method of helping users get around a site is a navigation bar. A navigation bar is a set of related labels that presents the basic information hierarchy of a site. Using navigation bars consistently throughout your pages helps users understand where they are and where they can go from there.
The City of Des Moines's web site (http://www.ci.des-moines.ia.us/) uses graphic and textual navigation bars to show users the main categories of information that can be linked from a given page. For example, clicking "Mayor and Council" on the home page will take you to a page with a photo of the mayor and city council and another navigation bar with links such as "Leave a Message," "Meeting Agendas/Info," and "Request to Speak."
The navigation bar on the "Mayor and Council" page is a completely new set of links. Each link in this bar is the same color as the "Mayor and Council" button on the home page. This color consistency is a subtle hint to users that all the links with the same color are related.
The graphic navigation bars are repeated as simple text links at the bottom of each page. This kind of redundant navigation system is helpful for a couple of reasons: 1) users who have graphics turned off in their browsers can still get around the site, and 2) visually impaired users who have screen readers to read aloud the contents of a web page also have full access to the site.
No matter who designs your site-someone in-house or an outside professional-your inside knowledge and input about the consistency, and especially the specificity, of labels and navigation systems will make all the difference to the user friendliness of your site.
The next article in this series will discuss web site design. Copyright © 1999, Center for Transportation Research and Education, Iowa State University. All rights reserved.