COMP 388/441 HCI: 07 - Menu Selection, Forms, and Dialog Boxes

COMP 388/441 HCI: 07 - Menu Selection, Forms, and Dialog Boxes
07 - Menu Selection,
Forms, and Dialog Boxes
Menus
Overview
 Offer cues, users can categorize actions easier (no

syntax recall required)
 Especially effective when users have little training, use
the UI intermittently, are unfamiliar with the
terminology or need help structuring their decision
making process
 Can also be appealing to expert frequent users
 Goal: Create a sensible, comprehensible, memorable,
and convenient organization relevant to users’ tasks
 Some issues/challenges:
Space (often the number of choices is quite large),
complexity, organization (e.g., alphabetical vs. frequency of
use), categorization, phrasing of items, sequence of items,
graphic layout and design, shortcuts, online help, error
correction and selection mechanisms
Classification of Menus
 Single Menus
Choice between two or more items, may allow multiple actions, may
pop up on the current work area or remain permanently available
 Linear Menu Sequences
Series of interdependent menus that guide users through a series of
choices; effective for novice users (guidance, one decision at a time,
e.g., “Wizard,” shopping cart, installation routine)
 Simultaneous Menus
Present multiple active menus at the same time, allow users to enter
choices in any order, effective for experienced users, require more
display space
 Tree-Structured Menus
Categorize similar items and create tree structure, mutual exclusive
groups with distinct identifiers; Can be extremely large without
cluttering the display (finding meaningful categories/grouping is
crucial)
 Acyclic and Cyclic Menus (Network Structures)
Provide access from a menu item from different menu branches, can
be faster, potential of getting lost higher (WWW is a good example)
Different Menu Forms
 Pull Down Menus

Always visible, usually on a top-menu bar
 Toolbars, Iconic Menus, Palettes
Display all the actions, user can apply them to displayed objects
 Pop-Up Menus
Appear on the display as a response to a click, usually context
depending (i.e., the content of the menu depends on the location of
the cursor/mouse pointer), can be organized in a circle (pie menu)
 Embedded Menus and Hotlinks
Menu is part of the content (e.g., text, maps with embedded links),
not explicit, no enumeration, very popular in Hypertext environments,
permit items to be viewed in context, eliminate the need for a
distracting and screen-space wasting explicit menu, help to keep the
user focused on the task and objects of interest
Menus for long lists
 Problem: Limited screen space. If tree structured

menus are not meaningful, here are some other
options:
 Scrolling Menus (display only a portion of a menu)
 Combo Box as Addition (additional text entry possible)
 Fisheye Menus (all items displayed at once but only the items
near the curser are enlarged, e.g., Apple’s “Dock”)
 Sliders (useful if numerical choices need to be expressed
through a menu)
 Alpha-Sliders (slider that works with the alphabet, for
instance, to locate phone book entries)
 Two Dimensional Menus (≈ multi column menus; provide a
good overview, reduce the number of required actions and
allow rapid selection; popular in webpage design in order to
provide a single screen overview)
Content Organization
 Goal:
 Reduce time to learn
 Increase speed of performance
 Reduce error-likeliness
 Improve retention over time
 Can be achieved through meaningful:
 Grouping of menu items
 Development of presentation sequences of items
 Layout of menus and items
Grouping of menu items
 Common problems: Overlapping categories,
extraneous items, conflicting classifications in the
same menu, unfamiliar jargon, generic terms
 Guidelines:
 Create groups of logically similar items
 Form groups that cover all possibilities
 Make sure that items are non-overlapping (e.g.,
“Entertainment and Events” (overlapping) vs. “Sports and
Concerts” (non-overlapping))
 Use familiar terminology and ensure that items are distinct
from one another
Presentation sequences of items
 If task-related ordering possible:
Chronological, numerical (ASC vs. DESC), physical
properties (INCR vs. DECR. - e.g., weight, volume, length,
temperature)
 If task-related ordering is not meaningful:
Alphabetical, grouping of related items, frequency
of use, importance (e.g., emergency situations)
 Some empirical data:
 (A) Alphabetic vs. (B) categorical/grouping vs.(C) random
Note: The nature of the instructions, the size of the menu and
the familiarity with the items has crucial influence
 (A) is preferable if the items are known
 (B) is preferable in large menus or if the items are not known
 (C) is almost never preferable
 Frequency of use: Adaptation of menu to current usage
pattern (Note: Careful, might undermine learning)
Layout of menus and items - (A) Menu titles
 Need to be descriptive and memorable
 Single Menu: Simple description that
identifies the situation
 Linear sequence menus: Accurate
representation of the stages in the linear
sequence
 Tree menu: If possible use terms that clearly
indicate the root structure of a menu tree, use
high-level menu items as titles for low-level
menus (reassurance effect)
Layout of menus and items - (B) Phrasing of menu items
 Item must be comprehensible (Note: individual
words might not be familiar to some users)
 Some guidelines:
 Use familiar and consistent terminology (depending
on user community)
 Make sure that items are distinct from one another
 Use consistent and concise phrasing
 Bring the keyword to the front in order to reduce
scanning time
Layout of menus and items - (C) Graphic layout and design
 Concerns issues such as screen-width, -length,
display rate, character set, highlighting techniques, ...
 Some Guidelines:
 Titles: Preferably left centered
 Items: Preferably left centered, number preceding item
