MODULE III

3.1 Structures of Menus

Menus vary in form from very simple to very complex. They may range from small dialog boxes
requesting the user to choose between one of two alternatives, to hierarchical tree schemes with
many branches and level of depth. A menu’s structure defines the amount of control given to the
user in performing a task. The most common structures are the following.
(a) Single Menus
In this simplest form of menu, a single screen or window is presented to seek the user’s input or
request an action to be performed, as illustrated in Figure 4.1. In using the Internet, for example,
at a point in the dialog people may be asked if they wish to “Stay Connected” or “Disconnect.” In
playing a game, choices presented may be “novice, “intermediate,” or “expert.” Single menus
conceptually require choices from this single menu only, and no other menus will follow
necessitating additional user choices.

(b) Sequential Linear Menus

Sequential linear menus are presented on a series of screens possessing only one path. The menu
screens are presented in a preset order, and, generally, their objective is for specifying parameters
or for entering data. The length of the path may be short, or long, depending upon the nature of the
information being collected. All the menus are important to the process at hand and must be
answered in some manner by the user. A sequential linear menu is illustrated in Figure 4.
 (c) Simultaneous Menus
Instead of being presented on separate screens, all menu options are available simultaneously, as
illustrated in Figure 4.3. The menu may be completed in the order desired by the user, choices
being skipped and returned to later. All alternatives are visible for reminding of choices, comparing
choices, and changing answers. The tedium associated with a long series of sequential menus is
greatly reduced.

(d) Hierarchical Menus

When many relationships exist between menu alternatives, and some menu options are only
appropriate depending upon a previous menu selection, a hierarchical structure is the best solution.
A hierarchical structure results in an increasing refinement of choice as menus are stepped through,
for example, from options, to sub options, from categories to subcategories, from pages to sections
to subsections, and so on. A hierarchical structure can best be represented as an inverse tree,
leading to more and more branches as one moves downward through it. Hierarchical structures are
characterized by depth and breadth, depth being the number of choice levels one must traverse to
reach the destination, breadth being the number of alternatives found at each level. Menu depth
and breadth has been a well-researched topic and will be fully discussed in succeeding pages.
Common examples of hierarchical design today are found in menu bars with their associated pull-
downs, and in Web sites with their navigation links
 (e) Connected Menus
Connected menus are networks of menus all interconnected in some manner. Movement through
a structure of menus is not restricted to a hierarchical tree, but is permitted between most or all
menus in the network. From the user’s perspective there is no top-down traversal of the menu
system but an almost unhindered wandering between any two menus of interest. A connected menu
system may be cyclical, with movement permitted in either direction between menus, or acyclical,
with movement permitted in only one direction.

(f) Event-Trapping Menus

Event Trapping menus provide an ever-present background of control over the system’s state and
parameters while the user is working on a foreground task. They are,in essence, a set of
simultaneous menus imposed on hierarchical menus. In a graphical system, for example, existing
together are a simultaneous menu, the menu bar, and hierarchy—the menu bar and its pull-downs.
Event-trapping menus generally serve one of three functions.
(1) They may immediately change some parameter in the current environment (bold a piece
of text),
(2) They may take the user out of the current environment to perform a function without
leaving the current environment (perform a spell check), or
(3)They may exit the current environment and allow the user to move to a totally new
environment (Exit).
3.2 Functions of Menus
From the user’s perspective, a menu can be used to perform several functions, to navigate to a new
menu, to execute an action or procedure, to display information, or to input data or parameters.
(i)Navigation to a New Menu
Each user selection causes another menu in a hierarchical menu tree to be displayed.
The purpose of each selection is to steer the user toward an objective or goal. Selection errors may
lead the user down wrong paths, and cost time and, perhaps, aggravation, but these errors are
nondestructive and usually undoable

(ii)Execute an Action or Procedure

