Introduction to HTML
Style and Content
Copyright © 2000 - 2002 Randy D. Ralph.    All rights reserved.   In place May 19, 2000.

Navigation Aids.

Types:

Good navigation aids are essential to a good website.  There are basically three types of navigation aids.

  1. Intra-Site Navigation Aids -

    1. Path and Location Aids

      A large website generally has the structure of a complex hierarchy sometimes several levels deep.  Navigating complex hierarchies can be daunting if not difficult.  Users can become lost or stuck somewhere within a complex hierarchy and so frustrated that they leave your site.  To help prevent this from happening it is a good idea to display, somewhere on each page - generally at the bottom, a complete path leading to the current location.  If each level in the path is clearly identified and is linked your viewers will have a much easier time navigating through the levels and facets of your site.

    2. Site Navigation Aids -

      If your site is complex with many divisions and layers then you owe it to your visitors to provide good site navigation aids.  These should allow your visitors to move quickly from place to place within your site and to make decisions about what they want to see.  They can take the form of tables of contents, direction links or navigation bars or consoles.

  2. Intra-Page Navigation Aids -

    If your webpages are long with many segments then you should provide adequate internal navigation aids for moving quickly within the page.  Ideally, they will also inform the visitor about the structure of the information within the page, almost like a table of contents.

  3. Outlinks as Navigation Aids -

    Nearly all websites link out to other sites.  In a broad sense links to other sites are also navigation aids.  They can be embedded within your site's pages where appropriate or presented as unorganized or organized, annotated or unannotated link lists.  Regardless, they should be presented with a uniformity of style, at least within a single page, that won't confuse or mislead your visitors.  Obviously, they must also be regularly maintained to remove or realign dead or redirected links.


Styles:

    Navigation Buttons and Arrows

    Probably the most popular style of navigation aid among web authors are buttons, arrows, text boxes and the like.  Most web users find simple navigation arrows, even unlabeled ones, to be fairly intuitive.  Just make sure your choice of destinations for UP, DOWN, BACK and NEXT are logical and consistent.

    Example

    Also popular are labeled text boxes within tables, labeled navigation buttons or graphic labels (icons).  These have the advantage that they inform the user of the destination and help to avoid annoying misdirects.

    Example

    Navigation Bars or Consoles

    One of the most helpful things you can do for your visitors is to present them with a standard navigation bar or console on every page which directs them to all the major divisions of your website from a single point.  This is done by storing the code for the navigation bar in a single simple file which is incorporated into every page with a server side include (SSI).  The advantage, from a site management point of view, is that changes to the menu selections on the navigation bar need be done only once and in a single place.

    Example

    Contents Frames or Tables

    Most complex websites keep a table of contents visible to the visitor at all times through the use of frames or tables.

    Frames -

    It is widely held that most Internet users find frames annoying, but it could be argued that only poorly developed frames are annoying.  The use of a constant table of contents frame at the top or the side of a website can be a powerful navigation aid and can make your website content instantly and clearly accessible.  The drawbacks to the approach are few but significant.

    • Framed websites are initially more difficult to set up because they are more complicated, require special coding to display components in the right frames and need to offer users a non-frames alternative view. Once in place, however, they are no more difficult to manage than standard websites and can offer much greater functionality and flexibility.

    • Visitors may reach your framed website from a frame within another framed website (even reading about it is annoying!).  This single shared bad experience probably, more than anything else, spawned the myth that navigating within frames is annoying.  Just give your viewers a clearly marked and convenient exit to a non-framed version of your site and a way to reload your site at the top level to escape from someone else's bad cod.

    • If a framed website is not well-crafted it may not display properly within all browsers.  Visitors may have to adjust frame sizes or do a lot of unnecessary scrolling to read frame contents.  This is another source of annoyance with frames, but it is one you can control with a good design.

      Example

    Tables -

    An alternative to the use of frames with dynamic content is to present each webpage on a site within a standard table format.  The table can be made to emulate frames without invoking them.  One table cell, on the top or at the side can contain a static site-wide table of contents.  This provides much greater stability but precludes dynamically changing page content.  It also requires that if the site content changes every table must be editied to reflect the changes. 

    Example


    Go Back