MODULE 3

SYSTEM MENUS AND NAVIGATION SCHEMES

Radhika A D, Dept of CSE, VVCE 1

 • Introduction
• Structures of menus
• Functions of menus
• Contents of menus
• Formatting of menus
CONTENTS • Phrasing the menu
• Selecting menu choices
• Navigating menus
• Kinds of graphical menus.

Radhika A D, Dept of CSE, VVCE 2

 INTRODUCTION
A system contains large amounts of information and performs a variety of
functions

The system must provide some means to tell people about the information it
possesses or the things it can do

This is accomplished by displaying listings of the choices or alternatives the user

has at appropriate points while using the system, or creating a string of listings

These listings of choices are commonly called menus

Menus are a major form of navigation through a system and, if properly

designed, assist the user in developing a mental model of the system

Radhika A D, Dept of CSE, VVCE 3

• Menus are effective because they utilize the more powerful human capability of recognition
• Menu information must often be remembered and integrated across a series of screens
• Graphical and Web systems are heavily menu-oriented. They vary in form and are applied in diverse ways
• In graphical systems they are used to designate commands, properties that apply to an object, documents, and
windows
• A graphical system presents a variety of menu styles to choose from. They include menu bars, and menus called
pull-downs, pop-ups, cascades, tear-off, and iconic
• In Web site design, common menus include textual links to other pages, command buttons, and both graphical
and textual toolbars

Radhika A D, Dept of CSE, VVCE 4

 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 include
• Single Menus
• Sequential Linear Menus
• Simultaneous Menus
• Hierarchical Menus
• Connected Menus
• Event-Trapping Menus
Radhika A D, Dept of CSE, VVCE 5
SINGLE MENUS
• Simplest form of menu
• A single screen or window is presented to seek the
user’s input or request an action to be performed
• A single menu may be iterative if it requires data to be
entered into it and this data input is subject to a
validity check that fails.
• The menu will then be represented to the user with a
message requesting reentry of valid data
• Single menus conceptually require choices from this
single menu only

Radhika A D, Dept of CSE, VVCE 6

• Common Examples
➢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”
Novice

Intermediate

Expert

Radhika A D, Dept of CSE, VVCE 7

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

Radhika A D, Dept of CSE, VVCE 8

• Sequential path menus have several shortcomings
➢A long sequence may become tedious as menu after menu is presented
➢The user may not remember an answer to a previous question
➢The user may also want to return to a previous menu to change an answer or
look at an answer, an awkward process that must be allowed
➢Finally, the user may, conceptually, want to complete the menus in a different
order than which they are being presented

Radhika A D, Dept of CSE, VVCE 9

Radhika A D, Dept of CSE, VVCE 10
Radhika A D, Dept of CSE, VVCE 11
SIMULTANEOUS MENUS
• Instead of being presented on separate screens, all menu
options are available simultaneously
• 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

Radhika A D, Dept of CSE, VVCE 12

Radhika A D, Dept of CSE, VVCE 13
Radhika A D, Dept of CSE, VVCE 14
• Problems with simultaneous menus
• For large collections of menu alternatives screen clutter can
easily occur, and screen paging or scrolling may still be
necessary to view all the choices.
• This type of menu must also clearly indicate menu choice
relationships and dependencies.
• Presenting many menu dependencies and relationships on a
screen, especially if poorly indicated, can also be very
confusing for a novice user.

Radhika A D, Dept of CSE, VVCE 15

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
• Examples include,
• From options, to sub options
• From categories to subcategories
• From pages to sections to subsections, and so on.

Radhika A D, Dept of CSE, VVCE 16

• The top level of the tree is considered level 0 with subsequent levels
numbered sequentially beginning with number 1
• Starting at the top, level 0, two selections, or mouse clicks, are
required to reach level 2

Radhika A D, Dept of CSE, VVCE 17

• Disadvantages of a hierarchical scheme include
➢The defined branching order may not fit the users
conception of the task flow. If users are not familiar
with the hierarchical menu, or are unable to predict
what sub options lie below
➢A particular choice, they may go down wrong paths
and find it necessary to go back up the tree to change
a choice, or perhaps even return to the top-level
menu

Radhika A D, Dept of CSE, VVCE 18

