Monday, January 7, 2008

Designing Website Navigational aids

Designing Website Navigational aids

Craig Borysowich (Chief Technology Tactician)


The navigational metaphor provides an intuitive means for the user to move about the site and find information of interest. Navigational aids provide more direct assistance with site navigation. The first step in designing the navigational aids is to decide what pages are linked together. Consider the use of the following aids when designing your Web site.

Hyperlinks

Site navigation is essentially provided through the use of hyperlinks. A hyperlink provides the capability to jump from any page on the site directly to any other page, internal or external to the site. All of the navigational aids include hyperlinks to support movement about the site.

Navigation Bar

A navigation bar is a row of hyperlinks that provides access to the top pages of the main sections on the site. The bar is normally accessible from every page on the site and permits the user, with one mouse click, to move to the start of another section. The bar consists of icons or text hyperlinks and is consistently placed in the same spot on every page.

Site Map

Site maps provide a graphical representation of the architecture of the site to convey the higher level conceptual organization of the information (i.e., one or two levels deep in the hierarchy). The graphical representation should preserve the navigational metaphor. The site map provides hyperlinks to the content represented in the graphic.

Tables of Contents

A table of contents presents up to three or four levels of the organizational hierarchy and includes textual hyperlinks to the pages listed in the table. The contents are presented in an order that maps to the site organization structure.

Site Indices

Site indices provide a detailed view of the content and flatten the hierarchy of the organizational structure. The textual hyperlinks are sorted in alphabetical order, just as would be done for an index found in a book. These indices are intended to provide assistance to repeat users who are looking for the location of a specific piece of information in the content. Generally, the index is constructed so that it can be viewed on one page and contains up to 40 or 60 entries.

Search Engine

Search engines provide the capability to index the entire site and support searching the full text of the content using terms of interest to the user. Pages satisfying the search are displayed as a hyperlinked result list.

Frames

Frames provide a way to divide the browser window into separate regions that scroll independently and that contain separate HTML files. One use for frames is to isolate the site's navigation bar into its own frame. The navigation bar then stays on the screen while the pages requested through hyperlinking are displayed in other sections of the screen.

Image Maps

Image maps are graphics that include hyperlinks to jump directly to different locations on the site. Hot spots on the map are specified using pixel coordinates. Some uses for image maps include navigation bars, graphical interfaces/menus, site maps and navigation mechanisms from home pages.

Rollovers and Visual Cues

Sites include visual cues to indicate when an element is a hyperlink that can jump to another area of the site. Some standard cues include the hand symbol, the bounding box around linked graphics, and underlined text.

It is sometimes difficult for users to distinguish a graphic element that is a hot link from one that is a static image on the page. Buttons can be designed to look clickable using visual cues (e.g., a bevelled 3D button). An alternative approach is to use rollover buttons that behave differently. When the cursor passes over a rollover button, it responds by generating a different graphic or sound to indicate that the button is clickable.

Tips and Hints

Don't overwhelm the users of the site by including all of the navigational aids listed above. Choose those that are most appropriate to the target audience. Limit the choices presented and try to make the site navigation obvious and intuitive.

Keep in mind that Web browsers include a built-in set of navigation controls (e.g., bookmarks, history lists, forward buttons and back buttons). Try not to duplicate these functions when designing site-specific navigational aids.

No comments: