Syllabus:-

Step 4 Develop System Menus and Navigation Schemes

Structures of Menus
Single Menus
Sequential Linear Menus
Simultaneous Menus
Hierarchical Menus
Connected Menus
Event-Trapping Menus
Functions of Menus
Displaying Information
Navigation to a New Menu
Execute an Action or Procedure
Data or Parameter Input
Contents of Menus
Menu Context
Menu Title
Choice Descriptions
Completion Instructions
Formatting of Menus
Consistency
Display
Presentation
Organization
Complexity
Item Arrangement
Ordering
Groupings
Phrasing the Menu
Menu Titles
Menu Choice Descriptions
Menu Instructions
Intent Indicators
Keyboard Equivalents
Keyboard Accelerators
Selecting Menu Choices
Initial Cursor Positioning
Choice Selection
Defaults
Unavailable Choices
Mark Toggles or Settings
Toggled Menu Items
Navigating Menus
Web Site Navigation Problems
Navigation Goals.
Web Site Navigation
Components of a Web Navigation System
Web Site Navigation Guidelines
Maintaining a Sense of Place.
Kinds of Graphical Menus
Menu Bar
Pull-Down Menu
Cascading Menus
Pop-up Menus
Tear-off Menus
 Iconic Menus
Pie Menus
Default Menu Items
Functions Not Represented by Default Items

Step 4: Develop System Menus and Navigation Schemes

System contains large amounts of information and performs a variety of functions. System must
provide some means of communication to people. This is provided through displaying listings of the
choices/alternatives the user has at appropriate points while using the system/creating a string of
listings leading the person from categories of highest level to lowest level. Lowest level provides the
desired choices, which are called as menus, major form of navigation through a system and also assist
mental model of the system. Menus are effective since they utilize the more powerful human
capability of recognition.
Menus are not without problems.
 New and inexperienced system users find learning large systems difficult.
 Menus viewed in isolation makes difficult to remember the relationship between menus.
 Wrong interpretation of Words and Phrases if relationship between menus understood in
wrong way.
 Ambiguities may not be resolved if menu structure is not understood.
 Users will find effective to work with menus initially but get tedious once they become well
aware of usage.
Graphical and web systems are heavily menu-oriented, varying in form and applications. In graphical
systems menus are used to designate commands, properties applied on object, documents and
windows. When selected, graphical menu item may lead to another menu/window displayed/action
performed. For this menu styles are included in entities called menu bars and menus called pull-
downs, pop-ups, cascades, tearoffs and iconic. In website design common menus include textual links
to other pages, command buttons and both graphical and textual toolbars.

Structure of Menus
Menus range from small dialog boxes requesting the user to choose one of two alternatives to
hierarchical tree schemes with many branches and level of depth. Menu’s structure defines the amount
of control given to the user in performing a task.
Single Menus
It is a simplest form of menu, where single screen or window is presented to seek the user’s input or
request an action to be performed.

Examples are during Internet usage people may be asked if they like to “Stay Connected” or
“Disconnect”, in playing games choices are “novice”, “intermediate” or “expert”. Single menus
conceptually require choices from the single menu only and no other menus will provide additional
choices. User need only to consider about the immediate consequences of the item being chosen.
Single menu may be iterative if it requires data to be entered into it and this data input is subjected to
a validity check that fails. Menu will then be represented to the user with a message requesting reentry
of valid data.
Sequential Linear Menus
These are presented on a series of screens processing only one path. Menu screens are presented in a
preset order and generally objective is to specify parameters/enter data. Length of the path may be
short/long depending upon the nature of the information being collected. All the menus are important
to process at hand and must be answered in some manner by the user.

Drawbacks are
 Long sequence may become tedious as menu after menu is presented.
 User may not remember an answer to a previous question, a question important to the
currently presented choices.
 Process of seeing previous menu to change the answer/look at the answer must be allowed.
 User want to completer menus in different order than which they are being presented.
Simultaneous Menus
Here all menu options are available simultaneously, which may be completed in the order desired by
the user with choices being skipped and returned to later. All alternatives are visible for reminding of
choices, comparing choices and changing answers.
Advantages
 Tedium associated with a long series of sequential menus is greatly reduced.
Disadvantages
 For large collections of menu alternatives screen clutter can easily occur and screen
paging/scrolling required to view choices.
 It should clearly indicate menu choice relationships and dependencies.
 Poor presentation of relationships creates confusion in novice users.

Hierarchical Menus
 In a relationships where some menu options are only appropriate depending upon a previous menu
selection then hierarchical menus are used. Hierarchical structure results in increasing refinement of
choices as menus for example form options to suboptions, categories to subcategories, pages to
sections and subsection. Hierarchical structure can be represented as inverse tree, leading to more and
more branches as we move down. Hierarchical structure is characterized by depth and breadth, depth
is the number of choice levels to reach the destination and breadth is the number of alternatives at the
each level. Common examples are found in menu bars with their associated pull-downs and in web
sites in form of navigation links. It is a top down order and structure of branching. Here top level of
the tree is considered level 0 with subsequent levels numbered sequentially starting from number 1.
Disadvantages
 Defined branching order may not fit the user’s conception of task flow.
 Hierarchies must be consistent with user expectations.
Connected Menus

These are network of menus all interconnected in some manner. Movement through a structure of
menus is between all menus in the network. Here there is no top-down traversal of the menu system,
but an unhindered wandering between any 2 menus of interest. Connected menu system may be
cyclical with bidirectional movement between menus or acyclical with movement only in one
direction. These menus vary in connectivity, extent to which menus are linked by multiple paths.
Example is traversing in hierarchical menus, restricted of connected menus.
Advantage
 It gives the user full control over navigation flow.
Disadvantage
 Its complexity and its navigation may be daunting for an inexperienced user.
Event-Trapping Menus
These 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 a set of simultaneous menus imposed on
hierarchical menus. In graphical system, existing together are simultaneous menu, menu bar and a
hierarchy- menu bars and its pull downs. Event-trapping menus serve one of 3 functions-
1. Immediately change some parameter in the current environment (making bold).
 2. Take user out of the current environment to perform a function without leaving the current
environment (spell check).
3. Exit the current environment and allow user to move to totally new environment (Exit).
These menus can also change content based upon the system state/an event, existing at that moment.
Examples are paste option in word processing application and grid option on pull down. These are
available to establish sense of context/where one is, while things are happening in the foreground.

Functions of Menus
From user point of view menu perform functions like navigate to new menu, execute an
action/procedure, to display information and to input data/parameters.
Navigation to a New Menu
Every user’s selection causes another menu in a hierarchical menu tree to be displayed, with purpose
of moving forward towards goal. Error in selection leads to wrong paths and waste of time, but
damage is limited by undoing the actions.
Execute an Action or Procedure
User selection directs the computer to implement an action/perform a procedure like opening/closing
a file, copying text, or sending a message. In some cases execution may occur after a hierarchical tree
is navigated else cases actions may be performed as successive hierarchical menus are encountered
and traversed. No issues with selection errors but accidental selection of irreversible action must be
prevented.
Displaying Information
It is the main purpose of menu choice. User’s focus is on information desired. In many cases it occurs
after complete navigation in hierarchical menu. Content materials and user’s interests will determine
the path’s fallowed. User’s work hard to know about menu choices, where wrong turn costs time and
aggravation.
Data or Parameter Input
Every selection provides a piece of input data for the system or provides parameter value. Data/values
may be input on a single menu/spread over a hierarchy of menus. Main focus is on the information
being provided with easy correction of selection errors.

