Details of Interaction Styles
Dr.s Barnes and Leventhal
Reference/Reading

Chapter 8
Reminder





Usability is an outcome of the interaction of situational variables (task
and user characteristics) and characteristics of the user interface.
We can design the user interface but we are GIVEN the situation.
So it makes sense that to improve your chances of good usability, you
should select an interaction style that is APPROPRIATE for the
situation.
Not every interaction style or combination is appropriate for every
situation.
The commercial success of MS Windows may lead us to believe that
there is a “one-size fits all” solution for every situation, but in fact that
is not true.
Structure of Presentations

For each interaction style presented in Chapter 8,
the following information is presented (more or
less)





Definition and description of the interaction style
Situations in which the interaction style is most likely
appropriate.
Design decisions and guidelines for this interaction
style.
Overview of different options for this interaction style.
Examples.
Menu Interactions
Definition - A menu presents options or
choices explicitly
 Consists of:

a
series of options.
 an id, a title, help text, and
Summary of Situations Which
May Call for Menus

Situations:
 Task

Tasks which are tightly structured
 Users

Novices
Menu Advantages for Novices

Menus appear to have advantages for
novice users:
They can provide tightly-structured tasks
which can help the user build a conceptual
model of the task.
 Using a menu is a Recognition task.



All alternatives are presented.
Can reduce the user’s cognitive workload
Design Choices for Menus (1)

Choices in for an individual menu
 Type
of menu (e.g. Pull down or Pop up)
There are many choices of menu types because there
are many ways to explicitly present a set of options.
 At the end of this unit we will visit a number of
different styles and discuss their positives and
negatives.


Orientation of menus
 Are
choices laid out vertically or horizontally?
Design Choices for Menus (2)

Navigational Structure of Menu
 Linear
sequence of menus. User sees same
sequence of menus no matter what. Eg.
collecting responses or data on line.
 Tree-structured menus. User traverses a
hierarchical menu structure. At each menu,
user decisions guide the next menu shown.
 Menu networks - User traverses network menu
structure. Unlike tree structure, user can move
up-down, right-left...
Design Choices for Menus (3)


How does the user access the menu from the screen?
 Is the menu structure always visible or is it embedded
into the presentation. For example, in embedded
networks. Select alternatives from text item which
activates menu. (ie. Hypertext or pop-up menu).
Alternatively a menu bar is always present and visible.
How does the user physically access menu
 Touchscreens, mouse, lightpens, function keys, key
press...
Design Choices for Menus (4)

Menu architecture
 Breadth
vs. depth tradeoffs.
 How many items to put into one menu vs. how
many menus.
Many short menus vs. fewer long menus
 Some research suggests that a menu with about 4-8
items is superior to a menu with few or lots of items.


Limited depth seems to lead to higher
performance and satisfaction levels
Design Choices for Menus (5)

Content and structure of categories (what to
group together)
Should not be arbitrary
 Categories should not overlap
 Categories should not contain extraneous
items.

Design Choices for Menus (6)

Ordering of items within a single menu
When possible use a natural or temporal
ordering.
 Other orders - alphabetical or frequency-based.


Menu titles, phrasing of items, graphical
layouts should strive for clarity.
Guidelines for Menu Design (1)

Support Good Task Match
The menu structure should follow the semantic
organization of the task: linear, hierarchical or
network (ref, Shneiderman, 1982, Table 3.1)
 Match menu structure to task structure (ref,
Mayhew, 1999)
 Menu categories should be distinctive and should
reflect the task (ref, Shneiderman, 1982, Table 3.1)

Guidelines for Menu Design (2)

The menu architecture should support Wayfinding
and Menu Navigation




Allow users to navigate menus in a consistent way (ref,
Mayhew, 1999)
Allow the user to move back to previous menus and to return
to the main menu or home base (ref, Shneiderman, 1982, Table
3.1, Instone, Mynatt, Leventhal, 1992)
Provide navigational information on each screen. The user
should know how to move between menus (ref, Shneiderman,
1982, Table 3.1)
User should know where they are in the menu structure at all
times (ref. Shneiderman, 1982, Table 3.1, Instone, Mynatt,
Leventhal, 1992)
Guidelines for Menu Design (3)

Selection Method (selecting an option)




Choices include keyboard characters, cursors, and
pointing devices (ref. Shneiderman, 1982)
Provide selection defaults when possible (ref. Mayhew,
1999)
Provide feedback for selections (ref. Mayhew, 1999)
Selection method should support both speed and
accuracy, so the “right” answer for selection method
may vary based on the number of items in the menu.
For long menus, use of letter codes may be better than
use of a pointing device (ref., Mayhew, 1999)
Guidelines for Menu Design (4)

Ordering and presentation of menu options
In menu, items should be logically organized (ref.
Shneiderman, Table 3.1) . Possibilities include
alphabetical, frequency of choice, sequencing within
the task or the conventions of the task (ref. Mayhew,
1999)
 Support shortcuts for frequent or expert users (ref.
Shneiderman, 1982)

Guidelines for Menu Design (5)

Selection of menu type