A user selection directs the computer to implement an action or perform a procedure. The action
may be something like opening or closing a file, copying text, or sending a message. In some cases
execution may only occur after a hierarchical menu tree is navigated. In other cases actions may
be performed as successive hierarchical menus are encountered and traversed. Selection errors
may or may not have serious consequences, depending upon the nature of the action. Accidental
selection of critical irreversible actions must be prevented in interface design
(iii)Displaying Information
The main purpose of selecting a menu choice may simply be to display information. The user may
be searching for specific information in a database or browsing the Web. The user’s focus is
primarily on the information desired and less on the selection function. In many cases, information
retrieval may occur only after a hierarchical menu tree is navigated. The content material and the
user’s interests will determine the paths followed. Users may spend considerable time and effort
understanding and processing uncovered information in order to evaluate subsequently displayed
menu choices. Wrong turns in the process will again cost time and perhaps aggravation, but these
errors are nondestructive and usually undoable system.
(iv)Data or Parameter Input
Each selection specifies a piece of input data for the system or provides a parameter value. Data
or values may be input on a single menu or spread over a hierarchy of menus. The user’s focus is
primarily on the information being provided and, again, less on the selection function. Selection
errors can easily be corrected if detected by the system

3.3 Content of Menus

A menu consists of four elements, its context, its title, its choice descriptions, and its completion
Instructions. These concepts are introduced here and will be expanded in detailed guidelines to
follow on succeeding pages
Menu Context
A menu’s context provides information to keep the user oriented. This kind of information is critical in
complex or hierarchical menu systems, where loss of position or disorientation can easily occur. Feedback
is necessary that tells users where they are ina process, what their past choices were, and possibly how
much farther they still have to navigate. Human memory being what it is, where one is and how one got
there all too easily slip from consciousness.
Menu Title
A menu’s title provides the context for the current set of choices. The title must reflect the choice selected
on the previously displayed menu.
Choice Descriptions
Choice descriptions are the alternatives available to the user. These descriptions can range from a
mnemonic, numeric, or alphabetized listing of choices to single words or phrases to full sentences or more.
The style chosen will reflect the experience of the user (novice or expert), the nature of the choices (well-
learned alternatives or not), the nature of the selection mechanism (keyboard or mouse), and the nature of
the system (business system application or Web page).
Completion Instructions
Completion instructions tell users how to indicate their choices. They may include the rationale for why the
user is being asked to make this choice and the impact the choicewill have on subsequent processes. Explicit
instructions may be needed for first time orcasual users of a system. Experienced users will find overly
verbose instructions unnecessary.The needs of all system users, and the nature of the system, must again be
considered in creating this kind of on-screen guidance

3.4 Formatting of Menus

The human-computer interface has a rich history of experimental studies with menus,the results of
which can and have been applied to graphical screen and Web page menu design and presentation.
What follows is a series of guidelines for formatting menus

(a) Consistency

• Provide consistency with the user’s expectations.

• Provide consistency in menu:
• Formatting, including organization, presentation, and choice ordering.
• Phrasing, including titles, choice descriptions, and instructions.
• Choice selection methods.
• Navigation schemes.
Like all aspects of screen design, menu design consistency is an integral componentof system usability.
Menu formatting, phrasing, choice selection, and navigation mustbe consistent throughout a graphical
system or Web site
(b)Display

If continual or frequent references to menu options are necessary, permanently display the menu
in an area of the screen that will not obscure other screen data. If only occasional references to
menu options are necessary, the menu may be presented on demand Critical options should be
continuously displayed
(c) Presentation
Ensure that a menu and its choices are obvious to the user by presenting them witha unique and consistent
structure, location, and/or display technique. Ensure that other system components do not possess the same
visual qualities as menu choices
(d) Organization
Provide a general or main menu.
(i) Display all relevant alternatives only relevant alternatives.
(ii)Delete or gray-out inactive choices.
(iii)Match the menu structure to the structure of the task. Organization should reflect the most
efficient sequence of steps to accomplish aperson’s most frequent or most likely goals.
(iv) Minimize number of menu levels within limits of clarity For Web sites, restrict it to two levels
(requiring two mouse clicks) for fastest performance.
(v)Be conservative in the number of menu choices presented on a screen:
Without logical groupings of elements, limit choices to 4 to 8.
With logical groupings of elements, limit choices to 18 to 24.
(vi) Provide decreasing direction menus, if sensible.
(vii)Never require menus to be scrolled.
(viii)Provide users with an easy way to restructure a menu according to how work is accomplished
Complexity
Provide both simple and complex menus.

