By Dr.

sandhya N Dept of CSE DSATM 1

USER INTERFACE
DESIGN
Text Book

Wilbert O. Galitz, “The Essential Guide to User Interface

Design”, John Wiley & Sons, Second Edition 2002.

Chapters: Part1: 1,2, Part2: step1,2,4,5,6,7,14

 By Dr. sandhya N Dept of CSE DSATM 2

Module 3
Text Book: Part 2 Step 4
System menus and navigation schemes- Structures of
menus, Functions of menus, Contents of menus,
Formatting of menus, Phrasing the menu, Selecting menu
choices, Navigating menus, Kinds of graphical menus.
 By Dr. sandhya N Dept of CSE DSATM 3

Introduction to Develop System Menus

and Navigation Schemes
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. When selected, a graphical menu item may lead
to another menu, cause a window to be displayed, or
directly cause an action to be performed

To accomplish these goals, a graphical system presents a

variety of menu styles to choose from. Included are entities
commonly called menu bars, and menus called pull-downs,
pop-ups, cascades, tearoffs, and iconic. In Web site design,
common menus include textual links to other pages,
command buttons, and both graphical and textual toolbars.
 By Dr. sandhya N Dept of CSE DSATM 4

Structures of Menus
(Answer to Assignment Qno17 slide no 4-10)
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.
Types of menus
• Single Menus
• Sequential Linear Menus
• Simultaneous Menus
• Hierarchical Menus
• Connected Menus
• Event-Trapping Menus
 By Dr. sandhya N Dept of CSE DSATM 5

Single Menus
In this simplest form of menu, a single screen or window is
presented to seek the user’s input or request an action to
be performed, as shown below:

Single menus conceptually require choices from this single

menu only, and no other menus will follow necessitating
additional user choices.
 By Dr. sandhya N Dept of CSE DSATM 6

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.

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, a question important to the currently presented choices.
 By Dr. sandhya N Dept of CSE DSATM 7

Simultaneous Menus
Instead of being presented on separate screens, all menu
options are available simultaneously as shown below:

All alternatives are visible for reminding of choices, comparing

choices, and changing answers
 By Dr. sandhya N Dept of CSE DSATM 8

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.

Note that 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.
 By Dr. sandhya N Dept of CSE DSATM 9

Connected Menus
Connected menus are networks of menus all interconnected in some manner.
Movement through a structure of menus is not restricted to a hierarchical tree,
but is permitted between most or all menus in the network. From the user’s
perspective there is no top-down traversal of the menu system but an almost
unhindered wandering between any two menus of interest.
 By Dr. sandhya N Dept of CSE DSATM 10

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.
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).
 By Dr. sandhya N Dept of CSE DSATM 11

Functions of Menus
(Answer to Assignment Qno19 slide no 11)
• Navigation to a New Menu
Each user selection causes another menu in a hierarchical menu tree to be
displayed. The purpose of each selection is to steer the user toward an objective or
goal.
• 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.
• Displaying Information
The main purpose of selecting a menu choice may simply be to display information.
The user may be searching for specific information in a database or browsing the
Web. The user’s focus is primarily on the information desired and less on the
selection function.
• 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.
 By Dr. sandhya N Dept of CSE DSATM 12

Content of Menus
(Answer to Assignment Qno21 slide no 12)
A menu consists of four elements, its context, its title, its
choice descriptions, and its completion instructions.
• 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.
• Menu Title
A menu’s title provides the context for the current set of choices. The title must
reflect the choice selected on the previously displayed menu.
• Choice Descriptions
Choice descriptions are the alternatives available to the user. These
descriptions can range from a mnemonic, numeric, or alphabetized listing of
choices to single words or phrases to full sentences or more.
• Completion Instructions
Completion instructions tell users how to indicate their choices. They may include
the rationale for why the user is being asked to make this choice and the impact the
choice will have on subsequent processes.
 By Dr. sandhya N Dept of CSE DSATM 13

