Be Consistant

Create a Sense of Order

People process, learn and remember organized information better than unorganized information:

Capitalize on prior learning

By employing standard functions and forms. Exploit known conventions such as:

• menus, lists, indexes
• blue, underlined text
• rectangular buttons with text labels
• rollover highlights
• keyword searching as the default

Get familiar with the conventions that your users are familiar with and use them. The 'index tab' navigation bar, for example, builds on user's real-world familiarity with using filing cabinets and card indexes:

For a good example see: ZoneZero Ð from Analogue to Digital Photography

If they are familiar with certain conventions, don't use those elements to mean something else or your users will end up feeling like Alice in Lewis Carroll's 'Through the Looking Glass'...

I don't know what you mean by 'glory,'" Alice said. Humpty Dumpty smiled contemptuously. "Of course you don't -- till I tell you. I meant 'there's a nice knock-down argument for you!'" "But 'glory' doesn't mean 'a nice knock-down argument,'" Alice objected. "When I use a word," Humpty Dumpty said in rather a scornful tone, "it means just what I choose it to mean--neither more nor less." "The question is," said Alice, "whether you can make words mean so many different things." "The question is," said Humpty Dumpty, " which is to be master -- that's all.

It's the predictable underlying structure of books that makes a complex organization scheme almost invisible to most readers, allowing the content to dominate the reader's attention. .... If your reader is to understand the provenance of a document and how the information on the page relates to the rest of the Web site, you've got to provide that information for them on every page of the site. Pages in a well-designed site should share a consistent, predictable design structure, a "blueprint" or design grid that fixes the terminology and location of landmark navigation and editorial links.
Patrick Lynch, 'Visual Logic: Ten fundamentals of Web design'

Interface components should appear in standard locations throughout the site.

Global navigation features should be consistent both in labeling, design and positioning throughout the site. If users know what to expect, it will be easier for them to build a conceptual map of what should happen next.

That page-side navigation bar seems almost a Web cliche. Yet it works well precisely because it's so common; newcomers to the site will feel reasonably at ease. Since it will be loaded onto every page in a site, it can show a series of small images which users' browsers will need to download only once. Proper use of these images can also tell viewers which part of the site they're actually in. The navigation bar may even provide a decent use for the far-too-common Netscape frames device: you can create a single borderless frame to the left of the page whose elements stay in position as you scroll down the page. Done well, a navigation bar can give viewers the same sense of location that we get from a book simply by glancing at how many pages we've read. In that sense, the navigation bar is no more a cliche than the title page of a book, a device which evolved only slowly over the century after Europe took up the printing press.
Adam Baker, 'Pliant response for websites'

Provide Context

In designing complex web sites, it is particularly important to provide context within the greater whole -- a 'you are here' statement. Many contextual clues in the physical world do not exist on the Web. There are no natural landmarks and no north and south. Unlike physical travel, hypertextual navigation allows users to be transported right into the middle of a large unfamiliar web site. Links from remote web pages and search engine result pages allow users to completely bypass the front door or main page of the web site. To further complicate matters, people often print web pages to read later or to pass along to a colleague, resulting in even more loss of context.
Adam Baker, 'Pliant response for websites'

Do the same as everybody else: if most big websites do something in a certain way, then follow along since users will expect things to work the same on your site. Remember Jakob's Law of the Web User Experience: users spend most of their time on other sites, so that's where they form their expectations for how the Web works.
Jakob Nielsen, 'Ten Good Deeds in Web Design'

All pages should include the organization's or site's name and or logo.

This might be done as part of the title or header of the page. As a user moves through the levels of a site, it should be clear that they are still within that site (see also 'Breadcrumbs' below). Carrying the graphic identity throughout the site supports such context and consistency. In addition, if a user bypasses the frontpage and directly accesses a subsidiary page of the site, it should be easy for them to work out what site they are viewing.

• The following items should be present on every page of a site to aid in orientation:
  • the title
  • the author
  • the author's institutional affiliations
  • the revision date
  • a link to the local home page

Use 'Breadcrumbs'

to show the structure of your site's hierarchy, and indicate where each specific page dwells within that hierarchy. Yahoo, for example has been using 'breadcrumbing' for years, allowing users to easily jump back to a more general level of the subject hierarchy.