Content of Menus
4 elements of menu are context, title, choice descriptions and completion instructions.
Menu Context
It provides information to keep the user oriented. This kind of information is critical in
complex/hierarchical menu systems where loss of position/disorientation occur. Feedback is required
for navigation process as human memory tends to forget a lot. Verbal linkage, spatial linkage or both
may be used to provide navigation feedback. Verbal linkage provides current menu screen, listing of
choices ms ade on previous menus leading to current position, with as desired by user. Its title should
mirror the option selected on the previous menu and its contents should reflect the title. Spatial
linkage is provided through graphical methods. Each succeeding menu screen can be displayed
overlapping the previous menu screen, to see choices in single view. A sense of progress and distance
can then be easily ascertained.
Menu Title
It provides the context for the current set of choices, reflecting choice selected on the previously
displayed menu.
Choice Descriptions
These are the alternatives available to the user, ranging from a mnemonic, numeric or alphabetized
listing of choices to single words/phrases to full sentence/more. Style chosen will reflect the
experience of the user (novice/expert), nature of the choices, nature of selection mechanism
(keyboard/mouse) and nature of the system (business system application/Web page).
Completion Instructions
These tell how to indicate their choices, including rationale for why and impact of choices on
subsequent processes. Explicit instructions may be needed for 1 st time/casual users of a system. The
need of all the system users and nature of the system, must again be considered in creating this kind of
on-screen guidance.

Formatting of Menus
HCI experimental studies with menus, results have been applied on graphical screen and Web page
menu design and presentation. The guidelines for formatting menus are
Consistency
We have to provide consistency with the user’s expectations. We have provide consistency in menu
formatting (including organization, presentation and choice ordering), phrasing (including titles,
choice descriptions, and instructions), choice selection methods and navigation schemes which are
consistent through graphical system/Web site.ll
Display
To display a menu continually/on demand is decided by the menu’s frequency of use. Permanently
display menus that are frequently referenced, for frequent access and memory support. Rarely needed
menus will be presented on request via pop-up or pull-downs. Critical options should always be
continuously displayed. Wright, Lickorish, and Milroy (1994) found superior performance for
permanently displayed menus as compared to rarely displayed menus.
Presentation
Menu and its choices should be immediately recognizable by the user as being a menu of choices,
accomplished through giving the menu a distinctive and consistent structure and presenting it in a
consistent screen/page location. Presentation techniques must be compatible with those used for other
purposes on the remainder of the screen. A good way to set a menu off from the remainder of the
screen is to enclose it in a box/display using background contrasting with the remainder of the screen
techniques chosen should be consistent throughout the system. Scattered web page navigation links
are displayed underlined with unique color, with not underlined system components.
Organization
In organizing a menu goal is to simply and effectively reveal its structure, with reduction in number of
actions needed to locate the target. These are
 General Menu—top level menu in hierarchical menu should be a general/main menu with
basic system options, providing consistent starting point for all system activities.
 Relevant alternatives--Inclusion of irrelevant alternatives increases learning requirements,
interfering performance. 2 alternatives to this rules are inactive alternatives may be displayed
along with conditionally active choices by highlighting the active choices and subduing the
inactive choices. By completely removing the irrelevant alternatives we can get better
performance. Mayhew (1992) suggested that while deletion does provide an advantage to
expert users of keyboard-driven menus, graying out seems to be advantages in systems using
pointer-driven selection devices.
 Matching menu structure to the tasks—menu should be organized according to the tasks
structured by people, reflecting the sequence of steps to reach goal.
 Minimize number of levels—in creating multilevel menu structure is decided by how many
items will be placed in one menu (breadth) and levels consumed (depth). Generally greater
the bandwidth less will be there depth and vice versa.
Advantages of menu system with greater breadth and less depth are
Fewer steps and shorter time to reach objective.
Less chance of going wrong paths.
Easier learning by allowing user to see relationship of menu items.
Disadvantages of broad menus are
More crowded menu reduces clarity of the wording of choices
Increased confusion between choices as they are seen together.
Advantages of greater depth are
Less crowding on the menu.
Fewer choices to be scanned.
Easier hiding of inappropriate choices.
 Less chances of choices seen together eliminating confusion.
Disadvantages of greater depth are
More steps and longer time to reach objective.
More difficulties in predicting relationships between menus
More chances of going in wrong paths.
Higher error rates.
According to case study breadth is preferable to depth in case of greater speed/fewer errors,
with 2 or 3 levels and 4-8 choices leading to faster and accurate performance. Other study
shows that menu could contain 64 items well organized in logical groups. In website design
zaphiris and Mtei 1998 and Larson and Czerwinski 1998 found that 2 level web site are
searched faster than those containing more levels.
 Limit the number of choices-- we should be conservative in number of menu choices
presented per screen. In case of choices not grouped logically number of menu choices must
be between 4 to 8, in case of choice grouping 18 to 24 are allowed with no more than 10
choices in one group. Mayhew (1992) suggested that if menu choices are complex with no
grouping of items choices should be less than 10, in case of noncomplex menu with casual
users choices should be within 20 and in case of noncomplex menu with expert user’s choices
can be greater than 21.
 Provide decreasing direction menus—in addition to breadth and depth, direction also affects
the menu choice selection process. In multilevel menu, decreasing direction structure presents
successively less choices as traversed. Increasingly direction structure presents more choices
as traversed. Bishu and Zhan (1992) in a study of 16 and 32 item iconic menus found
decreasing direction menus were significantly faster and more accurate than increasing
menus.
 Scrolling—all choices of menu should be visible all time without scrolling.
 Easy to restructure—menus must be redesigned since all users are not same.
Complexity
By providing 2 sets of menus we can effectively satisfy the differing needs of the novice and expert
user. Novice user require minimal set of actions and menus to complete the task whereas expert user
requires all the options. Making selection and changing between simple and complex menus can be
easily done through menu bar choice. IBM’s SAA CUA refer to these menus as short and full.
Item Arrangement
For scanning purpose menu choices should be left justified and aligned vertically into columns which
are searched faster than horizontally oriented menus. Do not array a menu in multiple columns. Space
constraints occurs when menu are included on other screens. If a single-row (horizontal) orientation is
required, organize for left to right reading. For more rows to be displayed, organize for Top to bottom,
then left to right reading to facilitate visual screening.
Ordering
In menus where categories are not possible, options must be ordered in meaningful way. When a
menu contains multiple categories of information, ordering of categories will fallow same principles.
Meaningful ordering is necessary to
 Facilitate search for an item.
 Provide information about the structure and relationship 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.
When items are organized with some dimension/characteristic, user can use that information to locate
items faster. An alphabetical list provides an indication of approximately where the listing an item
beginning with a particular letter will be found. Months of the year presented in alphabetic order will
be very disrupting. Hornof and Kieras (1999) in studying how items are selected from pull down
menus found that people make initial eye and mouse-positioning movement towards the expected
choice location before the pull-down menu appeared on the screen. Choices in the top 3 positions of
the pull-down were selected faster than other positions. Experienced user will be faster in anticipating
command position and clicking on it when it appears on screen.
According to Byrne, John, Wehrle and Crow (1999) people search flowed from menu top to bottom
and initial eye fixation focused on topmost menu position.
Common ordering schemes for menus are
 Natural ordering—items with natural sequence are chapters in a book, months in a year and
this should be fallowed. Screen viewer also know this order as well.
 Numeric ordering—use this for choices associated with numbers like type size, baud rate or
number of pixels.
 Small number of options—for groupings with a small number of options (7 or less) sequence
of use, frequency of use or importance are good ordering schemes. Consider ordering by
semantic similarity with semantic dimensions like impact, potency or emphasis. Type style
may be ordered by emphasis from least to most regular, underlined, italicized and bold.
 Alphabetic order—it is desirable for large number of options with also for small lists with no
frequency/sequence pattern. Here search can be made faster, where 18 item alphabetic menu
are visually searched 4 times faster than random search. Search time was a function of
saccadic eye movement through the display, with fewer movements required with alphabetic
arrangement.
 Separate destructive choices—destructive menu choices like delete/clear must be placed far
away in menu choices to avoid accidental click.
 Do not reorder menus—computer system is adaptive in any conditions. Static or fixed menus
with dynamic menus.
 Consistent between menus—options found on more than one menu should be consistently