• Simple: a minimal set of actions and menus.

• Complex: a complete set of actions and menus
Providing two sets of menus will more effectively satisfy the differing needs of the novice and expert user.
The novice or casual user often only requires a minimal set of actions and menus to accomplish tasks. The
expert may prefer a full set of options.
Make selection, and changing, between simple and complex menus easy to accomplish, preferably through
a menu bar choice. IBM’s SAA CUA refers to these menus as short and full
Item Arrangement

• Align alternatives or choices into single columns whenever possible.

 • Orient for top-to-bottom reading.
• Left-justify descriptions.
• If a horizontal orientation of descriptions must be maintained:
• Organize for left-to-right reading.
For scanning ease, menu choices should be left-justified and aligned vertically into columns. Research has
found that columnar menus and listings are searched much faster than horizontally-oriented menus. Do not
array a menu in multiple columns. When menus are included on other screens, space constraints often exist,
and the menu must be arrayed horizontally. If a single-row (horizontal) orientation is necessary organize
for left-to-right reading. If two or more rows are available for displaying choices, organize for top-to-
bottom, then left-to-right reading to facilitate visual scanning.
Ordering

• Order lists of choices by their natural order, or

• For lists associated with numbers, use numeric order.
• For textual lists with a small number of options (seven or less), order by:
• Sequence of occurrence.
• Frequency of occurrence.
• Importance.
• Semantic similarity.
• Use alphabetic order for:
• Long lists (eight or more options).
• Short lists with no obvious pattern or frequency.
• Separate potentially destructive actions from frequently chosen items.
• If option usage changes, do not reorder menus.
• Maintain a consistent ordering of options on all related menus.
• For variable-length menus, maintain consistent relative positions.
• For fixed-length menus, maintain consistent absolute positions.
A meaningful ordering is necessary to:

• Facilitate search for an item.

• Provide information about the structure and relationships among items.
• Provide compatibility with the user’s mental model of the item structure.
• Enhance the user’s ability to anticipate a choice’s location.
Groupings

• Create groupings of items that are logical, distinctive, meaningful, and mutually exclusive.
• Categorize them in such a way as to:
• Maximize the similarity of items within a category.
• Minimize the similarity of items across categories.
• Present no more than six or seven groupings on a screen.
• Order categorized groupings in a meaningful way.
If meaningful categories cannot be developed and more than eight options must be displayed on a screen,
create arbitrary visual groupings that:
Consist of about four or five but never more than seven options.

• Are of equal size.

• Separate groupings created through either:
• Wider spacing, or
• A thin ruled line.
• Provide immediate access to critical or frequently chosen items.
Line Separators

• Separate vertically arrayed groupings with subtle solid lines.

• Separate vertically arrayed subgroupings with subtle dotted or dashed lines.
• For subgroupings within a category:
• Left-justify the lines under the first letter of the columnized choice descriptions.
• Right-justify the lines under the last character of the longest choice description.
• For independent groupings:
• Extend the line to the left and right menu borders.

Figure 4.6 Partial line separators.

Figure 4.7 Extended line separators.

3.5 Phrasing the Menu
A menu must communicate to the user information about

• The nature and purpose of the menu itself.

• The nature and purpose of each presented choice.
• How the proper choice or choices may be selected

3.5.1 Menu Titles

Main menu
Create a short, simple, clear, and distinctive title, describing the purpose of the entire series of choices.
Submenus
Submenu titles must be worded exactly the same as the menu choice previously selected to display them.
General
Locate the title at the top of the listing of choices
Spell out the title fully using either an:
Uppercase font.
Mixed-case font in the headline style.
Superfluous titles may be omitted.

3.5.2 Menu Choice Descriptions

