UNIT-2: Designing the User Interface:Strategies for Effective Human-

Computer Interaction
Task-Related Organization:

"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."

Single Menus:

• Binary Menus

 Mnemonic letters
 Radio Buttons
 Button Choice

What is your marital status?

o Single
o Married
o Widowed/divorced/separated
• Multiple-item Menus

• Multiple-selection menus or check boxes

• Pull-down, pop-up, and toolbar menus

– Pull-down menus

• Always available to the user by making selections on a top menu bar

– Pull-down menus (cont.)

• Key board shortcuts

– E.g., Ctrl-C important to support expert user efficiency

 • Toolbars, iconic menus, and palletes

– Offers actions on a displayed object

• Pop-up menus

– Appear on a display in response to a check or tap with a pointing

device.

• Menus for long lists

– 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 filed.

• Fisheye menus display all of the menu items on the screen at once, but show
only items near the cursor at full size.

– 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 thousand of items.

– 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.

• Embedded menus and hotlinks

– Embedded menus are an alternative to explicit menus

– It is natural to allow users reading about people, events, and places to retrieve
detailed information by selecting menus in context.

Combination of multiple menus:

• Linear menu sequences and simultaneous menus

– Linear

• Guide the user through complex decision-making process.

– E.g. cue cards or "Wizards"

 • Effective for novice users performing simple tasks

– Simultaneous

• Present multiple active menus at the same time and allows users to enter
choices in any order

• Tree-structured menus

– Designers can form categories of similar items to create a tree structure

• E.g., fonts, size style, spacing

– Fast retrieved if natural and comprehensive

– Use terminology from the task domain

– Expanding menus maintain the full context of each choice

• E.g., Windows Explorer

• Menu Maps

– Menu maps can help users stay oriented in a large menu tree

– Effective for providing overviews to minimize user disorientation.

– Acyclic and Cyclic Networks

– Useful for

– social relationships

– transportation routing

– scientific-journal citations

Can cause confusion and disorientation

Content Organization:

• Task-related grouping in tree organization

– Create groups of logically similar items

– Form groups that cover all possibilities

– Make sure that items are nonoverlapping

– Use familiar terminology, but ensure that items are distinct from one another

• 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

– 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

• Most important items first.

• Menu layout

– 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.
 • Phrasing of menu items

– Use familiar and consistent terminology

– Ensure that items are distinct from one another

– Use consistent and concise phrasing

– Bring the keyword to the left

– Graphic layout and design

• Constraints

– screen width and length

– display rate

– character set

– highlighting techniques

– Establish guidelines for consistency of at least these menu components:

– Titles

– Item placement

– Instructions

– Error messages

– Status reports

– Techniques

• Indentation

• Upper/lower case characters

• Symbols such as * or - to create separators or outlines

• Position markers

• Cascading or walking menus

• Magic lens

Fast Movement Through Menus:

• Keyboard shortcuts
 – Supports expert use

– Can make translation to a foreign language more difficult

– Bookmarks in browsers

– User configured toolbars

Data Entry with Menus: Form Fill-in, Dialog Boxes, and Alternatives

• 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.

• Format-specific field

– Coded fields

• Telephone numbers

• Social-security numbers

• Times

• Dates

• Dollar amounts (or other currency)

• Dialog Boxes

– Combination of menu and form fill-in 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

– 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

• Novel design combining menus and direct manipulation

– Pie menus (example here)

– Control menus

– Marking menus

– Flow menus

– Toolglass

Audio Menus and Menus for Small Displays

• 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

• 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