...the navigation system should present the structure of the information hierarchy in a clear and consistent manner and indicate the location within that hierarchy.
Adam Baker, 'Pliant response for websites'

also see Keith Instone, 'Location, Path and Attribute Breadcrumbs' (pdf)

Use global navigation

Ensure that the same top-level navigational possibilities are available throughout the site. This is as simple as a nav bar situated in the same place on every page to give access to top-level categories of information (e.g Home/Contact/Services/Products/News). Use supplemental nav bars to access information inside these top-level catagories.

Don't use graphics-only navigation bars

There are very few images that all people instantly 'get' without thinking about. Supplement graphics with clear text labels. Ue the ALT tag (or a small text nav bar in addition to your spiffy graphical one) so that users with their graphics turned off will be able to navigate.

Provide micro-content

Labels are used to

• identify pages, sections within pages, and chunks of information within sections of a web document.
• identify functions the user can perform: 'Search' 'Download Software' 'Print'
• They can be textual or graphical (icons), or both.

LabelsÑ"microcontent" in the argot of the information architectÑ are a linchpin in both navigation and searching/browsing systems. To be effective as part of these systems, a label must be meaningful to all users. It must be logical, and it must be used consistently throughout the site. Rosenfeld identifies four ways to "strengthen your labeling scheme":

Strive for consistency.

Strive for relationships between labels.

Use existing schemes where possible.

Avoid general or heterogeneous subject areas.

Jakob Nielsen offers his take on labels in "Microcontent: How to Write Headlines, Page Titles, and Subject Lines." In this "Alertbox" article, Nielsen points out that online headings differ from print headings in two ways:

Online heads are often displayed out of context, e.g., in link and bookmark lists. [I'm assuming he means the contents of the <TITLE> tag.] Even when a headline is displayed together with related content, the difficulty of reading online and the reduced amount of information that can be seen at a glance makes it harder for users to learn enough from surrounding data. ...headline text must stand on its own and make sense when the rest of the content is not available.

• Make microcontent an "ultra-short abstract of its associated macrocontent."
• Write in "plain language."
• Don't use "teasers" to try to "entice people to click to find out what an article is about."
• Skip leading articles like "a" and "the" in page titles and subject lines but not in headings embedded in a page.
• Make the first word an "important, information-carrying one."
• Don't start all page titles with the same word; this makes them hard to differentiate when scanning a page. "Employing a labeling scheme and applying effective, coherent labels can make the difference between a site that's a pleasure to navigate and one that doesn't get bookmarked because it's too much trouble to use," opines Argus's Samantha Bailey in "Love Your Labels." In this Web Review article, she pinpoints the three most common labeling problems: those that are fuzzy or misleading, those that "don't match," and "left-fielders"Ñ"labels that make you scratch your head and mutter, 'Where'd they come up with that one?"
  

  Sourced from Uncle Netword, 'Writing Webtext'

..use the 80/20 rule as a guideline: 20 percent of all possible navigational approaches will likely satisfy 80 percent of users' navigational needs. Concentrate only on providing the most appropriate ways to get to information.
Rosenfeld, Louis, Special Report: Design Usability Seven Pitfalls to Avoid in Information Architecture'

Provide 'progress indicators' -- if you have concatenated several pages into a sequence, ensure that there is some visual indication for users of how far through the sequence they are.

...a word is worth a thousand pictures...

Captions

Roland Barthes wrote of our very common practices of surrounding images with words which help to specify and stabilize the interpretations of particular images:

... all images are polysemous; they imply, underlying their signifiers, a 'floating chain' of signifieds, the reader able to choose some and ignore others. Polysemy poses a question of meaning and this question always comes through as a dysfunction....Hence in every society various techniques are developed intended to fix the floating chain of signifieds in such a way as to counter the terror of uncertain signs; the linguistic message is one of those techniques.
Roland Barthes, "The Rhetoric of the Image" in Image, Music, Text , pp. 38-39.

Among these "linguistic messages" are captions, labels, placards, guidebooks, brochures, and fliers--all bits of institutional apparatuses which select and present texts and images for the public.

There are few things as quietly powerful as labels. We are completely surrounded by them and for the most part their influence is invisible. They are seen only by the people they hurt. Bowker and Star provide a couple of good examples. They discuss the politics and pain involved in the transition over several years from the label "gay-related immune disorder" (GRID) through a chain of other labels to the now accepted "acquired immune deficiency syndrome" (AIDS). In another example, they explain that "many patients feel that one of the greatest burdens of having chronic fatigue syndrome is the name of the illness." The word fatigue indicates everyday tiredness and makes it less likely that friends, family, employers, and co-workers will take the condition seriously. When we develop labeling systems and controlled vocabularies, we struggle to balance literary and user warrant. We strive for clarity and predictability, while trying to keep our labels relatively short. Perhaps we should also consider the potential impact our labels can have on people and perceptions.
Peter Morville, 'The Ethics of Information Architecture' 2000

Embedded links

!! Use with caution.

• Embedded links (links inside body-copy) distract the eye by drawing attention to themselves and interrupt the flow of the text.

• They can be missed by readers skimming the copy so ensure that important necessary links have special attention drawn to them -- e.g by being placed in margins, on a seperate line after the appropriate parahraph, or gather together in a bullet-point list.

• Embedded links often do not have self-evident destinations, so ensure you make the destination obvious by providing context in the linked or surrounding text:

  For example, imagine encountering the following sentence on a Web page: I'm writing a screenplay in my spare time. Where's that link going to go? To a copy of the work-in-progress? A Web page about screenwriting? You could look down at the bottom of the browser window for clues. If you see news:misc.writing.screenplays when you mouse over the link, the mystery is solved. However, the status bar rarely provides such obvious context, and you shouldn't expect users to rely on it. Context is always helpful, like in the following examples: I'm writing a screenplay in my spare time. Want to read it? I'm writing a screenplay in my spare time, so I hang out at misc.writing.screenplays. I'm writing a screenplay in my spare time, and I've found this Web site quite helpful."
  The Navigation and Usability Guide, Web Review 1998 (please note the above are dummy links)

• Version 4 IE also supports mouse-over meta-tagging of titles. This is a simple case of writing, for example <A HREF="http://www.labyrinth.net.au/~saul" TITLE ="Go to Shiralee Saul's homepage. Opens in a new window.">My homepage</A>. There are javascripts availabe which extend the same possibility to other browsers. (also see Jakob Nielsen, 'Using Link Titles to Help Users Predict Where They Are Going')

  Conscious Choices Add up to Conscious Overhead and Distractedness.

  There is really no need to interrupt the train of thought in the current article or subsection to interject, "HEY, do you really want to keep reading? Are you sure? Maybe you actually want to go this way instead. OR, maybe, that way!!! WELL, what will it be? Make up your mind. Read this -- no, Click Here, if you want (do you want, or not? Please respond.)... Note: readme first.

  ...When you have ten thousand links pointing every which direction, this causes cognitive churn, because you are constantly making explicit, conscious decisions about whether to abandon the current focused task and temporarily commit to another. But if there is a moderately long article or H2 passage that caught your eye, and it's definitely worth reading, then all the exit ramps are superfluous and could continue exerting a pull, a drag. When you are rushing along the freeway of an interesting, worthwhile passage, running your cognitive modem at a high data transfer rate, all those hypertext link choices act like wind drag, slowing you down.

  ...There are both pros and cons to placing numerous hypertext links all throughout your articles, looking like raisin-toast and feeling like spaghetti text. The user has so many choices already, with Back, Forward, scrolling, top-of-page keystrokes. We have enough choices -- what we need is structure, definite lines of flow, and engaging, well-labelled entry points; not an explicit decision point in every sentence.
  Michael Hoffman, 'Enabling Extremely Rapid Navigation in Your Web or Document

Nielsen notes that links to exterior web sites is seen by iusers to add credibility to the site. see Morkes, John and Jakob Nielsen, 'Concise, SCANNABLE, and Objective: How to Write for the Web'

Any link within a navigation bar must be immediately comprehensible to the user. In practise this means avoiding jargon, acronyms, product names, or any form of 'quirky' labelling. Use clear language, and where possible observe established conventions. Again, don't impose a restrictive 'one-word' or 'two-word' naming policy - use however many words are required to accurately convey meaning.
Farrell, Tom, 'Some Tips On Navigation'

 

But on the Web we experience something we can never experience in the real world: places without space. Instead of needing a containing space to enable movement, the Web has hyperlinks. Links are at the heart of the Web and the Web's spatiality. The fact that the linked pages come from many people turns the Web into a place larger than we are. It is a public place, a place we can enter, wander, and get lost, but cannot own.Ê Since place and space have been inseparable in all of our experience in the real world until now, when we experience the Web's place-ness, we assume that it must also have the usual attributes of spatiality, including the accidental nature of geography. That makes it easy to lose sight of the fact that what holds the Web together isn't a carpet of rock but the world's collective passion.
David Weinberger, Small Pievces Loosely Joined

Feedback

<< Don't hide navigation information in rollovers, pop-up or dropdown menus, etc.

Guidelines for effective feedback:

• indicate what's clickable by designing with distinguishable styles (i.e. buttons that look different than headlines, logos, or other graphic text)
• implement a subtle visual cue for mouse rollovers
• implement a drastic visual cue for mouse clicks
• keep feedback simple: don't try to supplement menu choices with lengthy descriptions.

Eventually, pliant response on websites will include subtle audio clues, and perhaps tactile feedback through hardware (both of which would make manipulability even more clear). In the meantime, however, these little pliant response tips will make users more comfortable with any website
Adam Baker, 'Pliant response for websites'

Difference

Don't rely on strictly hierarchical navigation; use global navigation to allow users to jump 'horizontally' within the site. Users should be able to access all the important sections of a site from any page on that site. For example, the user should be able to go directly to the 'About this organisation/company/whatever', 'Contact us' etc without having to return to the site's Homepage.

Use supplemental navigation aides

Provide a variety of means for users to find what they are looking for. Supplement your global navigation with optios such as:

• Table of contents
• Index
• Search

Multimedia

Don't use multimedia such as Quicktime, RealPlayer, Flash, Shockwave, RealAudio to communicate core content.

• Can't be searched effectively
• Hard to print or otherwise record information
• High bandwidth discriminates against majority with low bandwidth access.
• Usually more difficult or impossible to use for those with physical disabilities.

Provide alternatives to your multimedia.

Don't use multimedia intros for homepages -- if you have to put a 'skip intro' button, you don't need those bells and whistles at all.

alternative view:

Use Multimedia To Save Screen Space. Use pop-up menus and animation to preserve that valuable screen real estate.
Muehlbauer, Jen, 'The Navigation and Usability Guide'

Think internationally (David Kleinberg) -- remember that web sites can and will be accessed from anywhere in the world -- be aware of culturally-specific means of colours, shapes, etc. Observe cultural conventions.

Ensure that all important pages are accessible for users with disabilities, especially blind users.

Use product photos, but avoid cluttered and bloated product family pages with lots of photos. Instead have a small photo on each of the individual product pages and link the photo to one or more bigger ones that show as much detail as users need. This varies depending on type of product. Some products may even need zoomable or rotatable photos, but reserve all such advanced features for the secondary pages. The primary product page must be fast and should be limited to a thumbnail shot.

Use relevance-enhanced image reduction when preparing small photos and images: instead of simply resizing the original image to a tiny and unreadable thumbnail, zoom in on the most relevant detail and use a combination of cropping and resizing.
Jakob Nielsen, 'Ten Good Deeds in Web Design'

Don't be a dill...

• Don't use 'back' links -- these will be meaningless if the user has jumped from another site. Make sure that such links are clearly labelled with destination -- e.g. 'Back to Table of Contents', 'Back to my Homepage'.
• Don't link pages to themselves -- if the page is accessed via a global navigation bar, gray or otherwise visually indicate that that link is not available-- but don't remove the navigational element
• Avoid using frames
• Test the site in all the browsers your audience will use
• Don't 'orphan' pages -- make sure navigation works on all pages.
• Dan Shafer -- Never use a graphic where HTML text will do
• Jakob Nielsen -- Test your site on actual users, don't just guess what user response will be.

also see:

Stanford Guidelines for Web Credibility