• Create meaningful choice descriptions that are familiar, fully spelled out, concise, and
distinctive.
• Descriptions may be single words, compound words, or multiple words or phrases.
• Exception: Menu bar items should be a single word (if possible).
• Place the keyword first, usually a verb.
• Use the headline style, capitalizing the first letter of each significant word in the choice
description.
• Use task-oriented not data-oriented wording.
• Use parallel construction.
• A menu choice must never have the same wording as its menu title.
• Identical choices on different menus should be worded identically.
• Choices should not be numbered.
• Exception: If the listing is numeric in nature, graphic, or a list of varying items, it may be
numbered.
• If menu options will be used in conjunction with a command language, the capitalization
and syntax of the choices should be consistent with the command language.
• Word choices as commands to the computer
3.5.3 Menu Instructions
• For novice or inexperienced users, provide menu completion instructions.
• Place the instructions in a position just preceding the part, or parts, of the menu to which they apply.
• Left-justify the instruction and indent the related menu choice descriptions a minimum of three
spaces to the right.
• Leave a space line, if possible, between the instructions and the related menu choice descriptions
• Present instructions in a mixed-case font in sentence style
• For expert users, make these instructions easy to ignore by
• Presenting them in a consistent location.
• Displaying them in a unique type style and/or color.

3.5.4 Intent Indicators

Cascade indicator: To indicate that selection of an item will lead to a submenu, place a triangle or right-
pointing solid arrow following the choice. A cascade indicator must designate every cascaded menu
To a window indicator : For choices that result in displaying a window to collect more information, place
an ellipsis (. . .) immediately following the choice.

• Exceptions—do not use when an action

• Causes a warning window to be displayed.
• May or may not lead to a window.
• Direct action items
• For choices that directly perform an action, no special indicator should be placed on the menu

Figure 4.8 Intent indicators.

3.5.5 Keyboard shortcuts

Two types: Keyboard Equivalents and Keyboard accelerators
3.5.5.1 Keyboard Equivalents
To facilitate keyboard selection of a menu choice, each menu item should be assigned a keyboard
equivalent mnemonic.
The mnemonic should be the first character of the menu item’s description.
If duplication exists in first characters, use another character in the duplicated item’s description.
 Preferably choose the first succeeding consonant.
Designate the mnemonic character by underlining it.
Use industry-standard keyboard access equivalents when they exist.

Figure 4.9 Keyboard equivalents.

Industry standards
Standard industry keyboard equivalents have been established for many common system menu choices.
Where these standard equivalents have been established, they should be followed. Microsoft Windows
calls keyboard equivalents access keys. Standard keyboard equivalents are shown in Table 4.1.
3.5.5.2 Keyboard Accelerators
For frequently used items, provide a keyboard accelerator to facilitate keyboard selection
 • The accelerator may be one function key or a combination of keys
• Function key shortcuts are easier to learn than modifier plus letter shortcuts
• Pressing no more than two keys simultaneously is preferred.
• Do not exceed three simultaneous keystrokes.
• Use a plus (+) sign to indicate that two or more keys must be pressed at the same time
• Accelerators should have some associative value to the item.
• Identify the keys by their actual key top engraving.
• If keyboard terminology differences exist, use
• The most common keyboard terminology
• Terminology contained on the newest PCs
• Separate the accelerator from the item description by three spaces.
• Right-align the key descriptions.
• Do not use accelerators for
• Menu items that have cascaded menus.
• Pop-up menus.
• Use industry-standard keyboard accelerators when they exist.

Figure 4.10 Keyboard accelerators

Table 4.2 Standard Keyboard Accelerators
3.6 Selecting Menu Choices
Menu items can be selected by pointing at the choice with a mechanical pointer, by pointing at
the choice through the keyboard, or by keying a value designating the choice.
3.6.1 Initial Cursor Positioning
• If one option has a significantly higher probability of selection, position the cursor at that option.
• If repeating the previously selected option has the highest probability of occurrence, position the
cursor at this option.
• If no option has a significantly higher probability of selection, position the cursor at the first
option

3.6.2 Choice Selection

Pointers
Select the choice by directly pointing at it with a mechanical device such as a mouse or trackball pointer,
or light pen, or pointing with one’s finger.
Visually indicate:

• Which options can be selected

• When the option is directly under the pointer and can be selected.
• Visually distinguish single- and multiple-choice menu alternatives.
If pointing with a mechanical device is the selection method used:
 • The selectable target area should be at least twice the size of the active area of the pointing device
or displayed pointer. In no case should it be less than 6 millimeters square
• Adequate separation must be provided between adjacent target areas
If finger pointing is the selection method used:

• The touch area must be a minimum of 20 to 30 millimeters square.

• The touch area must encompass the entire caption plus one character around it.
Keyboard

• If moving the cursor to a menu choice:

• The up and down arrow keys should move the cursor up or down vertically oriented menu
options.
• The left and right cursor keys should move the cursor left or right between horizontally oriented
menu options.
• If keying a choice identifier value within an entry field:
• Locate the entry field at the bottom of the last choice in the array of choices.
• Uppercase, lowercase, and mixed -case typed entries should all be acceptable.
• Selection/execution:
• Provide separate actions for selecting and executing menu options.
• Indicate the selected choice through either:
• Highlighting it with a distinctive display technique.
• Modifying the shape of the cursor.
• Permit unselecting choice before execution.
• If a menu is multiple choice, permit all options to be selected before execution.
Combining techniques

• Permit alternative selection techniques, to provide flexibility

Defaults

• Provide a default whenever possible.

• Display as bold text.
• Defaults aid system learning and enhance efficiency. Provide as many as possible.
• Indicate a default by displaying it in a bold text.
Unavailable Choices

• Unavailable choices should be dimmed or “grayed out.”

• Do not add or remove items from a menu unless the user takes explicit action to add or remove
them through the application.
• Choices not available to the user should be made visually distinctive by dimming them or graying
them out. They must not compete with active items for the user’s attention.
• Items should not be added or removed from a menu unless the user takes explicit action to do so.
Allowing the system to change menu items takes control away from the user and can also lead to
user confusion.
Mark Toggles or Settings
Purpose
Use to designate that an item or feature is active or inactive over a relatively long period of time.
Use to provide a reminder that an item or feature is active or inactive.
Guidelines
Position the indicator directly to the left of the option.
For situations where several nonexclusive choices may be selected, consider including one
alternative that deselects all the items and reverts the state to the “normal” condition
Advantages/disadvantages
Mark toggles provide a visual indication of the state of an item. They are accessed quickly but
may not always be visible. Mark toggles are best suited to items or features that remain active or
inactive over relatively long periods of time. They provide good reminders of the state that exists.

Figure 4.11 Mark toggles.

Toggled Menu Items
Purpose
Use to designate two opposite commands that are accessed frequently.
Use when the menu item displayed will clearly indicate that the opposite condition currently
exists.
Guidelines:
Provide a meaningful, fully spelled-out description of the action.
— Begin with a verb that unambiguously represents the outcome of the command.
— Use mixed-case letters, with the first letter of each word capitalized.

Figure 4.12 Toggled menu item.

3.7 Navigating Menus
Navigation, and an efficient navigational structure, is the most important element in system usability. A
simple and clear navigational structure is the backbone upon which all system features are draped. In Web
site design, the most successful sites have been found to be those with easy to use and understand
navigational systems. No amount of graphical “sparkle” has yet been able to overcome a poor navigational
design. A system’s organizational structure and its navigational tools, including elements such as menus,
links, toolbars, and command buttons influence the system’s navigational ease of use. So, of course, does
the size of the system, as well as the navigational aids available, including site maps and indexes. In Web
site navigation design, the unique, often incompatible, relationship the browser has to the Web site
application being presented can also strain navigation ease.

3.7.2 Web Site Navigation Problems