Formatting of Menus
Guidelines for formatting menus:
By Dr. sandhya N Dept of CSE DSATM 14
By Dr. sandhya N Dept of CSE DSATM 15
By Dr. sandhya N Dept of CSE DSATM 16
By Dr. sandhya N Dept of CSE DSATM 17
 By Dr. sandhya N Dept of CSE DSATM 18

Partial line separators. Extended line separators.

 By Dr. sandhya N Dept of CSE DSATM 19

Phrasing the Menu

(Answer to Assignment Qno22 slide no 19 - 28 )
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.

A meaningful menu title aids in defining the context of the

menu and increases menu comprehension. An
experimental study has demonstrated the value of titles to
comprehension. The title established the context of the
task, and knowing this context greatly aided
comprehension.
By Dr. sandhya N Dept of CSE DSATM 20
By Dr. sandhya N Dept of CSE DSATM 21
By Dr. sandhya N Dept of CSE DSATM 22
 By Dr. sandhya N Dept of CSE DSATM 23

Providing an indication of what will happen when a menu item is

selected can enhance predictability and exploration of a graphical
system.

Intent Indicator
By Dr. sandhya N Dept of CSE DSATM 24

Keyboard Equivalents
 By Dr. sandhya N Dept of CSE DSATM 25
Standard Keyboard Equivalents
By Dr. sandhya N Dept of CSE DSATM 26
 By Dr. sandhya N Dept of CSE DSATM 27

Keyboard accelerators
 By Dr. sandhya N Dept of CSE DSATM 28

Standard Keyboard Accelerators

 By Dr. sandhya N Dept of CSE DSATM 29

Selecting Menu Choices

(Answer to Assignment Qno24 slide no 29- 34)
Menu items can be selected by pointing at the choice with a
mechanical pointer, by pointing at the choice through the
keyboard, or by keying a value designating the choice.
By Dr. sandhya N Dept of CSE DSATM 30
By Dr. sandhya N Dept of CSE DSATM 31
By Dr. sandhya N Dept of CSE DSATM 32
By Dr. sandhya N Dept of CSE DSATM 33

Mark toggles
 By Dr. sandhya N Dept of CSE DSATM 34

Toggled menu item

 By Dr. sandhya N Dept of CSE DSATM 35

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.
Web Site Navigation Problems
Technical issues
The graphical system user must deal with only one operating system whose navigational
characteristics are standard and fairly consistent. The Web user must confront two navigational
systems, that of the browser being used and that of the Web site being viewed.
Another problem: Because of the rapidly evolving and expanding nature of the Web, Web sites
also have a tendency to grow and grow. As more and more is added, what may have been initially
a reasonable structure and menu scheme slowly dissolves into a confusing mass of listings and
linked pages.

Usage problems
The two most serious user problems in Web navigation are the heavy mental loads imposed
to use the Web and the feeling of spatial disorientation that often occurs. This problem may
also occur in hierarchically structured graphical systems. The cognitive or mental overhead
the user must expend in making decisions concerning which links to follow, or to abandon,
can be overwhelming .
 By Dr. sandhya N Dept of CSE DSATM 36

Navigation Goals
(Answer to Assignment Qno23 slide no 36)
For the user, answers to the following questions must be obvious at all times during an interaction: Where
am I now? Where did I come from? Where can I go from here? How can I get there quickly?
General system navigation guidelines include the following:
 By Dr. sandhya N Dept of CSE DSATM 37

Web Site Navigation

Components of a Web Navigation System

(Answer to Assignment Qno18 slide no 37-38)

General link guidelines are:

All navigation controls must:
— Make sense in the absence of site context.
— Be continually available.
— Be obvious and distinctive.
— Be consistent in appearance, function, and ordering.
— Possess a textual label or description.
— Offer multiple navigation paths.
 By Dr. sandhya N Dept of CSE DSATM 38