positioned on all menus. For menus of variable length, relative positioning of all item should
be maintained and for menus of fixed length place options in same physical menus.
Groupings
Create groupings—items displayed on menus should be logically grouped to aid learning and speed
up the visual search process. Logically created menus are easier to learn resulting in faster and
accurate performance. Categorical organization provide the transition from novice to expert user due
to visual presentation.
Categorizing—groupings should also cover all the possibilities and contain items which are non-
overlapping. Some collections are easy to partition to group where some will be complex due to lack
of experience and understanding of organizational framework, requiring extensive training and
refinement of solutions.
Number—limit the number of groupings on a screen to 6 or 7, with total number of items within all
groupings be between 18 to 24.
Ordering—groupings of menu items may be ordered according to guidelines provided, with
alternatives like alphabetic, sequence of use, frequency of use, importance and semantic similarity.
Arbitrary visual groupings—uncategorized menus should be broken in arbitrary visual groupings with
use of space/lines. Group should be as equal in size as possible with 4/5 options and not more than 7
options.
Separation—perceptually separate groupings by a leaving a wider spacing between groupings/by
inscribing line separators between groupings.
Critical choices—these should be accessible as quickly with few steps, placed at highest level menu.
Line Separators
Inscribing subtle solid/dashed lines between groupings will reinforce groupings and subgroupings of
vertically arrayed related choices. For breaking subgroupings within one category, line/lines should
only extend from the 1st character of the descriptions to the end of the longest description.
Many graphical platforms extend the line from menu border to border.

This results in too strong a visual separation between what are related menu parts, with limited visual
separation. For independent groups of choices, extend the horizontal line from menu border to border,
indicating to the user that the groupings are independent of each other.
Phrasing the Menu
Menu must communicate to the user information about nature and purpose of the menu and
each presented choice with selection of proper choice/choices. Writing the content of menu
components, menu’s title, choice descriptions and instructions is complicated by different
experience level of menu users with desire to explain everything on the screen in great detail.
This leads to screen space constraint and limits user readability. So we have to choose
between thoroughness and brevity. Hierarchical menu system provides user a sense of place
and user must predict where the menu click will lead in the application with its impact.
Menu Titles
Meaningful menu aids in defining menu context and increases menu comprehension. In experimental
study, study participants were presented the detailed steps to perform a function. A descriptive title for
the steps was (A) not included, (B) presented at the start of the steps and (C) presented at the end of
the steps. Participants selected B with higher comprehension and recalled twice as many items as
those were not given in A/C.
Main menu—menu title should immediately orient the viewer to the menu’s content and purpose. It
should be short, clear, distinctive, and descriptive title, representing the entire series of choices. It is
an important contextual and navigation component.
Submenus—these titles must be worded exactly the same way as the menu choice previously selected
to display item, providing structural continuity and assure correct progress in menu hierarchy.
General—Locate the title at the top of a listing of choices, in the title bar if one is available. Display
title in uppercase/mixed case font using the headline style of presentation. In headline style capitalize
the 1st letter of each significant title word. Chosen case style should be consistently used on all menus
and Superfluous titles. Pop-up menu requested during a text editing task is displayed within the
context of the task being performed. Presented choice descriptions by themselves provide necessary
context.
Menu Choice Descriptions
Meaningful—these should be composed of familiar and fully spelled out words. Abbreviations should
be used minimally with standard ones. It should be concise, containing few words as possible which
are distinctive providing choices different from each other. Repeated choice of words in multiple
choice descriptions create need for grouping whose title is based on the repeated word. Use high
imagery keywords eliciting mental image of object/action. Avoid low imagery words with more
general connotations. Description chosen by the designer will have different meaning to the user, with
probability of same name in range of 8 to 18%.
Size—these may be single words, compound words, multiple words or phrases. Menu bar item should
be single word, in case of 2 words join them by using hyphen. Web page contents links will be
phrases.
Keyword first—for multi-item descriptions descriptive and unique words must be at the beginning,
which optimizes scanning and recognition while the user is learning the menu.
Capitalization—use headline style of presentation. Capitalize 1 st letter of significant word.
Task-oriented wording—it is preferable to data-oriented wording where verb is placed first like
manage customer information. Example of data-oriented wording is customers.
Parallel construction—when choices are composed of phrases, use this in creating descriptions for
related choices. Example are print a File, Execute a Program, and Eject a Disk. Examples of non-
parallel construction are Print, Execute a Program and Disk Eject.
Relationship to title—menu choice must never have the same wording as the menu title which is
presented.
Consistency across menus—identical choices on different menus should be worded the same.
Numbering—items should not be numbered unless listing is numeric in nature, graphic or a list of
varying items.
Command language—if menu options are used in conjunction with a command language then
capitalization and syntax of the captions should be consistent with command language.
Word as a command to computer—phrase all menu choices as commands to the computer whenever
possible. Say choose one of Save and exit or Exit without saving. Yes/no alternatives must
comprehend with question being asked.
Menu Instructions
Unfamiliar user of system and its menus need guidance on menu completion, balancing with needs of
experienced users who do not require assistance. Menu instructions in menu will be often neglected
by users.
Novice/inexperienced users—provide explicit menu completion instructions for them, placed
preceding the menu where it is applied. It should be left justified and related menu choice descriptions
must be placed minimum 3 spaces to the right. Leave a space line between instructions and choice
descriptions. Instructions can be presented in a mixed case, sentence-style font.
Expert users—menus instructions in menu must be highlighted for easy reading or ignorance of users.
For easy identification on instructions use different font/color with controlled use of font styles.
Identify the technique simply by its location, preferred with left justification. Leave a space between
the instructions and the elements where related.
Intent Indicators
Providing an indication of what will happen when a menu item is selected will enhance predictability
and exploration of a graphical system. If choice leads to another lower-level menu, include a cascade
indicator, a right pointing arrow, fallowing the item description. If choice leads to a window, include
an ellipse fallowing the item description. Items causing a direct action will have no indicator.
IBM’s SAA CUA designates choices leading to submenus/windows as routing choices and items
causing direct actions as action choices. Microsoft intent indicator simply implies additional
information needed, presented in window.
Keyboard Equivalent
Keyboard selection— ability to select a menu alternatives through the keyboard should always be
provided by providing a keyboard equivalent for each menu alternative.
Mnemonics—keyboard equivalents with meaningful associations of choices will be more easily
learned and remembered. Simple truncation is a good method for creating mnemonics. 1 st letter of the
item description is the recommended mnemonic. Duplicates can be overcome with alternative
principle. Use second consonant for duplicate items.
Designation— Mnemonic codes can be visually indicated in number of ways. Recommended method
is an underline beneath the proper character within the choice. Other methods are a different
character, color, different character intensity or a contrasting color bar through the relevant character
should be avoided.

Industry standards— standard industry keyboard equivalents have been established for many common
system menu choices, fallowed where its equivalent are established. Microsoft windows calls
keyboard equivalents as access keys. Standard keyboard equivalents are
Keyboard Accelerators
Accelerators are keys/combination of keys invoking an action regardless of cursor/pointer position,
used to activate a menu item without menu opening useful for experienced users. IBM’s SAA CUA
and Microsoft windows calls these keys shortcut keys/hot keys. Many products have, within their
guidelines standard accelerator key recommendations with rules for creating new accelerator keys.
For frequently used items, assign a key/combination of keys to complete an action. Pressing no more
than 2 keys simultaneously is preferred, 3 keystrokes is maximum. Use + sign to indicate to indicate
on the screen menu that 2/more keys must be pressed at same time. Accelerators should have some
associative value to the item and identified by their actual key-top engraving. In conditions where
multiple kinds of keyboard exist with different terminologies, use most commonly used term on the
keyboards/use the term contained in the newest PC. Display the accelerator right aligned and
enclosed in parenthesis to the right of the choice. Within parenthesis means that they are just prompts
with easy ignorance when not being used. Without parenthesis display provides strong visual
emaphasis.
Do not use accelerators for menu items that lead to cascaded menu and also not for pop-up menus
since they are mouse driven. Use standard keyboard accelerators when they exist. Standard industry
accelarators are

Selecting Menu Choices