CONNECTED MENUS
• Connected menus are networks of menus all
interconnected in some manner
• A connected menu system may be cyclical,
with movement permitted in either
direction between menus, or acyclical, with
movement permitted in only one direction
• These menus also vary in connectivity, the
extent to which menus are linked by
multiple paths

Radhika A D, Dept of CSE, VVCE 19

The biggest advantage of a connected menu network is that it
gives the user full control over the navigation flow

Its disadvantage is its complexity, and its navigation may be

daunting (seeming difficult to deal) for an inexperienced user

Radhika A D, Dept of CSE, VVCE 20

Radhika A D, Dept of CSE, VVCE 21
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 a hierarchy—the menu
bar and its pull-downs

Radhika A D, Dept of CSE, VVCE 22

• 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)
(3) They may exit the current environment and allow the user to
move to a totally new environment (Exit)
• These menus can also change content based upon the system
state, or an event, existing at that moment

Radhika A D, Dept of CSE, VVCE 23

FUNCTIONS OF MENUS

• From the user’s perspective, a menu can be used to perform several

functions
➢to display information
➢to navigate to a new menu
➢to execute an action or procedure
➢to input data or parameters

Radhika A D, Dept of CSE, VVCE 24

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
• Wrong turns in the process will again cost time and perhaps aggravation, but
these errors are nondestructive and usually undoable

Radhika A D, Dept of CSE, VVCE 25

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 (guide) the user toward an
objective or goal

Radhika A D, Dept of CSE, VVCE 26

 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

Radhika A D, Dept of CSE, VVCE 27

 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

Radhika A D, Dept of CSE, VVCE 28

 CONTENTS OF MENUS
• A menu consists of four elements
➢ its context
➢ its title
➢ its choice descriptions
➢ its completion instructions
• These concepts are introduced here and will be expanded in
detailed guidelines to follow

Radhika A D, Dept of CSE, VVCE 29

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 in a process
➢ what their past choices were
➢ how much farther they still must navigate

Radhika A D, Dept of CSE, VVCE 30

• Verbal linkage, spatial linkage, or both may be
used to provide navigation feedback
• Verbal linkage involves providing, on the
current menu screen, a listing of choices made
on previous menus that have led to this
position
• Spatial linkage can be accomplished by graphic
methods

Radhika A D, Dept of CSE, VVCE 31

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

Radhika A D, Dept of CSE, VVCE 32

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)

Radhika A D, Dept of CSE, VVCE 33

COMPLETION INSTRUCTIONS

• Completion instructions tell users how to indicate their choices

• Explicit instructions may be needed for first time or casual 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

Radhika A D, Dept of CSE, VVCE 34

FORMATTING OF MENUS

Radhika A D, Dept of CSE, VVCE 35

Radhika A D, Dept of CSE, VVCE 36
Radhika A D, Dept of CSE, VVCE 37
Radhika A D, Dept of CSE, VVCE 38
Radhika A D, Dept of CSE, VVCE 39
Radhika A D, Dept of CSE, VVCE 40
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

Radhika A D, Dept of CSE, VVCE 41

• Writing the content of menu components, the menu’s title, the choice descriptions, and
instructions, is often made difficult because of the varying experience levels of the menu users
• At one extreme, there is the desire to explain, on the screen, everything in detail
• On the other hand, brevity (concise) is also important because of screen space constraints and limits
on what people want to read

Radhika A D, Dept of CSE, VVCE 42

• Following are guidelines for
➢creating menu titles
➢choice descriptions
➢Web navigation links
➢menu instructions
• The standard graphical system conventions inscribed on the following are also
described
➢menus
➢intent indicators
➢keyboard equivalents
➢keyboard accelerators

Radhika A D, Dept of CSE, VVCE 43

Radhika A D, Dept of CSE, VVCE 44
Radhika A D, Dept of CSE, VVCE 45
Radhika A D, Dept of CSE, VVCE 46
Radhika A D, Dept of CSE, VVCE 47
Radhika A D, Dept of CSE, VVCE 48
Radhika A D, Dept of CSE, VVCE 49
Radhika A D, Dept of CSE, VVCE 50
Radhika A D, Dept of CSE, VVCE 51
Radhika A D, Dept of CSE, VVCE 52
Radhika A D, Dept of CSE, VVCE 53
Radhika A D, Dept of CSE, VVCE 54
Radhika A D, Dept of CSE, VVCE 55
SELECTING MENU CHOICES

• Menu items can be selected by the following