May be limited by guidelines for platform
If there is plenty of screen real estate, consider
permanent menus. High frequency use may call for
pop-up or user invoked menus (ref. Mayhew, 1999)
Less commonly used menu types may be appropriate in
some situations


Pie menus may be fast for situations with few options
Command based (user types a letter or number for selection)
may be appropriate for long lists of options or with interactive
devices that are either unable to display visual interactions (e.g.
VT100 terminals) or that are hampered by visuals (eg. Cell
phones, personal digital assistants)
Examples of Improving Menu
Design
Barbee's
 Music example
 In-class exercise

Book 8.2.11 In-class exercise - find
the errors and correct

Some students in CS 205 have just received the
assignment “Paradise Travel.” As part of the
Paradise Travel problem, users are able to create
trips to: Florida, Barbados, Cedar Point or Casino
Windsor. For each trip that they create, they
specify the dates of the trip, the number of
travelers, and the price range of the hotel that they
wish to stay in. Students in CS 205 are to use
menus to allow users to build, modify and delete
their trips as well as a menu to manage their trip
portfolio.
Sample Solutions
PARADISE TRAVEL
Trip Portfolio Options
AA Build a trip
AB Remove a trip
ACQuit Paradise Travel
ADView a trip
AE Edit a trip
Type your choice of option by
typing the letters of the option
PARADISE TRAVEL
Trip Portfolio Management
B Build
EEdit trip
DEdit destination
VView
R Delete
QQuit Paradise Travel
Worksheet for Your Answer
Characteristic of
Tong's Menu
Characteristic of
Melvin's Menu
Relevant
guideline
Characteristic of
Tong's Menu
AE
trip
Edit
Characteristic of
Melvin's Menu
a
E
Edit
trip
D
Edit
destination
AA Build a trip
AB Remove a trip
AC Quit Paradise
Travel
AD View a trip
AE Edit a trip
Melvin has a
blank line for
invoking
the
menu choice.
R
Delete
Relevant guideline
Categories should not overlap from
the user's perspective, even if they
seem to be different categories to
the developer. In Melvin's menu,
the destination would seem to be a
subset of trip.
Choose a menu structure that most
closely matches the structure of the
user's task. When possible, use a
natural ordering of options within a
menu. The "natural" ordering may
follow from the user's task. In
Tong's menu, the quit is in the
middle of the other choices.
Typically we would think of Quit as
being
a final
choice. through the
Facilitate
wayfinding
menu structure. Provide a clear
home base for the menu structure
Melvin's blank line does not give a
lot of cues as to how to move from
this menu to another.
Use consistent menu layouts, terminology
for options and selection strategies. For
example, many menu interactions use
typed numbers or letters as the selection
mechanism. If this is the case in your
design, use a consistent strategy to number
or letter your menu options. Melvin has
used the first letter of each choice for his
option designator, except for Delete.
Specific Menu Types – Full
Screen
PARADISE TRAVEL
Trip Portfolio Options
AA Build a trip
AB Remove a trip
ACQuit Paradise Travel
ADView a trip
AE Edit a trip
Type your choice of option by
typing the letters of the option
Specific Menu Types – Layered,
Context Dependent



One menu type is to present multiple layers of the
menu at once. The lower levels are dependent on
what has been selected at the highest level.
The menu options may be presented horizontally
or vertically.
An example of this kind of choice would be the
Lotus-style menus of Lotus 1-2-3 for DOS
Example Lotus Type Menus
Files
Open
Records
Utilities
Save
Rename Exit
Files
Backup
Records
Restore
Utilities
Example Menu Type – Pop Up
Pop-up menus are closed until activated by
user and then typically stay on screen until
explicitly closed.
 May be more efficient for frequently used
menus because the user “pops” the menu up
in place.

Sample from Open Look
x
Workspace
Programs
x
Utilities
x
Properties…
Help …
Desktop Intro..
Exit …
Menu Types - Walking or
cascading

Similar to layered context dependent menus
in the sense that making a menu selection
brings up another menu.
Choice A Choice B
Choice A
Option 1
Option 2
Option X
Option X
Option X.1
Option X.2
Option Z
…
….
More Menu Types - Pull Down
Example pull down
 This is the “apple” menu

Menu Types - Additional
Iconic menu
 Check boxes (multiple options)

Menu Types - Pie Menus

"Pie menus are a naturally efficient user-interface technique -directional selection of pie slice-shaped targets. The cursor starts out in
the inactive center region of a pie, and all target slices are large,
nearby, and in different directions. Pie menus are quite easy for new
users. You simple follow the pop-up directions to use them. They are
also extremely efficient for experienced users. Once you know the
directions, you can quickly and reliably 'mouse ahead' without looking.
Fitts' Law explains the pie menu advantage -- their fast selection speed
and low error rate is due to their large target size and the small distance
between each item.” (ref, Welcome to Pie Menu Central By Don
Hopkins http://www.piemenu.com/)
Sample Pie Menus
Function keys
A function key is similar to a menu option,
except that selection is done by typing a
key.
 Most general interaction libraries provide
simple functions for defining and displaying
function key settings.

Summary

Summary
 Menu
parameter handout
Review problem
 Case Study

 Brain
Surgeon