Wayfinding within your Web site

February 26th, 2008 | Category: Content,Design,Heidi's Entries,Navigation,Tips and Tricks,Usability
written by: Heidi Cool

Door for a store in Cork, Ireland
Door for a store in Cork, Ireland

In Your home page is NOT your index; it's your store front, I discussed some of the goals of homepage design and navigation. Today we'll consider how users navigate within the site. As my friend and fellow developer Wayne Smallman correctly surmised—when commenting and following up on that entry, the pages inside your site are like the aisles or departments within a store. Each page needs to be identified so that users know both where they are and where they can go.

Port of Entry: Not everyone uses the front door.

In a real world store, visitors typically enter through one or two main doors then follow the signs or clues to the department they need. But in the online world, they may enter through the front door, crawl in a side window, shimmy down the chimney or teleport in via Google. Each page on your site is a potential entrance. In some cases, you may get less traffic through the front door than through other pages. For example, last month 58% of those who visited http://www.case.edu/visit/ entered through the main page. The other 42% entered the site through one of 44 other pages. Here on the Web Development Blog, visitors entered through 152 different pages—only 8.6% came in through the main page.

To serve these users we need not replicate the experience of the home page, but we can offer wayfinding tools that will help them and other users browse the site.

Where am I? Wayfinding signage and landmarks.

You are here map

If you've ever wandered around a department store, mall or national park, you've probably encountered the ubiquitous "You are here" sign. Whether you've walked past the same pond 5 times or just can't find your way out of "men's shoes," the "you are here" sign indicates where you are in relation to other areas. A Web site doesn't need something this obvious, but users do expect to find clues that will let them immediately determine where they are, whether they are in the right place and—if not—guidance to direct them towards their proper destination.

To determine location, users will rely on site "landmarks" and "signs" such as logos, images and headers. On sites here at Case Western Reserve University we include:

Wayfinding Examples
This screen shot from the
Provost's site shows you some of
our common wayfinding tools.
View enlarged image.

  • The university logo in the upper left corner—to let users know they are on one of a collection of Case sites. (On sites using the newer templates, users may click on this image to return to the Case home page).
  • The site title on the right side of the the banner indicates the name of the specific site. (On sites using the newer templates, users may click on this title to return to the home page of the site.)
  • Section headers appear at the top of the side navigation menu (on the advanced templates) to let users know which section of the site they are in.
  • Descriptive page headers at the top of the main content area let users know which page they are on and what the content will include.
  • A detailed footer includes the department or organization name, addresses and other contact information.
How do I get there from here? Navigational tools within the site.

If the user has determined that he/she isn't in the right place, menus and other navigational aids should be readily available to guide the user to a more relevant page within the site or to a different site with related material.

Here at Case our pages include menus and other aids such as:

  • Top navigation on the upper right of the page offers links to the Case home page, university directory pages and a university search page so that users may easily seek out other Case sites.
  • A primary menu appears on each page to let users navigate between sections (on large sites using the advanced templates) or between all pages (on smaller sites using the basic templates.)
  • A secondary menu appears on each page of large sites (using the advanced templates) to provide navigation to all pages within a section.*
  • Sites that have sections within sections may also incorporate tertiary menus near the top of the content area of pages within subsections.
  • A search box below the left hand menu allows users to search within the site for a particular topic or page.
  • The related sites box guides users to other sites (Case or external) that provide related content.

*Blogs, such as this site, will typically use topical categories/tags and date archives rather than the usual sectional navigation.

Wayfinding and navigation conclusions

Navigational and menuing systems vary. If you're the XYZ corporation your site may rely on searchable databases to display your enormous inventory of widgets. If you're a small non-profit with a lot of data you may have a site that is many levels deep and requires breadcrumbs in addition to, or instead of secondary or tertiary menus. The navigational tools you employ will often be determined by your content. As long as it works effectively, it doesn't matter which system you use. If you include some basic wayfinding tools to let users know where they are and how to proceed, you will improve the user experience increase the odds that they'll stay on the site now and/or come back in the future.

Navigation and Wayfinding Resources
Bookmark & Share:
  • Facebook
  • StumbleUpon
  • del.icio.us
  • Digg
  • LinkedIn
  • FriendFeed
  • MySpace
  • email

    Share on Google Buzz

