Ref: Chapter 6, Schneiderman B. and Plaisant C.

, Designing the
User Interface: Strategies for Effective Human-Computer
Interaction (5th Edition), Addison-Wesley Publication, 2010

1
i. To learn the different types of
menus
ii. To organize menus
iii. To design efficient menus

2
i. Introduction
ii. Task-Related Menu Organization
iii. Single Menu
iv. Combination of Multiple Menus
v. Content Organization
vi. Fast Movement Through Menus
vii. Data Entry with Menus: Form Fill-In, Dialog
Boxes and Alternatives
viii. Audio Menus and Menus For Small Displays

3
 When designers cannot create appropriate
direct manipulation strategies, menu
selection and form fill-in are attractive
alternatives.

Menu items written with familiar terminology

and organized in a convenient structure and
sequence allows users to select items easily.

4
"The primary goal for
menu, form fill-in,
and dialog-box
designers is to create
a sensible,
comprehensible,
memorable, and
convenient
organization relevant
to the user's task."

5
1. Binary Menus (2 states)
i. Button Choice
ii. Radio Buttons
2. Multiple-item Menus
3. Multiple-selection menus or check boxes

6
4. Animated ticker menus
popular on dashboards of mobile
applications.
users dont have to manually
scroll or page through the menu
items.
with a single click or touch, can
stop the scrolling and select an
item to view

7
5. Pull-down, pop-up, toolbar and
ribbon menus
Pull-down menus
Always available to the user by making selections on a top
menu bar
Key board shortcuts (or Hotkeys) are essential to support
expert user efficiency
E.g., Ctrl-C to Copy
Pop-up menus
Appear on a display in response to a check or tap
with a pointing device.
Content usually depends on cursor position
Can be organized in a circle to form pie menus
Toolbars, iconic menus, and palettes
Offers actions on a displayed object
Customizable, can be hidden.
Ribbon menus
Introduced by Microsoft in Office 2007
8
Cascading Pull-Down Menu in MS Word 2003
9
Pie Menu in The Sims
10
Ribbon menu in MS Word 2007

11
 Menus for long lists
1. Scrolling menus, combo boxes, and fisheye
menus
Scrolling menus display the first portion of the menu
and an additional menu item, typically an arrow that
leads to the next set of items in the menu sequence.
Combo boxes combine a scrolling menu with a text-
entry field.
Fisheye menus display all of the menu items on the
screen at once, but show only items near the cursor at
full size.

12
 Menus for long lists (cont.)
2. Sliders and alphasliders
When items consist of ranges or
numerical values, a slider is a natural
choice to allow the selection of a value.
The alphaslider uses multiple levels of
granularity in moving the slider thumb
and therefore can support tens or
hundreds of thousands of items.

13
 Menus for long lists (cont.)
3. Two-dimensional menus
Fast and vast two-dimensional menus give users a
good overview of the choices, reduce the number of
required actions, and allow rapid selection.

14
Example of a Two-Dimensional Menu
15
 Embedded menus and hotlinks
Embedded menus are an alternative to
explicit menus (orderly enumeration with
little extraneous information).
It is natural to allow users reading about
people, events, and places to retrieve
detailed information by selecting menus in
context.

16
Example of an Embedded Menu
17
1. Linear menu sequences and simultaneous menus
i. Linear
Guide the user through complex decision-making
process.
E.g. cue cards or "Wizards"
Effective for novice users performing simple tasks
ii. Simultaneous
Present multiple active menus at the same time and
allows users to enter choices in any order
E.g. Game menus

18
2. Tree-structured menus
Designers can form categories of similar items to
create a tree structure
E.g., fonts, size style, spacing
Fast retrieval if natural and comprehensive
Use terminology from the task domain
Expanding menus maintain the full context of each
choice
E.g., Windows Explorer

19
3. Menu Maps
Menu maps can help users stay
oriented in a large menu tree
Effective for providing overviews to
minimize user disorientation.

20
Example of a Menu Map Lycos Site Map
21
4. Acyclic and Cyclic Networks

Useful for
social relationships
transportation routing
scientific-journal citations

Can cause confusion and

disorientation.

22
Menu Structures
23
i. Introduction
ii. Task-Related Menu Organization
iii. Single Menu
iv. Combination of Multiple Menus
v. Content Organization
vi. Fast Movement Through Menus
vii. Data Entry with Menus: Form Fill-In, Dialog
Boxes and Alternatives
viii. Audio Menus and Menus For Small Displays

24
 Task-related grouping in
tree organization
1. Create groups of
logically similar items
2. Form groups that cover
all possibilities
3. Make sure that items
are non-overlapping
4. Use familiar
terminology, but ensure
that items are distinct
from one another

25
 Item Presentation Sequence