Menu items can be selected by pointing at the choice using mechanical pointer, pointing through
keyboard/keying a value designating the choice.
Initial Cursor positioning
When a menu is first displayed, position the cursor at the option likely to be chosen or at the first
option of the list. In case of repetition position at the first option of the list.
Choice Selection
Pointers—item can be selected by pointing using a mechanical device like mouse, trackball, light pen
or through finger touch. Pressing a key like transmit/enter, mouse buttons signals the choice to the
computer. Visually indicate which options are selectable and when the option is under pointer & can
be selected. Sufficient target area should be provided, with twice the size of the active area of the
displayed pointer of the pointing device. It should not be less than 6mm2. Separation between
selectable areas must be provided to avoid clicking wrong choices. For finger pointing method we
need larger area with minimum of 20 to 30 mm used in casual condition.
Keyboard—if the user is moving the screen cursor to a menu choice, up and down arrow keys move
the cursor up and down a vertical column of menu options. Left and right arrow keys should move the
cursor left and right across a horizontal array of options. If the user is 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. For
mnemonic values entry should be acceptable in any case.
Selection/execution—provide separate actions for selecting and executing menu options. Requiring
typing the mnemonic to select, and then press enter/return key to execute, or with mouse require
moving the pointer to the option to select and then clicking to execute. Always permit erroneous
selections to be unselected and in multiple choice menu permit all options to be selected before
execution. The item selected must be highlighted in ways like making bold, changing its color.
Combining techniques—permit alternative selection techniques for flexibility. For pointing method
also provide keyboard for task completion. Pointing will be preferred by novice and expert user prefer
keyboard alternative.
Defaults
Defaults support system learning and enhance efficiency with maximum support. Indicate default by
displaying it in a bold text.
Unavailable Choices
Choices unavailable to the user should be made visible by dimming them or graying out them, not
competing with active items for the user’s attention. Items should not be added/removed from a menu
unless explicit action taken by user. System changing menu items lead to user confusion.
Mark Toggle or Settings
Purpose—mark toggles/settings as shown below with menu items that toggle between active and not
active.

When it is active, an indicator is displayed adjacent to the item description. For nonexclusive choices
check mark is displayed. For mutually exclusive choices diamond/circle is displayed. When item is
not active, no mark/symbol will appear. Examples are application automatically loaded after the
system is loaded, having windows automatically reduced to icons when they are made
inactive/making a setting without requiring dialog box. Purpose of mark toggles is to
activate/deactivate an attribute by setting one menu item.
Advantages
 It provides a visual indication of the state of an item.
 They are accessed quickly.
 Provide good reminders of the state that exists.
Disadvantages
 They are not always visible.
 Best suited to items/features that remain active/inactive over long period of time.
Toggled Menu Items
Purpose—a toggled menu item is a one menu item command which toggles back and forth between
the current state and its alternative state. When the menu item is first displayed. It reflects the
alternative state to the condition that currently exists. Example is shown below

If a background grid is currently being displayed, menu item reads Hide Grid. When Hgatioide Gris is
selected grid is removed from the window and menu item automatically changes to reflect the
opposite action Show Grid. Purpose here is to use a single menu item to designate and activate the one
opposite.
Advantages
 It decreases visual clutter, providing quicker access and foster faster comprehension of the
command action.
Disadvantages
  When they are located on pull-down menu actions are not visible.
 Opposite actions are not always visible.
 Limited in use to commands only.
Guidelines
Use toggled menu items to assign 2 opposite commands which are used frequently. Menu item
displayed must clearly indicate other opposite condition currently exists. Menu captions should
clearly state what would happen if menu item actions are requested. Commands must begin with verb.
Navigating Menus
Navigation and efficient navigational structure is the most important element in system
usability. Simple and clear navigational structure is the backbone on which on system
features are draped. Successful websites are due to better navigational systems .Systems
organizational structure with its navigational tools, including elements like menus, links,
toolbars and command buttons influence system navigation ease of use. Incompatible
relationships strain navigation ease.
Web Site Navigation Problems
Here we see navigational issues and problems, both technically and usage-related.
 Technical issues—in web application pages of each can be linked to any other pages in the
application. Web users can perform tasks/satisfy needs at will, easily moving between most
screens in the application in order desired. It is like driving to new location without map
assistance. Web user must handle 2 navigational systems, each with browser and web site
respectively. Click on the browser back button shifts user to previous menu without user
notice. For moving around links should be textual or command buttons. Web novice users do
not recognize where browser ends and web site application begins. Due to rapidly evolving
nature of web, web sites also grows causing problem to the structure of the web and its menu
scheme.
Feature Graphical application Web application
Flow of control Screens tend to flow in Each page can be linked to
orderly and predictable any other pages without
manner order.
Task completion Begins a process at Web users complete task at
prescribed starting point and will at their defined order.
proceed sequentially until
completion.
Operating system Deal with only one OS with Deal with 2 navigational
consistent and standard systems which are of
navigational characteristics. browser and website.
Data Data and control are separate Here data is part of control.
items.
 Usage problems—2 most serious user problems in Web navigation are heavy metal loads
imposed to use the web and feeling of spatial disorientation occurring often. The
cognitive/mental overhead user must expend in making decisions concerning which link to
fallow/to abandon can be overwhelming. Links with unclear meaning will be present in the
website. Links frequently offer few clues about where they lead, amount of information found
and how the information is linked to current application. For reaching goal every link must be
related to tasks, with few of them away from the task leading to trial and error methods.
Feeling of disorientation are easily experienced when user becomes lost is web space. Most
people are not familiar with the layout of the sites/develop useful mental models of their
structure (spool, Scanlon, Schroeder, Snyder and DeAngelo 1997). Many people do not
understand where they are in website’s information structure (Neilson, 2000). Scrolling page
can lead to toss of local context when basic navigational elements like link to other page
disappear. Long chains of links to reach relevant material can be tedious and also leads to loss
of context with success rate of 60%.
Navigation Goals
Well-designed navigation system provide quick and easy navigation between components whose
structure and relationship are easily comprehendible. User questions obvious at all times are where am
I now?, where did I come from?, where can I go from here? And How can I get there quickly?. This is
referred ad wayfinding with proper navigational tools minimizing the overhead problems. General
system navigation guidelines are
 Control— navigation through menu levels must be accomplished through simple actions. It
should always be easy to return to next higher-level menu and the main. Menu. Use
hierarchical menu structure to provide multiple pathways.
 Menu Navigation Aids—
Menu maps—it is difficult to maintain sense of position in multilevel menu system. Menu
maps usage reduces disorientation, presented to user online/hard copy lead to few
errors/wrong choices, faster navigation and greater user satisfaction. Menu maps must be
included at the top level menu screens and also included in system documentation 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 selecting current choices. As the cursor moves over the menu bar
pull down menu may be automatically dropped. These are useful to check ambiguity at higher
level, to decrease error and improve satisfaction.
Navigation history—by knowing path fallowed we can increase learning and performance
with decrease in disorientation. Provide navigation history that summarizes the menu choices
made leading to the currently displayed menu/screen
Web Site Navigation
Understanding of web sites navigational scheme is difficult because of less perceived
structure than graphical system application. Web pages can be of any length and possess any
number of links to any number of other pages. User can wonder at will through multitudes of
links, pages and web sites. Potential of getting lost is high unless important landmarks are not
provided as guide. In designing a web site navigation scheme 2 important things to remember
are never assume user knows as much as the designer about the site and any page can be
entry point in the website.

Web site Organization

it is easier to develop a clear and comprehendible navigation scheme with well-organized
web site. Design goal is to balance between menus and pages for efficient navigation.
Logical fragments, units, or chunks—due to limitations in short-term human memory, smaller
discrete fragments/chunks of information are easier to navigate then longer ones. Concept
employed in web site design for this problem is called hypertext, which is a nonlinear way of
organizing information based on principles like
 A large body of information exists that can be organized into fragments.
 The fragment relate of the fragments to one another.
 The user needs only a small fraction of the fragments at any time.
In organizing a web site, information is first divided into logical fragments units or chunks.
Coherent chunks focusing on a single topic is the desired goal, which are easier to organize
into the modular groups of information composing the organizational scheme.
Hierarchy of generality or importance—after identifying the information units, information is
now organized in according to importance of generality from general to specific. Hierarchical
tree is recommended scheme. Sun Microsystems (1998) suggests that whenever possible
 State conclusions and link to supporting details.
 Enumerate categories of information and link them to detailed listings.
 Summarize information and link to full-length treatments.