(if numbered), separate groups by blank line or
separator line
 Instructions: Should be identical in each menu and
placed in the same position (e.g., shortcut instructions)
 Error messages: Need to appear in consistent
positions and use consistent syntax and terminology
 Status reports: If possible, indicate on what level in a
menu structure a user is at the moment (indented, font
size, position marker: +---, -+--, --+-, ---+)
Fast movement through menus
 Goal: Accelerate the movement through

menus (in particular for expert users)
 Some means:
 Keyboard shortcuts (Note: Place shortcut
instruction next to the menu item)
 Bookmarks
 Macros and toolbar shortcuts (possibly
customizable) for repetitive tasks
Forms
Data Entry - 1/2
 Meaningful title: Identify the topic and avoid computer

terminology
 Comprehensible instructions (e.g., “Type Address” vs.
“You/user should type X”, “Type” vs. “Enter”)
 Logical grouping and sequencing of fields: Arrange
related fields together, use sequence of fields that is
consistent with common pattern (e.g, city, state, zip)
 Ensure a visually appealing layout of the form
(alignment, margins, ... )
 Use consistent terminology and abbreviations
 Align visible space with actual boundaries of data
entry fields
 Enable convenient cursor movement (e.g., tab-key)
Data Entry - 2/2
 Error correction for individual characters and entire

fields (easy repair possible)
 Error prevention (e.g., Integer field does not allow
characters)
 Error messages for unacceptable values should
indicate how to fix the problem
 Provide immediate feedback (e.g., real-time feedback
vs. HTML “submit”)
 Clearly mark optional fields (e.g., *)
 Provide explanatory messages for fields (e.g., pop-up
textbox)
 Use a completion signal (e.g., submit button), avoid
automatic submission, hence allowing for review
Format Specific Fields
 Text Alignment: entry left, display left

 Number Alignment: entry left/right, display right, line
up decimal points
 Special fields:
 Phone number
 Social security number
 Time, date
 Amount (currency)
Clearly indicate what to enter, label and arrange fields in a way

that makes it clear what to enter where.
Additionally: Provide help in form of pop-up calendars, maps, ...

Dialog Boxes
Dialog Boxes
 Purpose: Interrupt user task to request user input

(e.g., selection option, limited data entry, confirmation)
 Consistency is key! Prepare special dialog box
guidelines. Examples:
 Title, alignment, size, aspect ration, standard margins within
boxes, visual orientation (e.g., “cancel” button always on the
bottom right)
 Other guidelines:
 Make size as small as reasonable
 Popup box should appear next to the click, not on top of it,
never hide the context!
 Enable easy distinction between usual work area and dialog
box
 Use multiple boxes or tabbed areas if a lot of content is to
display
Audio Menus and Menus

for Small Displays
Audio Menus
 ≈ Instruction prompts and list of options are spoken to the

user. The user responds by using a keyboard, touch phone
or by speaking
 Challenge: Audio menus commonly need to be memorized
(visual menus are persistent). The user must compare
each option with the goal and place it on a scale (“no
match at all” to “perfect match”)
 Some guidelines:
 Provide functions to repeat the options, provide exit mechanism
(e.g., if the user is inactive for a few seconds)
 Avoid complex menu structures (limit to 3-4 choices), however, this
highly depends on the nature of the application
 Provide dial-ahead capabilities for frequent users
 Input: Simple voice recognition (e.g. press 9 or say “nine”),
more advanced recognition of key words, natural language
recognition
Menus for Small Displays

Overview
 2 application domains:
 Entertainment (e.g., game boy) - involves long
sessions of informal, content-intensive interaction
 Information and Communication services (e.g.,
calendars, address book, phones, inventory
management) - repetitive, brief, and highly
structured sessions
 Key challenge: Display size (UI becomes more
temporal, only part of the information can be
presented at a time)
 Key issues for such applications:
 Learnability (high competition!)
 Responsiveness
Menus for Small Displays

Design considerations/guidelines
 Account for target domain
 Dedicated device means dedicated UI
 Allocate functions appropriately, consider
usage frequency and importance
 Simplify: Focus on important functions,
relegate others to other platforms (e.g.,
IPod/ITunes integration)
 Design for responsiveness (e.g., use
dedicated buttons to allow fast access to
common features), plan for interruptions,
provide continuous feedback
 Eliminate unnecessary words, letters, spaces
The End
Questions?

COMP 388/441 HCI: 07 - Menu Selection, Forms, and Dialog Boxes

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

COMP 388/441 HCI: 07 - Menu Selection, Forms, and Dialog Boxes

Uploaded by

Copyright:

Available Formats

COMP 388/441 HCI: 07 - Menu Selection, Forms, and Dialog Boxes

 Offer cues, users can categorize actions easier (no

Different Menu Forms

 Pull Down Menus

Menus for long lists

 Problem: Limited screen space. If tree structured

Fast movement through menus

 Goal: Accelerate the movement through

Data Entry - 1/2

 Meaningful title: Identify the topic and avoid computer

Data Entry - 2/2

 Error correction for individual characters and entire

Format Specific Fields

 Text Alignment: entry left, display left

Clearly indicate what to enter, label and arrange fields in a way

Additionally: Provide help in form of pop-up calendars, maps, ...

 Purpose: Interrupt user task to request user input

Audio Menus and Menus

 ≈ Instruction prompts and list of options are spoken to the

Menus for Small Displays

Menus for Small Displays

You might also like