There is no single way to create the various navigation systems. Limited only by their imagination, Web designers have produced different methods that serve the same pur- pose. Following are some of the most popular methods and their advantages and dis- advantages.
Text
Using text links as navigation is simple to do and can be read by any browser. If you decide to go with text, keep the text length concise so that the link doesn’t overlap into a second line, and devise a visual clue so that users will know they are looking at a nav- igation tool. Successful methods include highlighting each menu item with a small graphic or offsetting the menu by highlighting it with a different color background.
Such visual clues set the navigation text apart from the rest of the content on the page.
Tables of contents and site maps are typically text based. The text for the navigation system in the Open University’s Safari tutorial in figure 5.7, for example, is set apart as a numbered list, placed within a table cell that has a different highlighted background color when the item is displayed.
Tool Bars: Image Maps, Tabs, and Icons
Many Web designers build graphical navigation tool bars, which take many different shapes. (Using graphics effectively will be discussed in greater detail in chapter 6.) Using graphics for navigation ensures that the system will stand apart from the text content of the page. A few popular permutations of the graphical toolbar that you may come across include image maps, tabs, and icons.
From UNC–Chapel Hill Libraries. Available: http://www.lib.unc.edu/instruct/infoethics/plagiarism/.
FIGURE 5.6
Multiple Navigation Systems
An image map is a graphic object that is subdivided into areas, each of which takes users to a different destination. The splash screen shown in figure 5.5 is an image map.
The clickable areas (or hot spots) of an image map are defined by specifying coordi- nates in the HTML coding and attaching a URL destination to that area.
Tabs have become a popular way to separate content into different categories. See the top right of figure 5.7 for an example.
Icons are small graphics that are meaningful representations of particular topics, functions, or actions. Users today are comfortable with icons as navigation devices because icons have become pervasive in computer and Web environments to represent common actions, such as print or return home.
Menu Trees
A menu tree, or nested navigation, is a way, through scripting, to display a collapsible menu, that is, one that can contain several levels. When completely closed, the user sees only the top level of the site hierarchy. Clicking a link displays the next level down.
To close a particular menu, the user clicks any other link, which collapses the previous branch of the tree just expanded. Figure 5.8 shows an example of navigation using a menu tree. Many menu trees use a folder metaphor of plusses (⫹) and minuses (⫺) to allow the user to open and close the menus. An example of this type of tree can be seen in figure 5.9.
From Open University Library. Available: http://www.open.ac.uk/safari/.
FIGURE 5.7
Text, Tabs, and Frames for Navigation Systems
From Z. Smith Reynolds Library, Wake Forest University. Available: http://www.wfu.edu/Library/ITC/
training/index.html.
FIGURE 5.8
Collapsible Menu Tree for Navigation
FIGURE 5.9
Folder-Style Collapsible Menu Tree for Navigation
Drop-down Menus
Drop-down menus illustrate a way to supply navigation without taking up much real estate on the screen. Most users are familiar with these and know to click on them to get a list of options. Drop-down menus are fairly easy to assemble by using a script. Many script libraries (which will be discussed in chapter 7) have free scripts you can adapt to use for your menu. Many Web editing programs now include this type of scripting func- tionality with a user-friendly interface. The example in figure 5.10 shows a simple drop- down box displayed in a browser and screens of the steps in Dreamweaver to create it.
Breadcrumb Trails
A breadcrumb trail shows the hierarchical structure of a site so that users know where they are in relation to the overall site. In figure 5.11, look at the arrow pointing to the breadcrumb trail at the top of the content area. It tells users where they are in the hier- archy of the instruction. It pinpoints their location in the context of the entire site, showing the path from the top layer to the current page. Breadcrumb trail navigation is best suited for a large, complex site and so may have limited applicability in a tuto- rial setting where a guided navigation may be more appropriate. However, if you are planning an intricate instructional site, breadcrumb trails are a simple-to-construct, space-conserving way to show navigation to the user.
FIGURE 5.10
Creating a Drop-down Menu with Macromedia Dreamweaver
Arrows
Users associate an arrow on a screen with the action that will move them forward or backward one screen. Including arrows on the screen of your tutorial permits users to move sequentially through a section of the tutorial in a linear fashion. In figure 5.6 the arrows at the bottom right of the content area of the screen allow the user to move sequentially through the module screen by screen. Including arrows to proceed through a subsite supplies an extra level of navigation.
Site Maps
Site maps are used to provide a visual ready reference of a site’s structure or organiza- tion. Typically site maps are text links that display the hierarchical order of the site’s content. If done correctly, site maps can help users orient themselves to the informa- tion contained and can provide a level of access that permits them to choose the path of their instruction. Figure 5.12 is an example of a site map for a library research tuto- rial. Successful site maps allow users to see the various levels of the entire site in one glance without being so big the map becomes overwhelming.
FIGURE 5.11
Breadcrumb Trail Navigation
From Five Colleges of Ohio Libraries. Available: http://www.denison.edu/collaborations/ohio5/
infolit/a1flow/.
Search Engines
Although normally the instructional design for a tutorial will be planned to proceed in a particular sequence, a search engine that locates terms on Web pages can be use- ful in helping users who return to the tutorial to revisit a particular point or concept.
They can search for something specific without having to proceed step by step through the entire instruction. This type of flexibility passes some control to the user.