A document organizational tree structure (table of contents, chapters, sections and
subsections) is a good scheme, since people are familiar and have an excellent mental model
of the organization. These structure provides information about information sequence,
information quantity and the relationship existing between components. Other organizational
schemes is topics fallowed by subtopics or prioritization from most to least important, with
scanning of pages fallowed by selection of relevant pages.
Structure of relationships— identify the relationships existing between various elements of
hierarchical tree. In large website 2 levels of navigation will exist. First movement is within
the subject area where movement is within a branch—up to parent page/down to a child page,
with movement across branches to sibling pages/other sections of a site. Second navigation
type is global/site-wide where features like searching a facility, site-maps and other major
content areas are mentioned. To unveil website’s structure use progressive disclosure.
Different heading levels are useful in understanding site organization.
Hierarchical tree— website pages should be organized as offshoots of a single home page.
For large information arrange information in form of categories with contents. Design goal is
to provide well-balanced hierarchical tree facilitating quick access to all information and also
assist people to understand organization. Spoke design where every page is linked to other
pages lead to lower usability. According to Zaphiris, Mtei, Larson and Czerwinski (1998)
restrict hierarchical tree to 2 levels requiring no more than 2 clicks to reach the deepest
content.
Components of a Web Navigation System
Navigation links are required for movement in web site, contained within a framework of
tools/controls including browser’s command buttons, textual phrases, web site navigation
bars and web site command buttons. Links functions as a menu choice when selected results
in information being displayed/file being opened or downloaded. Movement link may
transport the user to another location within a page, to a new site page, or to another web site.
Links were created using hypertext with textual/binary file, expanded with hypermedia. Links
give the user an idea of what a web site, document or page is all about. User should know
what will happen when clicked, to determine to fallow link or not. Extensive collection of
links will make user to focus on web site itself and its contents. The general link guidelines
are
 Sensible—all navigation controls in absence of site context, make sense to the user.
User may have lost the context/page/web site entered from anywhere.
 Available—all navigation controls must be easy to access.
 Obvious and distinctive—appearance of link must immediately suggest that it must be
clicked/selected, made possible by tools appearance and its location. Do not make any
other screen element look like a navigation tool. The obviousness of a link is called its
affordance. A control with high affordance will be quickly identified as control.
Bailey (2000) in a study compared the link affordance of the home pages for 2 large
websites, with each page contained 29 links, which had affordance rate of 97 and 76
respectively due to difference in obviousness. Techniques to create required
affordance and distinctiveness differ upon kind of link.
 Consistent—like all elements of the interface, navigation links, toolbars and command
buttons must be consistent in appearance and behavior.
 Textual—all navigation must have a textual label/description, which is preferable
over unclear graphical-only navigation which take long time to download.
 Provide multiple navigation paths—offer multiple paths/ways to move around web by
providing structural components like site maps, table of contents and indexes. Use
command buttons like Next and Previous for sequential movement.
Browser Command Buttons
Browser used for interacting web has its command buttons. Moving back and front in
browser create confusion to use and sometimes may come out of website itself. Novice users
will not recognize where browser ends and application control starts and vice versa. We can
provide navigation control within the application with command buttons like Next and
Previous.
Web Site Navigation Bars
Web site navigation bar is a menu, an array of textual phrases, graphical images or icons or
command buttons as shown below

Web site contains at least 3 levels of navigating links

 Global/site wide links indicating site’s total scope/categories of present information.
Locating at the page top makes sense for logical flow of information, resulting in
display of page and its content in top to bottom sequential eye flow. For long
scrolling pages repeat important global link at the bottom for easy navigation.
 Local specific navigation links within the category/topical area being displayed.
Category navigation area should be left justified, where after completion eyes point
towards right. . For long scrolling pages repeat important local link at the bottom for
easy navigation.
 Minor illustrative, parenthetical or footnote links. Navigation links placed on right
side of the screen would be placed next to scroll bar drawing attention. Vertically
arrayed category navigation listing is both space consuming and time consuming.
Textual Phrases
These are the words/short piteces of highlighted text serving as links. It has 2 distinct
structures, explicit and embedded. Explicit menu is a listing of textual phrase links set apart
from the main page content in toolbar, usually including links to various web site topics, link
to site global features resembling screen menu arrays in their structure and presentation.
Embedded menu is a link within the textual content of page. Certain words/phrases are
designated as links, highlighted and selected. Websites contain both in various mixes.

Lai and Waugh (1995) compared 3 menu structures, menus composed of solely of explicit
listings, solely embedded menus and mixed explicit and embedded menus. Best menu
structure was determined by the kind of search task done. Explicit listing worked better for
straightforward search tasks, menus with embedded links worked better for complex search
with accuracy not efficiency. Mix of menus will best satisfy needs of all site users.
Graphical Images or Icons
These appear in an array in the form of navigation bar/be individually located at relevant
points in a page.
Command Buttons
These appear in an array in the form of navigation bar/be individually located at relevant
points in a page.
Other Web Site Navigational Elements
Other important components of web navigation system are overviews, historical trails and
search engines.
Overviews
It provides a top level view of a site’s organization and content. Having an understanding of
how a site is organized, landmarks available within it and the content it contains, help
navigation process. These are most useful if provided in several forms, needed during web
interaction and before start. A graphical system help function may be available in tutorial
form, accessible using topics/ alphabetic form for easy scanning. An executive summary will
provide an overview of the site in narrative form and contain links to all major concepts. Site
map will illustrate the site’s hierarchical structure in either graphical/textual form. Maps may
be made available at both a global/local level within the site, depending upon the site’s
complexity. Alphabetized site index permit quick access. Table of contents permit review of
major topics and subtopics within.
Historical Trails
Historical navigation shows the user’s position in an information space by showing where
they have come from. Navigation path usage enables user to see the context of currently
displayed page. Bread-crumb trial in hierarchical web site structure is sequential textual
listing of pages traversed from the parent page to the current page.

Here the figure shows series of links permitting user to go back to any page in sequence with
one click. Symbols used are ->, :, > or /.
History list is a sequential textual listing of sites/pages visited over a specific time period, a
session, a day or some other time period.
History tree is an overview map of a site’s structure with pages already visited marked by an
indicator +, * or check mark. Marking serve as footprints guiding the user back to pages of
interest.
Bookmark is designated by the user to mark locations of continuing interest.
Search Facility
Site search facility with large sites is better than used in smaller sites.
Web Site Navigational Guidelines
Questions addressed are
 How many links should exist on a page?
 How should textual links be presented to make them obvious?
 What kind of links should be included on a page?