To fully understand what comprises good navigation, let’s first look at some Web site navigational issues
and problems, both technical and usage-related. The Web and its navigation is undoubtedly the most
complex interface facing people today.
Unlike a graphical system application, whose screens tend to flow in an orderly and predictable manner, a
Web application is composed of pages, each of which can, theoretically, be linked to any other page in the
application. The graphical application user normally begins a process at a prescribed starting point and
proceeds sequentially until a process or task is finished.
3.7.2.1Technical issues
A Web application is composed of pages, each of which can, theoretically, be linked to any other page in
the application. The graphical application user normally begins a process at a prescribed starting point and
proceeds sequentially until a process or task is finished. Web users can perform tasks or satisfy needs at
will, easily moving between most screens in the application “spider web” in any order desired, and even
jumping to other spider webs when the urge arises The graphical system user must deal with only one
operating system whose navigational characteristics are standard and fairly consistent. The Web user must
confront two navigational systems, that of the browser being used and that of the Web site being viewed.
A click of the browser Back button, for example, simply redisplays the page that was previously displayed
on the screen. This page may have been in another Web site, and the user is transported there. Neither Web
site application is aware of this change.
3.7.2.2 Usage problems
The two most serious user problems in Web navigation are the heavy mental loads imposed to use the Web
and the feeling of spatial disorientation that often occurs. This problem may also occur in hierarchically
structured graphical systems. The cognitive or mental overhead the user must expend in making decisions
concerning which links to follow, or to abandon, can be overwhelming. Often, there are too many links
presented on a page, many of whose meanings are not clear. Links frequently offer few clues to where they
lead, how much information will be found at the other end, and how this information relates to the currently
displayed page. For the user to reach a goal, each link’s relevance to the task at hand must be determined.
Another problem is that not all links on a page are always obvious. This often leads to much trial-and-error
behavior; the user aimlessly clicking to see what happens
3.7.3 Navigation Goals
A well-designed navigation system facilitates quick and easy navigation between components whose
structure and relationship are easily comprehendible. For the user, answers to the following questions must
be obvious at all times during an interaction:

• Where am I now?
• Where did I come from?
• Where can I go from here?
• How can I get there quickly?
Control

• For multilevel menus, provide one simple action to:

o Return to the next higher-level menu.
o Return to the main menu.
• Provide multiple pathways through a menu hierarchy whenever possible
Navigation through menu levels should be accomplished through simple actions. It should always be very
easy to return to the next higher-level menu and the main, general, or top menu. Provide multiple pathways,
whenever possible, through a hierarchical menu structure
Menu Navigation Aids

• To aid menu navigation and learning, provide an easily accessible

• Menu map or overview of the menu hierarchy.
• A “look ahead” at the next level of choices, alternatives that will be presented when a
currently viewed choice is selected.
Menu maps
As has been discussed, as one wanders deeper into a multilevel menu system, it is increasingly difficult to
maintain a sense of position or orientation The result is that getting lost in the menu maze is quite easy to
do. The value of a menu map in reducing disorientation has been demonstrated in some studies. In
thesestudies, providing a graphic representation of the menu structure in map form, either in hard copy or
online, resulted in fewer errors or wrong choices, faster navigation, and greater user satisfaction when
compared to providing no guides or simply providing indexes or narrative descriptions of the menu
structure. So, menu maps or graphic representations of the menu structure are desirable and should be
included on top-level menu screens. They should also be included in the system documentation where
available, and through Help function
Look-aheads
Menu navigation and learning will be assisted if a person is able to browse the next level of choices before
the currently displayed choice is selected. As the cursor moves across a menu bar, for example, the pull-
down menu may be automatically dropped, permitting review of the choices available if that menu bar item
is selected. Such look-aheads are useful if ambiguity exists at higher-level choice points. They have been
found to decrease errors and improve satisfaction. Menu search time may be longer, however.
Navigation history
It has been found that being able to view, on the screen, the path one is following improves learning and
performance, and reduces feelings of disorientation.
Provide a navigation history that summarizes the menu choices made leading to the currently displayed
menu or screen.

3.7.5 Web Site Navigation

Understanding a Web site’s navigational scheme is made more difficult because Web sites usually have
much less perceived structure than typical graphical system applications. Web pages can be of any length
and possess any number of links to any number of other pages. The user can wander at will or whim through
multitudes of links, pages, and Web sites, and any meaningful structure a Web site design does possess can
easily disappear from one’s memory in the maze of directional twists and turns being made. The potential
for getting lost is extremely high, unless numerous, obvious, and understandable landmarks are available
as a guide.
3.7.5.1 Web Site Organization

• Divide content into logical fragments, units, or chunks.

• Establish a hierarchy of generality or importance.
• Structure the relationships among content fragments, units, or chunks.
• Establish global or site-wide navigation requirements.
• Create a well-balanced hierarchical tree.
• Restrict to two levels requiring no more than two clicks to reach deepest content, whenever
possible

3.8 Components of a Web Navigation System

