Design: Navigation Scheme & Site Flow

Navagation is one of the most esential elements of a website. It is the ability to navigate, to follow hyper-links, that sets web pages appart from paper publications and traditional electronic documents. A Navagation scheme should be broadly uniform througout any site, and even consistant on a basic level among related sites. The Navagation scheme of any site can be broken down into visual qualities and functional divisions. There are three visual qualities: Queue, Page Layout, and Explanation. Additionaly there are three common functions used to categorize web content: Topical, Organizational, Audience Based.

Queue is the visual quality that deals with how a user identifies something as a link. The best strategy for queuing is to use consistancy of appearance ; similar colors, shapes, fonts, ect. on graphics that are links to other pages.

The other technique that works best for Queuing is consitancy of useage . If you use a graphic as a link button it should be a link across all pages that use it, and should always be used in the same way.

It is sometimes valid to use animation and reactivity for the purposes of queuing. Animated GIFs should use animation in a subtle way or only for a short time after the page loads so that they make motion that attracts the users attention without being distrating. Reactivity is when a visual element on your page chages or animates when the mouse is moved to specific regions of the page (usualy over other specific visual elements). You should never rely on these two techniques alone for queuing the user into a navigation area. They should only be used to enhance the page since not all browsers will support animation or reactivity.

Page Layout is the visual quality that deals with how navigational areas and content are placed on the page. Navigation areas traditionlaly run across one or more edges of a document: the top, bottom, left, or right side. Which of these areas you use will depend on the needs of the page. Top and left are defacto standards, but the other two can be used effectively in other situations. On pages of any considerable length you should never rely on links at the bottom of the page for basic navigation, but rather use them to help the user get back to the top of the page, or the next page(s) in a logical sequence. Layout should also be consistant to a degree across all pages. Some pages will need more navigational areas than others so pick one area as the primary location and use any others as accessory locations that might or might not be used depending on the type of document. Layout is one primary tool for distinguishing graphical elements that might be linked from images which might not be linked.

Explaination is the final visual element and deals with the cause and effect relationship between a visual element and it's link. The trick to explaination is putting yourself in the users place. Try to think of exactly what "phrase-ology" might be used for commonly desired content and try to come up with links labels that are consise but general enough for a broad base of users to understand. Properly labeling links can be one of the more complicated steps in the design of navigation. Luckily if your graphics are desiged properly changing the text associated with linked visual elements is not hard.

The three functional divisions of content are fairly strait foreward. Content can be classfied in three main ways. Topical navigation lets the user find what they want by narrowing down thier options based onthe topic of interest. Content can also be categorized by who maintains it. This is called Organizaitonal navigation and while it's not a very good method for most internet sites it is great on intranets. The other main function for navigation is Audience . In audience based navigation you seperate out content by user categories. This makes it easy for people to find content suited to them if they fit into one of your categories.

There are other functions that can be applied to navigational elements. Some other common functions are"Next" and "Back", but the function of these can vary depending on the type of content you are working with. If some other functionality makes the most sense for your site use that.

In large sites it is helpful to users to be able to get to content from a site using more than one method, and keep two methods of navigation visually seperate. Typically it's best to either allow access from the main page in one or two ways and have special pages dedicated to other functional groups ( "Find by Topic" is an example of a dedicated page). Sometimes one function will not apply to a given site. If the content at the site is for only one type of user or there is no distinction in the content you provide for different users then the audince based division doesn't make sense.

Site flow is the collection of paths users follow through your website to get the content they want. How effective your site's flow is depends on the measure of how easy it is for a user to get the content they want compared to how easy it could (or should) be. Under optimal conditions the Navigation Scheme of your pages will give users a path of "least resistance". This means your most commonly used, or most important content easy to find and get to. Site flow is very complex and must be crafted on a case-by-case basis.

In general links listed closer to the top and left will be seen and get more useage than elements located lower and further right on the page. Visual appearance (color, shape, depth) can also make certian navigational items more promienent.

Closing thought - The "eyes" have it!

A succesful navigation scheme and good site flow are all attributed to the proper placement and appearance of navigational elements on you pages. Ultimately it is the way that the human eye "flows" across a page that will determine how effective the design is. For the english speaking world the rule is left to right, top to bottom. This isn't the case in all cultures! The most general rule is outside to inside.