Scrolling
Navigation-only pages should never be scrolled making selection process easier. We should minimize
the need to scroll to see all links. All related links on a screen must be seen together to facilitate
comparison. Never require horizontal scrolling making text reading difficult and user dislikes it.
Number of Links
One link—at a minimum every page should contain at least 1 link. Dead-end page usage is
useless and frustrating.
Conservative number—complexity of site and its contents decides number of links presented
on a page. Menu research indicates that without choice grouping link should be limited to 4
to 8. With groupings limited to 18 to 24. In web design links are from 8 to 12. More links in a
page lead to more decisions and ambiguity. It is not required to mention all the features of a
site on all pages. Present most important site content or useful features.
Embedded links—here we address linkability vs readability. These can be distraction and
reduce readability, when used in abundance. These are overlooked in text scanning. These
provide more meaningful context, adjacent phrases or sentence words being useful in link.
Incorporate embedded links in moderation. Use them for most important, pertinent and
interesting document points.
Presenting Links
Links must be easy to find and never be confused with other screen graphics/textual content.
Searching for link and moving too down to see new things is tedious.
Link text—to identify a link, convention is to underline the link text. All link text must be
underlined including embedded, explicit listings, headings and graphical images.
Unselected/unvisited links must be distinguishable from selected/visited links. We have to
use default colors of blue for links already visited and purple for unvisited.
Kind of links— visually distinguish links leading to different destinations. A link that simply
moves within a page/link that moves to another web site is aggravating for nonresponsive
moves. Links destination should be predictable as the content at other end. In order to
distinguish different links it should be preceded with unique symbol. Precede link to content
within the same page with # (pound) sign and also for links moving down to content
downward. For links moving to content upward in the page use #^ (pound with upward
pointing arrow). For links to external/foreign sites precede the text with * (asterisk). For links
to other site pages symbol is not required. Designation of different destinations can also be
accomplished by grouping links by kind with descriptive heading and placed in unique and
consistent locations in page.
Graphical links— with less care, graphical links may be confused with decorative graphics.
Principle of graphical/icon design is always provide a text label. Distinguish graphical links
by underlining the graphical text labels.
Links in toolbars—distinguish links contained in toolbars from page content by presenting
the toolbars in consistent locations, and/or displaying them in backgrounds of a contrasting
color to the page content. Global toolbars must be at the top of a page. Topical toolbars are
arrayed down the left side of the page. Toolbars with textual listings contrasting less with
textual page can be presented in background with matching content.
Links to be avoided are below
Other Link Guidelines
The guidelines fallowed are
Writing—people using web sites are of broad range of needs and interests. Links must satisfy
extreme goals. Redundant links satisfy varied needs. Link should be descriptive with user
able to predict where the link will lead.
Grouping—place links of similar purpose and function together, with relevant grouping
scheme. In web navigation links to be separated are—upward to the immediate parent page,
upward to beginning of the presented section, across to main sections and to basic utilities.
Ordering— arrange the links by most relevant menu-choice-ordering scheme like importance,
frequency of use or sequence of use.
Headings—when appropriate provide an introductory word/phrase at top of the link list as
heading. Inform viewers about list organizing category/principle/theme.
Size— to achieve balance create a visually pleasing composition, make all links readily
identifiable as links, create icons and command buttons of equal size. Explicit listings of
textual links must be of same size.
Spacing— to achieve a balance and visually pleasing composition, all groups of links
composed of icons, command buttons, listing of textual links should be equally placed.
Inapplicability— irrelevant links should be disabled and displayed dimmed out.
Kind of Links
Within a page—for long pages include links to for important content within the page, by
placing them at the top of the page identified by heading/symbol.
Within website the links included are:
Home page—home link will transport the user directly to the site’s home page, stable and
safe anchor point in worst cases. It provides easy access to user at star or new navigation.
Home link avoids sequential backward movement up through series of pages.
Global features—provide links to site’s global features including highest level of information.
Other main pages, navigation points, sections or categories— do not link to all sections of the
site from all pages. Provide easy navigation throughout a site, provide links to a site’s major
navigation points and sections. Pages linked must possess substantive content.
The likely web site starting point—provide links to the site’s likely starting point, home
page, a site map or an index.
Main pages with links to page— provide links back to the main pages that have links on the
displayed page. Return link describing the page one is going back provides better
predictability and clearer context. It also provides escapability.
For sequential pages, provide easily accessible links to adjacent pages:
Next— place Next link at the end of each page, with explanation possible. Without this user
is forced to refer a table of contents/menu listing for navigation.
Previous—previous link is used to return to prior page in the website structure. This will
facilitate movement through a site for those entering from another web site into the page.
Leafing backward will be easy. Locate this at the end of page and for long pages include at
page top.
Other links are
Places of related interest—provide links to other pages with related content. Wherever the
user’s attention is likely to be captured, provide a direct link to related places. Search facility
should be refined with links to correct answer.
Important pages— provide links to important/high-priority areas/pages for better viewing of
user.
Background/explanatory information—provide links to background or explanatory
information to assist users with less knowledge. Every page must be treated as independent
and content must be understood based upon on the assumption that user has seen no other
related pages.
Supplemental information—use links to provide information like definitions of terms and
abbreviations.
New/changed content—draw attention to new/changed content by making it easy to notice
and go directly to. Ex is what’s new?
Quit/Exit—web has no way to stop running an application without closing the
browser/leaving a link. Non-web platforms have exit paths in form of Quit/Exit on the file
menu. This command may be included on a special page showing external links and other
useful information. Provide external links to other relevant web sites and information sources.
Informational sites— links to external/foreign sites are most appropriate for informational
sites, where browsing is main purpose.
Related content— provide links to relevant information on other web sites including sites
with similar content mentioned in your web site. Also provide links to other resources,
repositories, reference information and background reading.
Separate page— whenever possible locate links that go outside of the web site on a separate
page, by this we are not disrupting the flow of the displayed pages and get better review.
Outside indication—identify links leading away from the site by a heading/unique symbol
with information to users.
Link Maintenance
With modification in sites, internal links may have to be revised. Check sequential pages if
Next and Previous links are used within the site. External links should be thoroughly
checked. Web’s content, location may change so it has to be maintained.
Maintaining a Sense of Place
A site’s organizational structure is complex with nonexistent boundaries. Navigation links
transport person from one location to another, leading to confusion. One’s location must be
continually reinforced since people need stability and assurance where they are. Paper
documents create a sense of where one is located through graphical and textual cues provided
by book. Cues are also provided by the organizational scheme outlined in table of contents.
Electronic documents provide physical cues. To provide a sense of place, plentiful and
explicit cues relating to site context and organization must be provided, which are included in
the web site.
Design Characteristics That Aid in Maintaining a Sense of Place
Within a web site—a simple hierarchical tree structure with obvious and linked major
categories is easily understood, with easy identification of site features and ease of movement
to them.
Across multiple web sites—design consistency contributes significantly to maintaining sense
of place when one is moving between multiple sites. It gives a site a unique look and feel that
become obvious as links are fallowed within it. Moving to a new site is evident when design
scheme changes. Consistency is graphical identity scheme, use of colors, patterns, graphic,
font style, component presentation, organization and location is also important.
Design Elements That Aid in Maintaining a Sense of Place
Home base—it is stable, concrete and safe anchor point in difficult times.
Recurring navigation tools—standard navigation tools should appear on every page.
Recurring tools create a more stable page environment, enhance navigation learning and
increase user’s control.
Recurring page elements—repeated page elements like titles, banners, logos and icons also
create site uniformity. Omanson, Cline, Kilpatrick and Dunkerton (1998) found that page
elements that most significantly aided user orientation was the site logo.
Page numbers—for a long series of sequential pages provide page number on each page to
indicate where in the page string one is located. Another useful feature is to convert page
numbers into links and present on each page
1 2 3 4 5 6 7 8 9 10 11 12
An estimation of document length is obtained and pages need not be viewed in sequential
order.
Ongoing feedback showing location in web site—provide an historical trial like breadcrumb
trial showing user location within a branch of a site. Easy return to any page is possible.
On-demand aids illustrating location—navigation aids like site map/table of contents when
retrieved should show exactly where the user’s location within the structure site. Current
position should be highlighted with the presented information structure. Site map can also be
used
Clearly written links—labels that clearly indicate the function of the link, destination or its
resulting action, reduces disorientation.
Kinds of Graphical Menus
Best kind of menu to use in each situation depends on factors are
 The number of items to be presented in the menu.
 How often the menu is used.
 How often the menu content may change.
Menu Bar
Highest level graphical system menu is called the menu bar. It consists of collection of
descriptions serving as heading/title for a series of actions on a pull down menu. Menu choice
is not self-initiative. Menu is arrayed in a horizontal row at the top of the window. Rarely a
menu bar is referred to as collections of menu titles. Menu bar is the starting point and it is
simply called as menu. Consistency in menu bar design will present the user a stable,
familiar and comfortable starting point for all interactions. Menu bars are most effectively
used for presenting common, frequent or critical actions used on many windows in different
circumstances.
Menu bars often consist of series of textual words as shown below
Macintosh, presentation manager and Microsoft windows use this approach. Some products
have placed the choices within buttons as shown below