Browser Command Buttons:

Hide the split between the browser and the Web site application by including navigational
controls within the application.

Web Site Navigation Bars:

■ Provide a global navigation bar at the top of each page.
■ Provide a local category or topical links navigation bar on the left side of a page.
■ Place minor illustrative, parenthetical, or footnote links at the end of the page.
■ For long pages, provide a navigation bar repeating important global or local links at the
page bottom.

Textual Phrases:
■ Provide a mix of textual phrase links:
— In explicit menus.
— Embedded within page text.
By Dr. sandhya N Dept of CSE DSATM 39
By Dr. sandhya N Dept of CSE DSATM 40
 By Dr. sandhya N Dept of CSE DSATM 41

Other Web Site Navigation Elements

Overviews
■ Provide:
— An executive summary that provides a preview of the
site and contains links to all major concepts.
— A site map illustrating the site’s hierarchical structure
and the relationships of components.
— Both global and local maps.
— An alphabetized site index.
— A table of contents.
■ Allow accessibility from any point in the Web site
 By Dr. sandhya N Dept of CSE DSATM 42

Historical Trails:
■ Provide:
— Breadcrumb Trails.
• Locate at the top of the page below the navigation links.
— History Lists.
— History Trees.
— Footprints.
— Bookmarks.

Search Facility:
■ Provide a search facility.
 By Dr. sandhya N Dept of CSE DSATM 43

Web Site Navigation Guidelines

Scrolling:
■ Do not require scrolling of navigation-only pages.
■ Minimize the need for scrolling to view all links on pages containing content.
■ Never require horizontal scrolling.

Number of Links:
■ Every page should contain at least one link.
■ Be conservative in the total number of links presented on a screen:
— Without logical groupings of elements, limit links to 4 to 8.
— With logical groupings of elements, limit links to 18 to 24.
■ Restrict embedded links to those most important, pertinent, and interesting.
— Place less relevant links in a listing.
 By Dr. sandhya N Dept of CSE DSATM 44

Presenting Links:
■ Link text:
— Underline all link text, including that:
• Embedded in page content.
• Contained in explicit menu listings.
• Contained in headings.
• Used as graphical labels.
— Distinguish between unselected/unvisited links and selected/visited links.
• Make unselected/unvisited links blue.
• Make selected/visited links purple.

