Site Navitagion

Navigation should make sense!

Far too often, web sites use poorly thought out, confusing navigation methods. Often this is the result of the site designer deciding they wanted to be "Trendy", "Artistic", or "Elite" - unfortunately, the actual result of this is that they end up chasing away users, who can't be bothered figuring out, waiting through, or otherwise dealing with the headaches that are induced by attempting to navigate the site in question. Some excellent examples of these problems can be found at Vincent Flanders' Web Pages That Suck site, which goes into great detail about them in the sections on Navigation.

Fixing this problem is simple - your navigation should follow a few short rules, and breaking those rules generally means that users will have difficulty with your site.

• The user must be able to navigate your site with all Javascript, Flash, and other plug-ins turned OFF.
• The user should always be able to tell where they are going just by looking at the link.
• Only use "Back", "Next", and "Previous" in places where they actually make sense.
• Links that are Images of text should always have the text in the image as their alternate text.
• Never confuse your audience about what is an isn't a link.

The user must be able to navigate your site with all Javascript, Flash, and other plug-ins turned OFF.

Sites that rely on scripted components to move the user from one page to another will be inaccessible to search engines and visually disabled users, as well as running the risk that some browser will not function properly with your code. All that is required is the wrong version of a plug-in, or a browser that interprets javascript slightly differently from yours, and your entire navigation system can fall apart.

Sometimes this can be due to old plug-ins or browsers, but also sometimes due to newer versions than yours. Javascript that worked perfectly fine in Internet Explorer 5.5 may crash and be completely useless in Internet Explorer 7 and 8. HTML links using the <a href=""> tag will work perfectly fine in all of them.

This does not mean that you can never use Javascript, Java, Flash, or any other plug-in, it just means that in cases where those things are unavailable, there should still be some way for the user to reach other pages in your site. For example, in the class website, disabling Javascript kills the drop-down menu at the top of the page, but a regular, non-Javascript set of links are still available at the bottom of each page, ensuring that the user can still get around without it.

The user should always be able to tell where they are going just by looking at the link.

All links should contain some kind of text (or in some rare cases an image), which the user clicks on in order to reach the page that is being linked to. That text should always make sense and let the user know what the page at the other end of the link is about. Linking to a page about rabbits with link text like Mechanical Combustion would make no sense! There are several sorts of things you should avoid as your "link text" when linking to another page:

• Blank Images - seriously, if the user can't even tell for certain that it's a link, why would they bother clicking on it?
• Obscure Icons - unless an iconic representation of a topic us TOTALLY universal, meaning that not only you and your immediate circle of friends, but also people who have never met you, who live in another country, or who don't even like your topic of choice can still easily recognize them, then it doesn't provide any actual information about the destination.
• Blank Images or Obscure Icons that change into Text with mouseovers - these are not only obscure, they're also annoying to the user. Requiring that the user go to the effort of moving the mouse around to where they think you might have a link, and only then telling them where it actually goes is just plain rude.
• Back, Next, and Previous - Except in some very rare situations, you should NEVER use these words or back/forward pointing arrows as links. This is so important that it will be discussed more as the topic of the next section.

Only use "Back", "Next", and "Previous" in places where they actually make sense.

In any page with a loosely connected set of topics, even one like this website, using the link text "Back", "Next", or "Previous" is not appropriate. Similarly, left and right pointing arrows representing the concepts of "Back", "Next" and "Previous" are also not appropriate. The reason for this is simple - if the site does not have a definite flow such as the chapters in a story, then there is no next page. For example, look at the list of topics in this Demonstration Exercise, which lists the pages in a site about a country. Get out a piece of paper, and write them down in the "Logical Order" that you feel they should be presented in, if the user is going to go from one page to the "Next", using only "Next/Previous" links. Now, without showing anyone your list, have a friend do the same. Then, have someone else do it. You'll find that any large group will have multiple possible orders to list the words in, and there will be no real consensus on whether "Food" should be followed by "Music" or "History", or "Art" - that means that a link labelled "Next" or "Previous" on any of those pages would be meaningless! Such a site should employ a menu, giving the user a selection of topics to choose from, rather than forcing them to go from one topic to another in only your pre-determined selection of order. Similarly, pages about groups of people where each person has a page, informational pages about some topic would not work with "Next/Previous" links. Go look at Microsoft, Wikipedia, or even the City of Windsor's websites - they NEVER use "Next" to go from one topic to another.

On the other hand, occasionally it is appropriate to use "Next/Previous" links. In a page that contains a long story which is spread over multiple pages, a "Next" and "Previous" link would have obvious meaning to the user, that the link would take them to the "Next" or "Previous" chapter or page in the story. On e-bay, Google, and many other sites that provide the user with enumerated listings of items such as search results or sale items, the "next" and "previous" links (often replaced with left and right pointing arrows) inform the user that they can go to the next page listing the items, and even then, context is provided. If you do a google search for "Windsor", over 60 million page results come back - at the top of the page, you are informed that you are currently looking at results 1 - 10 of about 63,600,000 for Windsor, and at the bottom, you are given links which will allow you to navigate the large quantity of results. In that case, the "Next" link means that you will be looking at the "Next" 10 results, or results 11 - 20.

Links that are Images of text should always have the text in the image as their alternate text.

The alt= attribute on the <img> tag is supposed to represent an ALTernative to the image itself, if it is not possible to display it. This means that any time you have an image which is a picture of text, the alt= attribute on that image should be exactly and only the text in that image. Otherwise, if your image does not load, or if the user is using a browser that does not display images, they will not get the proper meaning of the link text. If your link image says "Movies", your alternate text should also say "Movies", not "MovieLink", or "mov.jpg", or "Link Image", as those would be either inappropriate, or completely meaningless to the user.

Never confuse your audience about what is an isn't a link.

• On the internet, users have been conditioned by the browser to accept that anything that is underlined must be a link, and that if they click on it, it will take them to another page. That being the case, you should never underline text that is not a link in a web page.
• If you've changed the style of your links so that some other indicator of "link-ness" is used in your page, stick with that method through your whole site. Once the user has become accustomed to your method of indicating links, changing it on them will cause them to either not realise that the new link is really a link, or just frustrate them because your site is not following any sort of easy to understand pattern.
• Don't hide your links! Making your links look exactly the same as your normal text in a stylesheet oriented towards printouts is acceptable, but when viewing the page in a web browser, the user should not have to guess where the links in your paragraph are - if you put them there, you want the user to be able to find them!