Example of this approach is Sun’s microsystems open look called as menu buttons, which are
combinations of both. OSF/Motif presents a list of textual choices, but when one is selected it
is same as button referred to as cascade buttons.
Each menu bar item is the top level of a hierarchical menu. Some products have tried to pull
down rule and have included items in menu bar which are direct action itself. It have been
designated by exclamatory point (!) fallowing the menu bar description.
Advantages of menu bar are
 Are always visible, reminder the user of their existence?
 Are easy to browse through.
 Are easy locate constantly on the screen.
 Usually do not obscure the screen working area.
 Usually are not obscured by windows and dialog boxes.
 Allow for use of keyboard equivalents.
Disadvantages of menu bar are
 They consume a full row of screen space.
 They require looking away from the main working area to find.
 They require moving pointer from the main working area to select.
 The menu options are smaller than full-size buttons slowing selection time.
 Their horizontal orientation is less efficient for scanning.
 Their horizontal orientation limits number of choices that can be displayed.
Display
All primary windows must have a menu bar, with associated pull-down menu with at least 2
choices. If a planned menu bar has one/no choices combine it within another menu bar
category. Secondary windows may use the primary window bar. Never turn-off menu bar
since remainder of systems actions will be eliminated and forgotten by new user. Disabled
pull down menu bar must always be capable of being pulled down for seeing choices.
Location
Choices should be positioned hierarchically across the top of the screen below the screen
title. Typically choices should be 7 or 8 due to screen space constraints and human
limitations. In case of requirements of more choices use second line of choices may be added.
Title
Window title will serve as the menu bar title.
Item Descriptions
Menu item description must clearly reflect alternatives available in the associated pull-down
menus. Choice should contain mixed-case single words. 1 st letter of choice is capital.
Acronyms, abbreviations or proper nouns may be capitalized. Numbers are not allowed.
Include hyphen between multiple words. Do not display choices that are never available to
the user.
Organization
Fallow standard platform ordering scheme where they exist. Place application specific
choices at best fit. Order choices left to right with most frequently elected choices to the left
and related information grouped together. Choices found on more than one menu should be
constantly positioned. Left justify all choices within the line. Always locate help at far right
side with visual groupings of all related choices.
Layout

Indent 1st choice one space from the left margin. Leave minimum 3 spaces between each of
the succeeding choices and leave one space between the final choice and right margin. These
provide clear delineation of choices. Leave ample room for the selection cursor with
efficiency in bar design.
Separation
Separate the bar between the remainder of the screen by a different background/ solid lines
above and below. Bar should be identifiable at the top by a contrasting display technique, by
using different background either reversed polarity or color different from the adjacent title
and screen body. Contrast of the bar to the remainder of the screen should be moderate.
Other Components
Keyboard mnemonics should be included on menu bars. Keyboard accelerators and other
intent indicators must not be used since menu bar selection will always lead to pull-down
menu.
Selection Indication

When using the keyboard selection cursor should be indicated by contrasting reverse
video/reverse color bar. Cursor should extend at least one space to each side of the choice
word. When using a pointer use reverse video/reverse color to highlight the choice when it is
selected. Recommended reverse order combination is simply to reverse the foreground and
background colors of the unselected choices. Combination working are black-white, blue-
white and black-cyan.
Pull-Down Menu (drop-downs)
It is used to initiate frequently used application actions taking place on different windows. It
should have small number of items represented textually and which are constant. Selection of
an alternative from the menu bar results in the display of the exact actions available to the
user, displayed vertically as list.

Pull downs are the 1st level menus used to provide access to common and frequently used
application actions taking place on a wide variety of different windows. They are most useful
for a small number of rarely changing items in range of 5 to 10. These are best suited for
items represented textually with graphical presentations.
Advantages
 The menu bar cues a remainder of these existence.
 They may be located relatively consistently on the screen.
 No window space is consumed when they are not used.
 They are easy to browse through.
 Their vertical orientation is most efficient for scanning.
 Their vertical orientation is most efficient for grouping.
 Their vertical orientation permits more choices to be displayed.
 They allow for display of both keyboard equivalents and accelerators.
Disadvantages
 They require searching and selecting from another menu before seeing options.
 They require looking away from main working area to read.
 The require moving the pointer out if working area to select.
 The items are smaller than full-size buttons, slowing selection time.
 The may obscure the screen working area.
Display
Display all possible alternatives on a pull down. Gray out/dim for nonchoosen choices. For
inapplicable items at any one point, must be retrieved for perusal through the menu bar.
Location
It will be located directly below the menu bar choice by which it is selected.
Size
It will be having 5 to 10 choices. It should always contain more than 1 choice. Due to vertical
orientation choices with longer descriptions can be provided.
Title
Name of the item chosen on the menu bar serves as the title of a pull down menu.
Item Descriptions
Choices should be composed of mixed-case headline-style words. For multiword choice
descriptions capitalize 1st letter of significant word. Acronyms, abbreviations/proper nouns
must be capitalized. In graphical display fill-in patterns, shades or colors, textual descriptions
are not required. Never identify a pull-down menu item by same wording as its menu bar
title, which reflect the items within the pull-down. Never change meaning of items through
use of shift key which are error prone and reserved for key accelerators. Do not use scrolling
in/place instructions within pull down.
Organization
Fallow standard platform organization schemes when they exist. Place application specific
choices where they fit best. Place frequent/critical items at the top of the listing and separate
destructive choices from other choices. Align all pull-down choices into columns with their
descriptions left-aligned. Locate most frequently chosen alternatives toward the top and
group related choices together. Choices found on more than one pull down should be
consistently positioned.
Layout
Leave the menu bar choice leading to the pull-down highlighted in selected manner. It must
be wide enough to accommodate the longest menu item description and its cascade. Align the
1st character of the pull down description under the 2nd character of the applicable menu bar
choice. Horizontally separate the pull down choice descriptions from the pull-down borders
by 2 spaces on the left side and at least 2 spaces on the right side. Left-side border will align
with the left side of the highlighted menu bar choice and right side border should extend to
right side of its highlighted menu bar choice.

Pull down for choices on the far right side of the menu bar/long pull down descriptions
require alignment to the left of their menu bar choice to maintain visibility and clarity.

Groupings

Provide groupings of related pull-down choices:

 Incorporate a solid line between major groupings.
 Incorporate a dotted/dashed line between subgroups.
 Left justify the lines under the 1st letter of the columnized choice descriptions.
 Right justify the lines under the last letter of the columnized choice descriptions.
 Display the solid line in the same color as the choice descriptions.
The line/lines must extend from the 1 st character of the descriptions to the end of the longest
description. Line extend from pull-down border to border. Many other system pull-downs
also fallow this border-to-border approach.
Mark Toggles or Settings
If a menu item is made permanently active/when selected, made clear to the user by marking
the item. For nonexclusive/independent items, display a check mark to the left of the item
description. For exclusive items precede the choice by symbol like diamond/circle. Microsoft
indicates this by option button mark.
Pull-Downs leading to Another Pull-Down

If a pull down choice leads to another pull down, provide a cascade indicator as
  Place an arrow/right pointing triangle after the choice description.
 Align the triangles to the right side of the pull-down.
 Display the triangle in the same color as the choice descriptions.
Secondary pull down may be desirable if the first pull-down leads to another short series of
choices. If the 1st pull down has a large number of choices that are capable of being logically
grouped. Existence of this second level/hidden pull-down should be indicated to the user on
the 1st pull-down should be indicated to the user on the 1st pull down in consistent manner.
Pull-Downs Leading to a Window

For pull down choices leading to a window place and ellipsis (3 dots) after the choice
description. Do not separate the dots from the description by a space and should be displayed
in same color.
Keyboard Equivalents and Accelerators

Enabling the user to select pull-down choices through the keyboard provides flexibility and
efficiency, provided by single-character mnemonic codes when typed get invoked. These
codes are indicated by underline beneath the proper character with in the choice. We can also
use accelerators. Identify these keys exactly as they are engraved on the keyboard. Indicate
simultaneous depression through the use of + sign and right align the accelerator descriptor
and position it to the right of the choice descriptions.
Separation
Separate the pull-down from the remainder of the screen, related to the menu bar by using a
background color same as the menu bar, displaying choice descriptions in the same color as
the menu bar and incorporating a solid line border fully around the pull-down in the same
color as the choice description. A drop shadow may also be included.
Selection Cursor