■ Kinds of links:
— Distinguish links leading to different Web destinations through a differentiating symbol:
• Precede links to content within the same page with a pound sign (#).
– For links moving downward in the page, use: #The principles of design.
– For links moving upward in the page use: #^ Principles introduction.
• Precede links to external or foreign sites with another unique symbol such as an asterisk (*): *
Additional information.
• Do not precede links to other site pages with any symbol:
– More principles of design.
— Also distinguish links leading to different Web destinations by presenting them in consistent
locations.
 By Dr. sandhya N Dept of CSE DSATM 45

■ Graphical links:
— Distinguish graphical links from decorative graphics
through:
• Underlining graphical text labels.
■ Links in toolbars:
— Distinguish links contained in toolbars through:
• Presenting in consistent locations.
• Using different coloured backgrounds.
 By Dr. sandhya N Dept of CSE DSATM 46
Other Link Guidelines:
■ Writing:
— Provide links to satisfy a range of user needs.
— Create descriptive links clearly indicating their destination or resulting action.
■ Grouping:
— Group links by the most relevant menu-grouping scheme.
— Separate visually the following types of navigation:
• Upward to the immediate parent page.
• Upward to the beginning of the section or category of information.
• Across to main sections or categories of information.
• To basic utilities.
■ Ordering:
— Order links by the most relevant menu choice-ordering scheme.
■ Heading:
— Where appropriate, provide a listing heading describing the organizing category,
principle, or theme.
■ Size:
— Provide graphical images and command buttons of sufficient and equal size.
■ Spacing:
— Create equal spacing between choices graphical image and textual listing
toolbars.
■ Inapplicability:
— Disable and display dimmed links conditionally not applicable.
By Dr. sandhya N Dept of CSE DSATM 47
 By Dr. sandhya N Dept of CSE DSATM 48

Kinds of Links:
■ Within a page:
— For long pages, include links to internal page content.
■ Within a Web site:
— On all pages include links to:
• The Web site home page.
• Global Web site features.
• Other main pages, navigation points, or categories.
• The likely Web site starting point.
• Main pages with links to the page.
— On sequential pages, include links to the:
• Next page.
• Previous page.
— Also consider including links to:
• Places of related interest.
• Important pages.
• Background or explanatory information.
• Supplemental information.
• New or changed content.
• Web site Quit or Exit.
 By Dr. sandhya N Dept of CSE DSATM 49

■ External links:
— Most appropriate for informational sites.
— Provide links to relevant information on other Web sites.
• Related content.
• Reference information.
• Background reading.
— Place external links on a separate page.
— Provide an indication when a link goes outside the current site.
 By Dr. sandhya N Dept of CSE DSATM 50

Link Maintenance
■ Maintain correct internal links.
■ Frequently check and correct external links.

Maintaining a Sense of Place

Design Characteristics That Aid in Maintaining a Sense of Place

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

— Provide a simple hierarchical tree structure.
— Provide ease of movement to important site features.
■ To assist maintaining a sense of place across multiple Web sites:
— Provide consistency in all Web site design elements, including:
• Graphical identity schemes.
• Component presentation.
• Component organization and location.
 By Dr. sandhya N Dept of CSE DSATM 51

Design Elements That Aid in Maintaining a Sense of Place

■ Provide a home base.

■ Use recurring navigation tools on all pages.
■ Use recurring elements on all pages.
■ Provide page numbers for sequential pages.
■ Provide ongoing feedback that shows where users are in a site.
■ Provide on-demand aids that illustrate the user’s location within a site.
— Site maps.
— Table of contents.
■ Provide clearly written link labels.
 By Dr. sandhya N Dept of CSE DSATM 52

Kinds of Graphical Menus

(Answer to Assignment Qno20 slide no 52 to 74 explain 7 types brief explanation)
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.

The following are types of graphical menus

1. Menu Bar
■ Proper usage:
— To identify and provide access to common and frequently used
application actions that take place in a wide variety of different
windows.
— A menu bar choice by itself should not initiate an action.
 By Dr. sandhya N Dept of CSE DSATM 53

Display
■ All primary windows must have a menu bar.
■ All menu bars must have an associated pull-down menu containing at least two
choices.
■ Do not allow the user to turn off the display of the menu bar.
■ If all the items in its associated pull-down menu are disabled, then disable the
menu bar item.
— Display the disabled item in a visually subdued manner.
— However, the disabled pull-down menu must always be capable of being pulled
down so that the choices may be seen.
 By Dr. sandhya N Dept of CSE DSATM 54

Location
■ Position choices horizontally over the entire row at the top of the
screen, just below the screen title.
■ A large number of choices may necessitate display over two rows.

Title
■ The window title will be the menu bar title.

Item Descriptions
■ The menu item descriptions must clearly reflect the kinds of choices available
in the associated pull-down menus.
■ Menu item descriptions will be the “titles” for pull-down menus associated
with them.
■ Use mixed-case letters to describe choices.
■ Use single-word choices whenever possible.
■ Do not display choices that are never available to the user.
 By Dr. sandhya N Dept of CSE DSATM 55

Organization
■ Follow standard platform ordering schemes where they exist.
— Place application-specific choices where they fit best.
■ Order choices left-to-right with:
— Most frequent choices to the left.
— Related information grouped together.
■ Choices found on more than one menu bar should be consistently positioned.
■ Left-justify choices within the line.
■ When choices can be logically grouped, provide visual logical groupings, if
possible.
■ Help, when included, should be located at the right side of the bar.

Layout
■ Indent the first choice one space from the left margin.
■ Leave at least three spaces between each of the succeeding choices (except
for Help which will be right-justified).
■ Leave one space between the final choice and the right margin.
 By Dr. sandhya N Dept of CSE DSATM 56

Separation
■ Separate the bar from the remainder of the screen by:
— A different background, or
— Solid lines above and below.

Other Components
■ Keyboard equivalent mnemonics should be included on menu bars.
■ Keyboard accelerators, to a window indicators, and cascade indicators need not
be included.

Selection Indication
■ Keyboard cursor:
— Use a reverse video, or reverse color, selection cursor to surround the choice.
— Cover the entire choice, including one blank space before and after the choice
word.
■ Pointer: — Use reverse video, or reverse color, to highlight the selected choice.
 By Dr. sandhya N Dept of CSE DSATM 57

2. Pull-Down Menu
■ Proper usage:
— To initiate frequently used application actions that take place on a wide
variety of different windows.
— A small number of items.
— Items best represented textually.
— Items whose content rarely changes.
 By Dr. sandhya N Dept of CSE DSATM 58

Display
■ Display all possible alternatives.
■ Gray-out or dim items that cannot be chosen due to the current state of an application.

Location
■ Position the pull-down directly below the selected menu bar choice.

Size
■ Must contain a minimum of two choices.
■ Restrict to no more than 5 to 10 choices, preferably 8 or less.

Title
■ Not necessary on a pull-down menu. The title will be the name of the menu bar item chosen.

Item Descriptions
■ Use mixed-case, headline-style words to describe choices.
— If the choices can be displayed graphically, for example, as fill-in patterns, shades, or colors,
textual descriptions are not necessary.
■ Do not:
— Identify a menu item by the same wording as its menu title.
— Change the meaning of menu items through use of the Shift key.
— Use scrolling in pull-downs.
— Place instructions in pull-downs
 By Dr. sandhya N Dept of CSE DSATM 59

Organization
■ Follow standard platform ordering schemes when they exist.
— Place application-specific choices where they fit best.
■ Place frequent or critical items at the top.
■ Separate destructive choices from other choices.
■ Align choices into columns, with:
— Most frequent choices toward the top.
— Related choices grouped together.
— Choices found on more than one pull-down consistently positioned.
■ Left-align choice descriptions.
■ Multicolumn menus are not desirable. If necessary, organize top-to-bottom,
then left-to-right.

Layout
■ Leave the menu bar choice leading to the pull-down highlighted in the
selected manner (reverse video or reverse color).
■ Physically, the pull-down menu must be wide enough to accommodate the
longest menu item description and its cascade or accelerator indicator.
 By Dr. sandhya N Dept of CSE DSATM 60

■ Align the first character of the pull-down descriptions under the second
character of the applicable menu bar choice.
■ Horizontally, separate the pull-down choice descriptions from the pull-down
borders by two spaces on the left side and at least two spaces on the right side.
— The left-side border will align with the left side of the highlighted menu bar
choice.
— The right-side border should extend, at minimum, to the right side of its
highlighted menu bar choice

— Pull-downs for choices on the far right side of the menu bar, or long pull-
down descriptions, may require alignment to the left of their menu bar choice to
maintain visibility and clarity.
 By Dr. sandhya N Dept of CSE DSATM 61

Groupings
■ Provide groupings of related pull-down choices:
— Incorporate a solid line between major groupings.
— Incorporate a dotted or dashed line between subgroups.
— Left-justify the lines under the first letter of the columnized choice
descriptions.
— Right-justify the lines under the last character of the longest choice
description.
— Display the solid line in the same color as the choice descriptions.
 By Dr. sandhya N Dept of CSE DSATM 62

Mark Toggles or Settings

■ If a menu item establishes or changes the attributes of data or properties of the
interface, mark the pull-down choice or choices whose state is current or active
“on.”
— For nonexclusive items, display a check mark to the left of the item description.
• If the two states of a setting are not obvious opposites, a pair of alternating menu
item descriptions should be used to indicate the two states.
— For exclusive choices, precede the choice with a contrasting symbol such as a
diamond or circle.

Pull-Downs Leading to Another Pull-Down

■ If a pull-down choice leads to another pull-down, provide a cascade indicator as
follows:
— Place an arrow or 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.
 By Dr. sandhya N Dept of CSE DSATM 63

Pull-Downs Leading to a Window

■ For pull-down choices leading to a window:
— Place an ellipsis (three dots) after the choice description.
— Do not separate the dots from the description by a space.
— Display the ellipsis in the same color as the choice descriptions.

Keyboard Equivalents and Accelerators

■ Provide unique mnemonic codes by which choices may be selected through the
typewriter keyboard.
— Indicate the mnemonic code by underlining the proper character.
■ Provide key accelerators for choice selection.
— Identify the keys by their actual key-top engravings.
— Use a plus (+) sign to indicate that two or more keys must be pressed at the
same time.
 By Dr. sandhya N Dept of CSE DSATM 64

— Enclose the key names within parentheses ( ).

— Right-align the key names, beginning at least three spaces to the right of the
longest choice description.
— Display the key alternatives in the same color as the choice descriptions.

Separation
■ Separate the pull-down from the remainder of the screen, but visually relate it
to the menu bar by:
— Using a background color the same as the menu bar.
— Displaying choice descriptions in the same color as the menu bar.
— Incorporating a solid-line border completely around the pull-down in the same
color as the choice descriptions.
■ A drop shadow (a heavier shaded line along two borders that meet) may also
be included.
 By Dr. sandhya N Dept of CSE DSATM 65

Selection Cursor
■ Use a reverse video, or reverse color, selection cursor the same color as the
menu bar to surround the choice.
■ Create a consistently sized cursor as wide as the pull-down menu
 By Dr. sandhya N Dept of CSE DSATM 66

3. Cascading Menus
■ Proper usage:
— To reduce the number of choices presented together for selection (reduce menu
breadth).
— When a menu specifies many alternatives and the alternatives can be grouped in
meaningful related sets on a lower-level menu.
— When a choice leads to a short, fixed list of single-choice properties.
— When there are several fixed sets of related options.
— To simplify a menu.
— Avoid using for frequent, repetitive commands.
 By Dr. sandhya N Dept of CSE DSATM 67

Cascade Indicator
■ Place an arrow or right-pointing triangle to the right of each menu choice description
leading to a cascade menu.
■ Separate the indicator from the choice description by one space.
■ Display the indicator in the same color as the choice descriptions.

Location
■ Position the first choice in the cascading menu immediately to the right of the
selected choice.
■ Leave the choice leading to the cascading menu highlighted.
 By Dr. sandhya N Dept of CSE DSATM 68

Levels
■ Do not exceed three menu levels (two cascades).
— Only one cascading menu is preferred.

Title
■ Not necessary on the cascading menu. — The title will be the name of the
higher-level menu item chosen.

Other Guidelines
■ Follow the organization, content, layout, separation, and selection cursor
guidelines for the kind of menu from which the menu cascades.
 By Dr. sandhya N Dept of CSE DSATM 69

4. Pop-up Menus
■ Use to present alternatives or choices within the context
of the task.
 By Dr. sandhya N Dept of CSE DSATM 70

Display
■ Provide a pop-up menu for common, frequent, contextual actions.
— If the pointer is positioned over an object possessing more than one quality (for
example, both text and graphics), at minimum present actions common to all object
qualities.
■ Items that cannot be chosen due to the current state of an application should not
be displayed.
■ Continue to display a pop-up until:
— A choice is selected.
— An action outside the pop-up is initiated.
— The user removes the pop-up.

Location
■ Position the pop-up:
— Centered and to the right of the object from which it was requested.
— Close enough to the pointer so that the pointer can be easily moved onto
the menu.
— But not so close that the pointer is positioned on an item, possibly leading to
accidental selection.
■ If the pointer is positioned in such a manner that the pop-up would appear
offscreen or clipped, position the menu:
— As close as possible to the object, but not covering the object.
— So that it appears fully on the screen.
 By Dr. sandhya N Dept of CSE DSATM 71

Size
■ Restrict the pop-up to no more than 5 to 10 choices, preferably 8 or less.

Title
■ Not necessary on a pop-up menu.
■ If included, clearly describe the menu’s purpose.
■ Locate in a centered position at the top.
■ Display in uppercase or mixed-case letters.
■ Separate it from the menu items by a line extending from the left menu border to the right
border.

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.
 By Dr. sandhya N Dept of CSE DSATM 72

5. Tear-off Menus
■ Follow all relevant guidelines for pull-down menus.
A tear-off menu is a pull-down menu that can be positioned anywhere on the
screen for constant referral. As such, it possesses all the characteristics of a
pull-down. It may also be called a pushpin, detachable, or roll-up menu

6. Iconic Menus

■ Use to remind users of the functions, commands, attributes, or application

choices available.
■ Create icons that:
— Help enhance recognition and hasten option selection.
— Are concrete and meaningful.
— Clearly represent choices.
By Dr. sandhya N Dept of CSE DSATM 73
 By Dr. sandhya N Dept of CSE DSATM 74

7. Pie Menus
■ Consider using for:
— Mouse-driven selections, with one- or two-level hierarchies, short lists, and
choices conducive to the format.
 By Dr. sandhya N Dept of CSE DSATM 75

Default Menu Items

File Edit View Window
• New • Undo • Toolbars • New Window
• Open • Cut • Status Bar • Arrange All
• Close • Copy • Magnify • Hide Show
• Save • Paste • Zoom In
• Save As • Select All • Zoom Out
• Print Preview • Find • Grid
• Print • Replace • Points
• Exit

Help
• Contents
• Search for
• Help On
• How to Use
• Help About
(Application)
 By Dr. sandhya N Dept of CSE DSATM 76

Functions Not Represented by Default Items

Labels
■ General:
— Provide a label for each command.
— Use labels that indicate:
• The purpose of the command, or
• The result of what happens when the command is selected.
— Use familiar, short, clear, concise words.
— Use distinctive wording.
— Use mixed case, with the first letter capitalized.
— Begin commands with verbs or adjectives, not nouns.
— Preferably, use only one word.
• If multiple words are required for clarity, capitalize the first letter of each significant
word.
• Do not use sentences as labels.
— Provide an ellipsis (. . .) to indicate that another window will result from selection
of a command.
• Do not use the ellipsis when the following window is a confirmation or warning.
■ Dynamic labels:
— As contexts change, dynamically change the label wording to make its meaning
clearer in the new context.
• For example, after a cut operation, Undo may be changed to Undo Cut.
 By Dr. sandhya N Dept of CSE DSATM 77

Disabled Commands
■ When a command is not available, indicate its disabled status by displaying it
grayed out or subdued.
■ If selection of a disabled command is attempted, provide a message in the
information area that the “Help” function will explain why it is disabled.

Navigation and Selection

■ General:
— Permit multiple methods for selecting commands.
■ Keyboard equivalents:
— Assign a mnemonic for each command.
— A mnemonic should be as meaningful as possible.
Use:
• The first letter of the command, or if duplications exist,
• The first letter of another word in the command, or
• Another significant consonant in the command.
— For standard commands, use mnemonics provided by the tool set.
■ Keyboard accelerators:
— Assign keyboard accelerators for frequently used commands.
— For standard commands, use keyboard accelerators provided by the tool set