To move between Web site information fragments necessitates the creation of navigation links. They are
contained within a framework of tools or controls, including the browser’s command buttons, textual
phrases, Web site navigation bars, and Web site command buttons. Collectively, these are all referred to
as links. Links are one of the most discussed issues in Web site design.
A link functions as a menu choice that, when selected, results in the connected information being displayed,
or results in a file being opened or downloaded. A movement link may transport the user to another location
within a page, to a new site page, or to another Web site
3.8.1 Several general link guidelines are
All navigation controls must:
Make sense in the absence of site context.
— Be continually available.
— Be obvious and distinctive.
— Be consistent in appearance, function, and ordering.
— Possess a textual label or description.
 — Offer multiple navigation paths.

3.8.2 Browser Command Buttons

Hide the split between the browser and the Web site application by including navigational controls within
the application
The browser being used in interacting with the Web provides its own command buttons. As discussed
earlier, pressing the browser Back and Forward buttons can create confusion because they can transport a
user in and out of a Web site. Novice users often do not recognize where browser control ends and
application control starts, and vice versa. Rather than relying on the browser’s buttons, provide navigation
controls within the application for movement within the application. They can take the form of links or
command buttons such as Next and Previous.

3.8.3 Web Site Navigation Bars

Provide a global navigation bar at the top of each page.
■ Provide a local category or topical links navigation bar on the left side of a page.
■ Place minor illustrative, parenthetical, or footnote links at the end of the page.
■ For long pages, provide a navigation bar repeating important global or local links at the page
bottom
A Web site navigation bar is a menu, an array of textual phrases, graphical images or icons, or command
buttons, as illustrated in Figures 4.13, 4.14, and 4.15. A Web site contains at least three levels of navigation
links, global, or site-wide, links, indicating the site’s total scope or categories of available information;
local specific navigation links within the category or topical area being displayed; and minor illustrative,
parenthetical, or footnote links. An evolving standard in design is to locate the global links at the page top,
the categorical links in a columnar array down the pages left side, and the minor links at the page bottom.
This structure, illustrated in Figure 4.16, separates navigation from content, making it easy for users to find
each.

Figure 4.13 Textual explicit listing navigation bars.

Figure 4.14 Graphical or iconic navigation bars.

Figure 4.15 Command button navigation bar.

3.8.4 Textual Phrases

Provide a mix of textual phrase links:
— In explicit menus.
— Embedded within page text
Graphical Images or Icons
Graphical images or icons may appear in an array in the form of a navigation bar, or be individually located
at relevant points in a page. Guidelines for creating and displaying graphics and icons are found in Step 11
“Create Meaningful Graphics, Icons, and Images.”
Command Buttons
Command buttons may appear in an array in the form of a navigation bar, or be individually located at
relevant points in a page. Guidelines for creating and displaying command buttons are found in Step 7
“Select the Proper Screen-Based Controls.”
3.8.5 Other Web Site Navigation Elements
In addition to Navigation bars, a number of other Web site elements are also important components of the
Web navigation system. Among these are overviews, including executive summaries, site maps, indexes,
and tables of contents. Other elements are historical trails and search engines.
Overviews Provide

• An executive summary that provides a preview of the site and contains links to all major
concepts.
• A site map illustrating the site’s hierarchical structure and the relationships of
components.
• Both global and local maps.
• An alphabetized site index.
• A table of contents.
• Allow accessibility from any point in the Web site.

3.9 Web Site Navigation Guidelines

How many links should exist on a page? How should textual links be presented to make them obvious?
What kinds of links should be included on a page? These and similar questions are addressed next.

Figure 4.18 Breadcrumb trails.

3.9.1 Scrolling
■ Do not require scrolling of navigation-only pages.
■ Minimize the need for scrolling to view all links on pages containing content.
■ Never require horizontal scrolling
Never require scrolling of navigation-only pages. Besides being tedious, not being able to see all links at
the same time makes comparison of the alternatives for selection purposes much more difficult. For
scrollable content pages, minimize the need to scroll to see all links. Also, ensure that all related links on a
screen are seen together to facilitate comparison. Never require horizontal scrolling. It makes text reading
difficult and users dislike it.
3.9.2 Number of Links

• Every page should contain at least one link.