The order of items in the menu is important, and
should take natural sequence into account when
possible:
Time
Numeric ordering
Physical properties (e.g. increasing or decreasing
length, area, volume, etc)
When cases have no task-related orderings, the
designer must choose from such possibilities as:
Alphabetic sequence of terms
Grouping of related items
Most frequently used items first Adaptive menu
Most important items first.

26
27
 Menu layout

28
 Menu layout (cont.)
Titles
For single menus, use a simple descriptive title.
For tree-structured menus, use the exact same words
in the higher-level menu items as in the titles for the
next lower-level menu.
E.g. if a menu item is called Business and
Financial Services, the next screen should
have that phrase as its title.

29
 Menu layout (cont.)
Phrasing of menu items
1. Use familiar and consistent terminology This
assists the users to increase the retention rate.
2. Ensure that items are distinct from one another
This is to avoid confusion of users and not commit
gulf of execution or evaluation.
3. Use consistent and concise phrasing This
reduces users cognitive load and build on
effective rate of retention.
4. Bring the keyword to the fore/left This is to
assist users to capture the function as reading of
the English language is universally done from left
to right. Left receives the users attention first. (e.g.
Size of type vs. Set the type size)
30
 Menu layout (cont.)
Across multiple screens of menu, establish
guidelines for consistency of at least these menu
components:
1.Titles - e.g. use centered/left justify for title
2.Item placement - e.g. use centered/left justify,
use blank line to separate meaningful groups of
items.
3.Instructions e.g. instruction (e.g. about help,
traversal, function key usage) placed in the same
position.
4.Error messages e.g. appear in consistent place
with consistent terminology.

31
i. Introduction
ii. Task-Related Menu Organization
iii. Single Menu
iv. Combination of Multiple Menus
v. Content Organization
vi. Fast Movement Through Menus
vii. Data Entry with Menus: Form Fill-In, Dialog
Boxes and Alternatives
viii. Audio Menus and Menus For Small Displays

32
 Keyboard shortcuts
Supports expert use
Can make translation to a foreign language
more difficult
Bookmarks in browsers (example)
User configured toolbars (example)

33
 Form Fill-in
Appropriate when many fields of data must be
entered:
Full complement of information is visible to user.
Display resembles familiar paper forms.
Few instructions are required for many types of entries.
Users must be familiar with:
Keyboards
Use of TAB key or mouse to move the cursor
Error correction methods
Field-label meanings
Permissible field contents
Use of the ENTER and/or RETURN key.

34
 Form Fill-in Design Guidelines
Meaningful title
Comprehensible instructions
Logical grouping and sequencing of fields
Visually appealing layout of the form
Familiar field labels
Consistent terminology and abbreviations
Visible space and boundaries for data-entry fields
Convenient cursor movement
Error correction for individual characters and entire fields
Error prevention where possible
Error messages for unacceptable values
Marking of required fields
Explanatory messages for fields
Completion signal to support user control

35
36
 Format-specific field
Coded fields
Telephone numbers
Social-security numbers
Times
Dates
Dollar amounts (or other currency)

37
 Dialog Boxes
Combination of menu and form-fillin techniques.
Internal layout guidelines:
Meaningful title, consistent style
Top-left to bottom-right sequencing
Clustering and emphasis
Consistent layouts (margins, grid, white space, lines,
boxes)
Consistent terminology, fonts, capitalization, justification
Standard buttons (OK, Cancel)
Error prevention by direct manipulation

38
 Dialog Boxes (cont.)
External Relationship
Smooth appearance and disappearance
Distinguishable but small boundary
Size small enough to reduce overlap problems
Display close to appropriate items
No overlap of required items
Easy to make disappear
Clear how to complete/cancel

39
 Novel design combining
menus and direct
manipulation
Pie menus/ Marking menus
Control menus
Flow menus (The FlowMenu
is a command-entry system
for interactive display
surfaces with pen-based
input.)
Toolglass

40
 Menu systems in small displays and situations
where hands and eyes are busy are a challenge.

Audio menus
Verbal prompts and option descriptions
Input is normally verbal or keypad
Not persistent, like a visual display, so
memorization is required.
Request users can avoid listening to options
E.g. Microsoft Vista Speech Recognition.

41
 Menu for small displays
E.g., entertainment, communication services
Learnability is a key issue
Hardware buttons
Navigation, select
Expect interactions
Tap interface
GPS and radio frequency identification provides
same automatic input

42
43
i. Introduction
ii. Task-Related Menu Organization
iii. Single Menu
iv. Combination of Multiple Menus
v. Content Organization
vi. Fast Movement Through Menus
vii. Data Entry with Menus: Form Fill-In, Dialog
Boxes and Alternatives
viii. Audio Menus and Menus For Small Displays

44