ways
➢ By pointing at the choice with a
mechanical pointer
➢ By pointing at the choice through the
keyboard
➢ By keying a value designating the choice

Radhika A D, Dept of CSE, VVCE 56

Radhika A D, Dept of CSE, VVCE 57
Radhika A D, Dept of CSE, VVCE 58
Radhika A D, Dept of CSE, VVCE 59
Radhika A D, Dept of CSE, VVCE 60
Radhika A D, Dept of CSE, VVCE 61
Radhika A D, Dept of CSE, VVCE 62
 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
• 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

Radhika A D, Dept of CSE, VVCE 63

Radhika A D, Dept of CSE, VVCE 64
Radhika A D, Dept of CSE, VVCE 65
WEB SITE NAVIGATION PROBLEMS
• Technical issues
➢ Graphical system application, whose screens tend to flow in an orderly and predictable
manner
➢ Web-linked to any other page in the application
➢ browser being used and that of the Web site being viewed
• Usage issues
➢ 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

Radhika A D, Dept of CSE, VVCE 66

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 always obvious during an
interaction:
➢Where am I now?
➢Where did I come from?
➢Where can I go from here?
➢How can I get there quickly?

Radhika A D, Dept of CSE, VVCE 67

Radhika A D, Dept of CSE, VVCE 68
Radhika A D, Dept of CSE, VVCE 69
 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
• In designing a Web site navigation scheme there are two things to always remember
• Never assume that users know as much about a site as the site designers do and any page can
be an entry point into the Web site

Radhika A D, Dept of CSE, VVCE 70

Radhika A D, Dept of CSE, VVCE 71
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.
• 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.

Radhika A D, Dept of CSE, VVCE 72

Radhika A D, Dept of CSE, VVCE 73
Radhika A D, Dept of CSE, VVCE 74
Radhika A D, Dept of CSE, VVCE 75
OTHER WEB SITE NAVIGATION ELEMENTS
• In addition to Navigation bars, several other Web site elements are also important components
of the Web navigation system
• Among these are
• Overviews, including
➢ Executive summaries
➢ Site maps
➢ Indexes
➢ Tables of contents
• Other elements are historical trails and search engines

Radhika A D, Dept of CSE, VVCE 76

Radhika A D, Dept of CSE, VVCE 77
Radhika A D, Dept of CSE, VVCE 78
WEB SITE NAVIGATION GUIDELINES
• Some questions should be answered while
designing navigation schemes for the website
➢ 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?

Radhika A D, Dept of CSE, VVCE 79

Radhika A D, Dept of CSE, VVCE 80
Radhika A D, Dept of CSE, VVCE 81
Links to avoid

Radhika A D, Dept of CSE, VVCE 82

Radhika A D, Dept of CSE, VVCE 83
Radhika A D, Dept of CSE, VVCE 84
• 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

Radhika A D, Dept of CSE, VVCE 85

KINDS OF GRAPHICAL MENUS
• Providing the proper kinds of graphical menus to perform
system tasks is also critical to system success
• The best kind of menu to use in each situation depends on
several factors
• The following must be considered:
➢ The number of items to be presented in the menu.
➢ How often the menu is used.
➢ How often the menu contents may change.

Radhika A D, Dept of CSE, VVCE 86

MENU BAR

Radhika A D, Dept of CSE, VVCE 87

Radhika A D, Dept of CSE, VVCE 88
Radhika A D, Dept of CSE, VVCE 89
Radhika A D, Dept of CSE, VVCE 90
Radhika A D, Dept of CSE, VVCE 91
PULL DOWN MENUS

Radhika A D, Dept of CSE, VVCE 92

Radhika A D, Dept of CSE, VVCE 93
Radhika A D, Dept of CSE, VVCE 94
Radhika A D, Dept of CSE, VVCE 95
Radhika A D, Dept of CSE, VVCE 96
Radhika A D, Dept of CSE, VVCE 97
Radhika A D, Dept of CSE, VVCE 98
Radhika A D, Dept of CSE, VVCE 99
Radhika A D, Dept of CSE, VVCE 100
CASCADING MENUS
• A cascading menu is a submenu derived from a higher-level menu, most typically a pull-
down
• Cascading menus are located to the right of the menu item on the previous menu to
which they are related
• Menu items that lead to cascading menus are typically indicated by a right-pointing
triangle
• Cascading menus are developed to simplify menus by reducing the number of choices
that appear together on one menu
• Cascades can be used when many alternatives exist that can be grouped meaningfully
• The top-level menu may contain the grouping category headings and the cascaded menu
the items in each group