14 Comments »
  1. I'm guessing you'll be stringing all of these articles into some kind of resource, once you've finished? Sound advice, as always...

    Comment by Wayne Smallman — February 27, 2008 @3:26 am

  2. On e-commerce sites i've found breadcrumbs and having a search box are crucial. The search box can also give you additional info about your visitors.

    Comment by PPC Bid Management — February 27, 2008 @4:19 am

  3. Thanks Wayne, yes I expect I will string them together in some manner. I'll have to see how the entries evolve and where the topics cluster. PPC, When it comes to e-commerce you're absolutely right about the breadcrumbs. When I shop online I'm invariably wandering back and forth along the breadcrumb trails. I think most sites with a large database can benefit from that type of functionality.

    Comment by Heidi Cool — February 27, 2008 @11:52 am

  4. Wayne's a super nice guy, I barely know him, but he's already been helpful on a few different things. That's really cool to know he's got more ties into the Higher Education community.

    And Heidi it's great to have you in the BlogHighEd community, welcome! From what I've read of your blog, and including this awesome post, it looks like you have some great stuff to share and I'll happily listen... r... read. :)

    Comment by Kyle James — February 27, 2008 @4:38 pm

  5. I just might have to rework my blog a bit...

    Comment by Max Pollack — March 2, 2008 @3:20 pm

  6. I will definitely have to rework my site too :)

    Comment by tennis — March 8, 2008 @11:10 am

  7. Great article! Very informative! Loved the front door metaphor.

    Comment by Adrian | Rubiqube — March 13, 2008 @3:20 pm

  8. Breadcrumbs can be a very useful system - always great on ecommerce websites.

    Comment by Website Submission — March 14, 2008 @5:24 am

  9. Terrific stuff. I know I personally have often overlooked the fact that people can come in through the side entrances of a website and then get lost because there's no clear indicator where they are or how to get to a "main" area of the site. Maybe this might help too: Google Analytics when installed can give you detailed insight into entry/exit pages on your website as well as navigation paths and keywords that drove visitors to a particular page. If you see a bounce rate for a particular page is abnormally high (70%+) you might want to check your nav elements on that page to see if people aren't just getting stuck and leaving on the page.

    Comment by Michael Dela Cruz — March 17, 2008 @5:08 pm

  10. This is all very true, and many people completely miss it. Blogs however deviate from this 'storefront' concept in that they are almost completely data driven. I try to keep my data tagged with multi tiered categories to make finding stuff easy.

    Comment by neuman — March 18, 2008 @7:06 pm

  11. Thanks Kyle! Wayne is a great guy, he's also super-productive. I don't know how he manages to write as often as he does, but he's always insightful. Michael you bring up some very good points re: analytics. If you find a high bounce rate it could be that users don't know where to go next. It could also be that users just landed on the wrong site. To differentiate I'd look at the search terms they are using to get there and if those are terms that are part of your SEO strategy for the page. Perhaps those words can be used in multiple contexts. If so is there a way to be more precise? For example I get a lot of visitors who search on "voice" "tone" and "Writing" or combinations thereof. Many of them are looking for my writing articles, so they stay and read. But some I think may be looking for information on music, so they leave. That's where it helps to be as topically specific as practical in your headers and such, because while we want traffic, its not just about numbers but about bring in the people who care about your content. Neuman, you're absolutely right about blogs being different. The ability to sort by tag is a great help. I like how you've used your categories in the menu on your new blog. How do you like the switch from MT to WordPress so far?

    Comment by Heidi Cool — March 19, 2008 @8:37 pm

  12. Also, by creating internal navigation, you are helping to spread your page's page rank to all of the deeper pages in your site.

    Comment by Link Building Bible — March 30, 2008 @4:18 am

  13. I believe site navigation is the most overlooked aspect on most sites, i have seen some sites where i can not find the shopping cart, or can't get back to the main page and most of the time i just leave the site

    Comment by koozies — April 2, 2008 @12:24 pm

  14. Simple navigation and clean structure is key. as webmaster of several websites, I've found that most times the simpler the better, most times we want to over do things and impress other people but mainly we should consider who will be looking at your website, is it another webmaster? or a not very techy person?

    Comment by business cash advance — April 21, 2008 @3:39 pm

Leave a comment

RSS feed for comments on this post. | TrackBack URL