Selection cursor should be a contrasting reverse video/reverse color bar of a consistent size
encompassing the selected choice. Reverse color combination should be the same as the one
that appears within the menu bar.
Cascading Menus
It is a submenu derived from a higher level menu, pull-down. Cascading may be attached to
other cascades/pop-up menus. These 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 indicated by a right pointing triangle. These are
developed to simplify menus by reducing the no of choices which appear together on one
menu. Cascades can be used meaningful grouping of alternatives. Top level menu may
contain the grouping category headings and the cascaded menu the items in each group.
Changing pointer movement from vertical to an adjacent cascade is error prone. Sliding the
mouse and its pointer horizontally is not good. Apple minimizes this problem by presenting a
movement cone for the selected choice, which gradually widens as it approaches cascade.
Advantages
 The top-level menus are simplified.
 More 1st letter mnemonics are available.
 High level command browsing is easier.
Disadvantages
 Access to submenu items need more steps.
 Access to submenu items need a change in pointer movement direction.
 Exhaustive browsing is more difficult.
Cascade indicator

To indicate that another lower-level menu will appear when a menu is selected place an
arrow/right pointing triangle immediately to its right. Displayed with same color as of choice
descriptor.
Location
Cascading menus should be positioned so that 1 st choice in the menu is immediately right of
the selected choice, with choice leading to cascade remaining highlighted.
Levels
Every additional cascade level reduces ease of access and increases visual clutter. No of
cascade levels presented should represent balance between menu simplification, ease of menu
comprehension and ease in item selection. Do not exceed 3 level of menus. Try to limit
cascades to one. For too many cascade levels create additional pull-down menus/provide
window for some alternatives. Window is useful for establishing independent settings.
Toolbar usage eliminates the need for traversing cascades.
Title
It will be choice selected on the menu from which it cascades.
Other Guidelines
The design of a cascade menu should fallow all relevant guidelines for the family of menus to
which it belongs like organization, content, layout and selection cursor.
Pop-up Menus
Choices may also be presented to the user on the screen using this, vertically arrayed listings
that only appear when specifically requested. It may be requested when the mouse pointer is
positioned over a designated/hot area of the screen. They resemble pull-down menu in look.

Kinds of choices displayed are context sensitive depending upon where the pointer is
positioned during request. They are most useful for presenting alternatives within the context
of the user’s immediate task. For experienced users it is alternative to pull-down. Choices
should be limited in number and stable/infrequently changing in content. Windows contains
many contextual pop-up menus. They are also called as text menus/shortcut menus.
Advantages
 They appear in the working area.
 They do not use window space when not displayed.
 No pointer movement is needed if selected by button.
 Their vertical orientation is most efficient scanning.
 Their vertical orientation most efficient for grouping.
 Their vertical orientation allows more choices to be displayed.
  They may be able to remain showing when used frequently.
 They allow for display of both keyboard equivalents and accelerators.
Disadvantages
 Their existence must be learned and remembered.
 Means for selecting them must be learned and remembered.
 They require a special action to see the menu.
 Items are smaller than full size buttons, slowing selection time.
 They may obscure the screen working area.
 Their display locations must be consistent.
Display
Provide a pop-up menu for common, frequent. Contextual actions. If pointer is positioned
over an object possessing more than one quality at minimum present actions common to all
object qualities. Never display items not chosen due to current state. Continue to display a
pop-up until the user selects a choice, initiates an action outside the pop-up or requests that
the pop-up be removed.
Location
Position a pop-up menu in a consistent location relative to the object from which it is
requested. Preferable location is centered to the right. Locate the pop-up close enough to the
pointer so that the pointer can be easily moved onto the menu. Right centered position would
force the pop-up partially/fully off the screen. Do not move the pointer to make a menu fit in
the desirable position.
Size
Limit pop-up menus to 8 or less choices. For large number of choices consider creating
cascading menus with minimum levels for ease of access and clutter prevention.
Title
It is not required on a pop-up menu, since it has an expert feature. Some graphical platforms
include titles, others do not. Microsoft windows does not. If included should reflect the
menu’s purpose. Title should be set off from the item descriptions using uppercase
letters/mixed-case letters in headline style.
Other Guidelines
 Arrange logically organized and grouped choices into columns.
 If items are also contained in pull-down menus, organize pop-up menus in the same
manner.
 Left-align choice descriptions.
 Use mixed-case headline-style words to describe choices.
 Separate groups with a solid line the length of the longest choice description.
 If the choice leads to a pop-up window, place an ellipsis after the choice description.
 To separate the pop-up from the screen background
--- use a contrasting but complementary background.
--- Incorporate a solid line border around the pull-down.
Tear-off Menus
It is a pull down menu which can be positioned anywhere of the screen for constant referral.
It has all the properties of a pull-down. It may be called as pushpin, detachable or roll-up
menu. It presents alternatives needed rarely and heavily some times. These are useful for
expert users. Typical use would be detach and permanently leave displayed a pull down menu
when it must be frequently used.
Advantages
 No space is consumed on the screen when the menu is not needed.
Disadvantages
  When remained continuously, it require extra steps to retrieve and may obscure the
screen working area.
Iconic Menus

All iconic menu is the portrayal of menu items/objects in a graphic/pictorial form. Purpose is
to remind users of the functions, commands, attributes or application choices available.
Advantages
 Picture help provide memory of applications and their larger size increases speed of
selection.
Disadvantages
 Pictures consume more space than text and reduces scanning efficiency.
 Creation of meaningful icons need special skill and time.
 Iconic menus must be used o designate applications.
 Icons must be meaningful and clear.
 Help in enhancing recognition and hasten option selection.
Pie Menus

it is a circular representation of menu items used as an alternative to a pull-down menu/pop-

up menu. This style of menu yields higher performance than the vertical array for unrelated
menu tasks. Mayhew (1992) concludes that pie menus work well for mouse-driven selections
with 1/2 level hierarchies, short choice listings and data conducive to the format.
Advantage
 When presented with mouse positioned in the pie’s center, average movement to any
pie wedge is shorter.
Disadvantages
 Advantages for keyboard selection are doubtful.
Default Menu Items
All system will provide a set of standard menu items which reduce design time and
encourage interface consistency. System learning time will be reduced. Fallow industry
standards for naming, menu bar choices, ordering and keyboard equivalents and accelerators.
File
A standard element provides all the commands to open, create and save files. Standard file
functions are New, Open, Close, Save, Save As, Print Preview, Print and Exit.
Edit
It provides commands that affects the state of selected objects. Some standard edit functions
are Undo, Cut, Copy, Paste, Select All, Find and Replace.
View
It is an optional element commands which affects the perspective, details and appearance of.
the application. They affect the view and data. Some of the commands are Toolbars, Status
Bar, Magnify, Zoom In, Zoom Out and Grid Points.
Windows
it is an optional element which provide commands to manipulate entire windows with items
like New Window, Arrange All, Hide and Show.
Help
It is a standard element which provides Help commands with Contents, Search for Help On,
How to Use Help and About.

These standard menu items have a prescribed order on the menu bar like File, Edit, View,
Window and Help. Items on their pull-down menus also fallow standard orders. Standard
menus and items should always be used for creating an application.
Functions Not Represented by Default Items
Once we establish standard menu functions we must identify additional system functions,
through commands added in permanent menus. Command design guides are
Labels
Provide a clear label for each command with its purpose or result upon click. Use single-word
commands. If multiple words are used for clarity, capitalize 1 st letter of the each significant
word. Use ellipses to indicate that another window will result from selection of command, do
not use in case of confirmation/warning. With change in context, label wording may be
changed for its meaning. Undo cut operation after cut operation. (called as toggled menu
item).
Disabled Commands
It is indicated by displaying it grayed out/subdued. If selected message should be provided in
the instruction area.
Navigation and Selection
Permit multiple methods for selecting commands. In case of keyboard equivalents assign a
mnemonic for each command with proper meaning by using 1 st letter of the
command/another word in the command/significant consonant in the command/from tool set
in case of standard commands. In case of keyboard accelerators assign keyboard for
frequently used commands/ /from tool set in case of standard commands.