• Be conservative in the total number of links presented on a screen:
o Without logical groupings of elements, limit links to 4 to 8.
o With logical groupings of elements, limit links to 18 to 24.
• Restrict embedded links to those most important, pertinent, and interesting.
o Place less relevant links in a listing
3.9.3 Presenting Links
Link text:

• Underline all link text, including that:

o Embedded in page content.
o Contained in explicit menu listings.
o Contained in headings.
o Used as graphical labels.
• Distinguish between unselected/unvisited links and selected/visited links.
o Make unselected/unvisited links blue.
o Make selected/visited links purple.
Kinds of links

• Distinguish links leading to different Web destinations through a differentiating symbol:

o Precede links to content within the same page with a pound sign (#).
▪ For links moving downward in the page, use: #The principles of design.
▪ For links moving upward in the page use: #^ Principles introduction.
o Precede links to external or foreign sites with another unique symbol such as an asterisk
(*): * Additional information.
o Do not precede links to other site pages with any symbol:
▪ More principles of design.
• Also distinguish links leading to different Web destinations by presenting them in consistent
locations
• Graphical links
• Distinguish graphical links from decorative graphics through:
o Underlining graphical text labels.
• Links in toolbars
• Distinguish links contained in toolbars through:
o Presenting in consistent locations.
o Using different colored backgrounds.
Other Link Guidelines
In general, many of the principles in menu design presented earlier in this Step, and to be presented in
Step 7, also apply to presenting and organizing links. These guidelines should be reviewed in conjunction
with this brief summary that follows
Writing

• Provide links to satisfy a range of user needs.

• Create descriptive links clearly indicating their destination or resulting action.
Grouping

• Group links by the most relevant menu-grouping scheme.

• Separate visually the following types of navigation:
• Upward to the immediate parent page.
• Upward to the beginning of the section or category of information.
• Across to main sections or categories of information.
• To basic utilities.
Ordering

• Order links by the most relevant menu choice-ordering scheme

• Heading
• Where appropriate, provide a listing heading describing the organizing category, principle, or
theme
Size

• Provide graphical images and command buttons of sufficient and equal size
Spacing

• Create equal spacing between choices graphical image and textual listing toolbars.
Inapplicability

• Disable and display dimmed links conditionally not applicable

Kinds of Links
 • Within a page
o For long pages, include links to internal page content
• Within a Web site
o On all pages include links to
o The Web site home page.
o Global Web site features.
o Other main pages, navigation points, or categories.
o The likely Web site starting point.
o Main pages with links to the page
• On sequential pages, include links to the
• Next page.
• Previous page.
• Also consider including links to
• Places of related interest.
• Important pages
• Background or explanatory information.
• Supplemental information.
• New or changed content.
• Web site Quit or Exit.
• External links
• Most appropriate for informational sites.
• Provide links to relevant information on other Web sites.
o Related content.
o Reference information.
o Background reading.
• Place external links on a separate page.
• Provide an indication when a link goes outside the current site.
Link Maintenance

• Maintain correct internal links.

• Frequently check and correct external links
As sites are modified, internal links may have to be revised. Carefully check sequential pages if Next and
Previous links are used within the site. External links should also be checked and corrected frequently.
Due to the volatile nature of the Web, a linked site’s content may change, its location may change, or a
site may cease to exist. The credibility of a site’s entire content suffers if it is not properly maintained.

3.10 Maintaining a Sense of Place

Design Characteristics That Aid in Maintaining a Sense of Place

• To assist maintaining a sense of place within a Web site:

• Provide a simple hierarchical tree structure.
• Provide ease of movement to important site features.
• To assist maintaining a sense of place across multiple Web sites:
• Provide consistency in all Web site design elements, including:
• Graphical identity schemes.
 • Component presentation.
• Component organization and location
Design Elements That Aid in Maintaining a Sense of Place

• Provide a home base.

• Use recurring navigation tools on all pages.
• Use recurring elements on all pages.
• Provide page numbers for sequential pages.
• Provide ongoing feedback that shows where users are in a site.
• Provide on-demand aids that illustrate the user’s location within a site.
• Site maps.
• Table of contents.
• Provide clearly written link labels.