Wait, how did I get here?

Alice Toth, Thursday, April 5, 2007 @ 2:56 pm

The importance of navigation is a given when designing a site. Design it poorly and it’ll have the same effect as having no navigation, i.e., leaving your users lost and confused and rendering your site useless. Taking the time to create a well-designed, well thought-out navigation is worthwhile because good navigation is a critical component in convincing a user to come back to your site. After all, if the user feels they’ve done nothing but encounter obstacles and roadblocks while attempting to attain their goal, where is their motivation to return?

Hey! you protest. I’ve already clearly defined the Global and Local navigation and the taxonomy is spot on. What’s next? O.k., here are two other ideas that can be brought into play to assist the user in getting around your site.

You Are Here. It used to be a standard navigational guide to unlink and visually highlight the navigational element for a section when the user was on the main page for that section.  The majority of large sites, however, now use one global navigation template for ease in maintaining their code. And more often than not, most teams can’t or won’t take the time to build in multiple if/then statements to change the look of the navigational element based on context. But it’s so worth it. Highlighting and unlinking a global navigation item when the user’s on that page comes with two benefits: it gives the user the visual recognition of their present place, and prevents them from clicking a link that sends them to the page they’re already on.

Differentiate Your Links. Not all links are created equal. Some go to other pages, some expand areas on a page, some download documents, etc., etc. So if these links all behave differently, shouldn’t they be displayed differently as well? Handle off-site links by letting the user know they’re leaving your site (see the external  links section on any wikipedia page for an example). Or consider changing the cursor from a hand to a pointer when a link is no longer active (sometimes you don’t want a link to be active in the hover state, e.g., when the link is used to display a dropdown menu on mouseover and not to link to another page). Combining CSS with your creativity, itemize the various types of links you have on your site and come up with ways to differentiate their visual display to clue the user in to to the link's behavior *before* they click on it.

Navigation, in all of its forms, is key to giving the user a good experience. If they’re lost and confused, chances are you’ve lost them as a site visitor. Keep them happy, and they just might visit again and again and again.

Related posts:

1. The Buck Stops Here
2. Clickless Pagination – Slashdot’s Bottomless Cup of Content
3. Oops! Our Bad.
4. Luke W on Web Form Design Best Practices: no need to wait for the book
5. Ajax and Design

Comments (0)

User Experience Design

Comments

• Leave a comment
• Comment feed for this post
• TrackBack URL

None so far.

Leave a comment