Radhika A D, Dept of CSE, VVCE 101

Radhika A D, Dept of CSE, VVCE 102
• Advantages
➢ The top-level menus are simplified because some choices are
hidden
➢ More first-letter mnemonics are available because menus
possess fewer alternatives
➢ High-level command browsing is easier because subtopics are
hidden
• Disadvantages
➢ Access to submenu items requires more steps
➢ Access to submenu items requires a change in pointer
movement direction
➢ Exhaustive browsing is more difficult; some alternatives remain
hidden as pulldowns become visible

Radhika A D, Dept of CSE, VVCE 103

Radhika A D, Dept of CSE, VVCE 104
Radhika A D, Dept of CSE, VVCE 105
Radhika A D, Dept of CSE, VVCE 106
POP-UP MENUS
• Choices may also be presented to the user on the screen
through pop-up menus, vertically arrayed listings that only
appear when specifically requested
• Pop-up menus may be requested when the mouse pointer
is positioned over a designated or hot area of the screen (a
window border or text, for example) or over a designated
icon

Radhika A D, Dept of CSE, VVCE 107

Radhika A D, Dept of CSE, VVCE 108
Radhika A D, Dept of CSE, VVCE 109
Radhika A D, Dept of CSE, VVCE 110
Radhika A D, Dept of CSE, VVCE 111
Radhika A D, Dept of CSE, VVCE 112
TEAR-OFF MENUS
• A tear-off menu is a pull-down menu that can be positioned
anywhere on the screen for constant referral
• It possesses all the characteristics of a pull-down
• It may also be called a pushpin, detachable, or roll-up menu
• Its purpose is to present alternatives or choices to the
screen user that are needed infrequently at some times
and heavily at other times

Radhika A D, Dept of CSE, VVCE 113

• Advantages/disadvantages
➢ No space is consumed on the
screen when the menu is not
needed
➢ When needed, it can remain
continuously displayed
➢ It does require extra steps to
retrieve, and it may obscure
the screen working area

Radhika A D, Dept of CSE, VVCE 114

ICONIC MENUS

• An iconic menu is the portrayal of menu items or objects in a graphic or pictorial

form
• The purpose of an iconic menu is to remind users of the functions, commands,
attributes or application choices available

Radhika A D, Dept of CSE, VVCE 115

• Advantages/disadvantages
➢Pictures help facilitate memory of applications, and their larger size increases
speed of selection
➢Pictures do, however, consume considerably more screen space than text, and
they are difficult to organize for scanning efficiency
➢To create meaningful icons requires special skills and an extended amount of
time
➢Iconic menus should be used to designate applications or special functions within
an application
➢Icons must be meaningful and clear. They should help enhance recognition and
hasten option selection

Radhika A D, Dept of CSE, VVCE 116

Radhika A D, Dept of CSE, VVCE 117
PIE MENUS
• A pie menu is a circular representation of menu items that can be
used as an alternative to a pull-down or pop-up menu

• Performance advantages for keyboard selection are doubtful,

however

Radhika A D, Dept of CSE, VVCE 118

Radhika A D, Dept of CSE, VVCE 119
DEFAULT MENU ITEMS

• Every system will provide a set of standard menu items

• Using the default items will reduce design time and encourage interface consistency
• System learning time will also be reduced
• Microsoft Windows, for example, provides the following standard and optional menu bar items
and pull-down actions
• Always follow industry standards for naming, menu bar choices, ordering, and keyboard
equivalents and accelerators

Radhika A D, Dept of CSE, VVCE 120

Radhika A D, Dept of CSE, VVCE 121
Radhika A D, Dept of CSE, VVCE 122
Radhika A D, Dept of CSE, VVCE 123
Radhika A D, Dept of CSE, VVCE 124
• These standard menu items also have a prescribed order on the menu bar: File, Edit, View,
Window, and Help
• Items on their related pull-down menus also follow standard orders
• Standard menus and items should always be used when creating an application
• Refer to a system’s design documentation for exact details concerning what menu items are
available and how they are used

Radhika A D, Dept of CSE, VVCE 125

Radhika A D, Dept of CSE, VVCE 126