BECOME A SCRUM MASTER WITH OUR NEW AGILE PM 1-DAY COURSEBook now

Finding your way through the maze

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.

Finding your way around a website

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!

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

  1. Home
    1. Widgets
      1. Widget A
        1. Widget A Basic
        2. Widget A Plus
        3. Widget A Deluxe
      2. Widget B
        1. Widget B Blue
        2. Widget B Green
        3. Widget B Purple
      3. Etc.
    2. Widget Services
      1. Widget Installation
        1. Assisted Widget Installation
        2. Full Widget Installation
        3. Remote Widget Installation
        4. FAQs about Widget Installation
    3. Widget Support
      1. Paid Options
        1. Monthly Fee
        2. Per Incident Fee
        3. Hourly Fee
      2. Free Options
        1. Support Overview
    4. Widget Specials
      1. Buy 3 Widgets get Free Installation
      2. Free support for 3 months on Blue Widgets
      3. 25% off the Widget Installer Software
    5. Widget Resources
      1. Widget Tips
        1. Selecting the Widget That's Right for You
        2. Repairing Widgets
      2. Widget FAQs
      3. Widget Owner's Manuals
    6. About Widgets4U
      1. General Info
        1. Press Releases
        2. Testimonials
        3. Industry Awards and Recognition
    7. Contact Widgets4U
      1. General Info
        1. Media Info
        2. Investor Info
        3. Support Info
    8. Support
      1. Forum
      2. Phone options
      3. Live Help
      4. E-mail
      5. Unofficial Widget Help Sites
    9. Privacy Policy
    10. Shipping Info
    11. Site map

Primary navigation

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!

Housekeeping links

You may want to separate sales or info items from ‘housekeeping’ links. Housekeeping links are the things people want to be able to find from any page but they don't need to be prominently featured in the design. Often links such as privacy policy, site map, shipping info, login, FAQs and contact us appear in a smaller font in the header or footer of the page while your ‘business’ links are featured down the left or right side of the page or across the top.

Ordering links

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

Secondary navigation or sub-navigation are the links that appear as we get closer to our destination.

These links may appear as:

  1. A new column of links indented directly under the main page link
  2. A new column of links in a new page element, such as a coloured bar next to the primary navigation links
  3. 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 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

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:

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 homepage.

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 disables their back button. They end up with a bunch of windows open and may 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 this 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 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 ‘coolness’ sparingly

Flash, DHTML and JavaScript fly out menus seem to solve the problem of deep navigation by displaying additional links when moused over, but usually aren't needed. If you love them and must have them, be sure to put plain text navigation links in the footer of the page for search engine spiders and users who don't have JavaScript turned on or Flash installed.

Do use colour to identify links

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!

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) to identify what the page is about.

Consistency, consistency, consistency

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.

Case studies

Our success stories

  • UCAS

    UCAS's Track portal is award-winning, achieving a 95%+ satisfaction rating across its 750,000 users

  • Hotels.com

    Hotels.com gained a much stronger competitive advantage due to a great mobile & tablet strategy

  • Pearson Education

    Pearson Education has embedded user-centred design into all their digital design processes

More case studies

Training academy

  • User experience

    Join up your customer touchpoints to deliver the best possible digital experience that is proven to deliver outstanding business results

  • Website optimisation

    Ensure your brand promises are delivered through your digital channels so that your customers return and bring others with them

  • Online copywriting

    Make sure all your customer touchpoints consistently deliver the very best in user experience, design and usability.

  • Web development

    Increase conversion across all your digital channels. Our clients sell more because they reap the benefits of our sales optimisation expertise.

  • Online marketing

    Get ahead of the competition with a customer-centered digital strategy designed to deliver long-term business success.

About us

We're a user experience agency (UX agency) that creates people-centred, efficient and delightful digital experiences.

Get in touch on 020 7423 6320

 

Skip to site navigation