1. from http://wps.aw.com/aw_shneider_dtui_7, 8
Menu Selection, Form Fillin, Dialog Boxes (Shneiderman and Plaisant Ch. 6) Interaction – Schema and Techniques (Dix et al., Ch. 3)
from 8

2. Overview What and why “frameworks (or theories) of interaction”
The big picture (again) - This time according to Dix et al.
Will compare Dix et al.’s “big picture” to others a bit, Shneiderman, Norman
As students, viewing alternative accounts useful
Overview of interaction styles
Command line, menus, …, WIMP, …
Direct manipulation last time
“Look and feel”
Details:
“Theory, principles, and (especially) guidelines”
Menus, form fillin

3. About Interaction (cf Dix et al., ch. 3)
Notion of interaction (again)
Interaction frameworks/schemas/accounts
Ergonomics
Or, human factors
Interaction styles
Command language, menus, direct manipulation
Context of interaction – social and organizational

4. Interaction Frameworks
Task
“work on task”
“commands”
System
User
“gives”
“performs”
“feedback”
Interaction:
Communication between user and system
Why have a framework?
or schema, or acccount
Recall last week’s account
Next slide
Allows “precision” in:
Explanation
Accounting for differences
E.g., gulfs of execution and evaluation
Detailing of ui elements
Presents global view
All elements receive attention
System
Model
Interface
User

5. Norman’s Account (Hutchins, Hollan, and Norman – last week’s paper)
Concentrates on user’s view of interface
(Norman’s) Stages:
user establishes goal
formulates intention
specifies actions at interface
executes action
perceives system state
interprets system state
evaluates system state with respect to goal
Some systems harder to use than others
Gulf of Execution
user’s formulation of actions  actions allowed by the system
Gulf of Evaluation
user’s expectation of changed system state  actual presentation of this state

6. Interaction Frameworks, Dix et al.
from Abowd and Beale
Their interaction framework has 4 parts
user
input
system
output
Each has its own unique “language”
interaction  translation between languages
problems in interaction = problems in translation

7. Interaction Frameworks, 2
User intentions translated into actions at the interface
 translated into alterations of system state  reflected in the output display  interpreted by the user
General framework for understanding interaction
not restricted to computer systems
E.g., opening door
identifies all major components involved in interaction
allows comparative assessment of systems
an abstraction
interpreted
state
intentions

8. BTW – “Ergonomics”
Study of the physical characteristics of interaction
Also known as “human factors”
Ergonomics good at defining standards and guidelines for constraining the way we design certain aspects of systems
Examples
arrangement of controls and displays
e.g., controls grouped according to function or frequency of use, or sequentially
surrounding environment
e.g., seating arrangements adaptable to cope with all sizes of user
health issues
e.g., physical position ), lighting, noise, environmental conditions (temperature, humidity
Use of color
e.g., use of red for warning, green for ok, awareness of color-blindness etc.

9. Recall, Interaction Styles As provided by Shneiderman – will see Dix et al.’s take next
A basic element of design –
By what method (or style) does user interact with system
5 main interaction styles
Each with advantages and disadvantages – and
such tradeoffs what design all about!
Direct Manipulation
Menu selection
Form fillin
Command language
Natural language
Usually blend, especially when users are diverse

10. Interaction Styles, Dix et al.
Again, interaction:
dialog between computer and user
Task
“work on task”
“commands”
System
User
“gives”
“performs”
“feedback”
Shneiderman
Command language
Menu selection
Form fillin
Natural language
Direct Manipulation
Dix et al.
Command line interface
Menus
Form-fills (and spreadsheets)
Natural language
Dialog boxes
Question/answer and query
“WIMP” – what is this?

11. Command Line Interfaces (Dix et al., briefly)
Way of expressing instructions to computer directly
Using function keys, single characters, short abbreviations, whole words, or a combination
suitable for repetitive tasks
better for expert users than novices
offers direct access to system functionality
command names/abbreviations should be meaningful
Typical example: the Unix system (shell)
Recall, user intentions translated into actions at interface  translated into alterations system state  reflected in the output display  interpreted by user
Are gulfs likely to be large or small?
Paradigm example last time

12. Menus Set of options displayed on screen
Options visible – less recall - easier to use – rely on recognition, so names should be meaningful
Selected by using mouse, numeric or alphabetic keys
Menu organization important
often options hierarchically grouped
organization relevant to task and use
organization much studied
E.g., alphabetical vs. task organization
Menu systems can be (more later):
purely text based, with options presented as numbered choices
graphical selected by arrow keys
graphical selected by mouse
combination (e.g. mouse plus accelerators)
“Restricted form” (or part) of full WIMP system

13. Natural Language Familiar to user
Use speech recognition or typed natural language
Problems:
Vague
Ambiguous
Hard to do well
Solutions • try to understand a subset • pick on key words
… and “promise of the future …”

14. Query Interfaces “Question/answer interfaces”
user led through interaction via series of questions
suitable for novice users but restricted functionality
often used in information systems
Query languages (e.g. SQL)
used to retrieve information from database
requires understanding of database structure and language syntax, hence requires some expertise

15. Form-Fillin Primarily for data entry or data retrieval
Screen like paper form
Data put in relevant place
Requires
good design
obvious correction facilities

16. Spreadsheets First spreadsheet VISICALC first
followed by Lotus 1-2-3
MS Excel most common today
Sophisticated variation of form-fillin
grid of cells contain a value or a formula
formula can involve values of other cells
e.g. sum of all cells in this column
user can enter and alter data
spreadsheet maintains consistency

17. WIMP Interface Windows Icons Menus (or Mice)
Pointers (or Pull-down menus)
Default style for majority of interactive computer systems
Recall, Xerox Alto
Name not as clever as once was

18. Windows
As you know …
Areas of the screen that behave as if they were independent terminals
can contain text or graphics
can be moved or resized
can overlap and obscure each other,
or can be laid out next to one another (tiled)
scrollbars
allow the user to move the contents of the window up and down or from side to side
title bars
describe name of window

19. Icons Small picture or image
Represents some object in the interface often a window or action
Windows can be closed down (iconifed)
small representation  many accessible windows
Icons can be many and various highly stylized or realistic representations

20. Pointers Important component Usually achieved with mouse
WIMP style relies on pointing and selecting things
Usually achieved with mouse
Also joystick, trackball, cursor keys or keyboard shortcuts
Wide variety of graphical images (and right bottom):

21. Menus Choice of operations or services offered on the screen
Required option selected with pointer
Problem - menus can take up a lot of screen space
Solution - menu appears when needed

22. Kinds of Menus, 1 More later …
Menu Bar at top of screen (normally), menu drags down
pull-down menu - mouse hold and drag down menu
drop-down menu - mouse click reveals menu
fall-down menus - mouse just moves over bar!
Contextual menu appears where you are (hovering)
pop-up menus - actions for selected object
Pie menus - arranged in a circle
easier to select item (larger target area)
quicker (same distance to any option)
… but not widely used!

23. Kinds of Menus, 2 Cascading menus Keyboard accelerators
hierarchical menu structure
menu selection opens new menu
and so on …
Keyboard accelerators
key combinations - same effect as menu item
two kinds
active when menu open - usually first letter
active when menu closed - usually Ctrl + letter

24. WIMP “Look and Feel”
Lots of things user can interact when using “direct manipulation” ifs.:
Main WIMP components
windows, menus, icons
Buttons
Dialogue boxes
Palettes …
Collectively, these elements known as widgets
“Window gadgets”
appearance + behavior = look and feel
Wikipedia: “… aspects of its design, including elements such as colors, shapes, layout, and typefaces (the "look"), as well as the behavior of dynamic elements such as buttons, boxes, and menus (the "feel").”

25. More Widgets (or interface elements)
All familiar from personal use …
E.g., Buttons
Individual and isolated regions within a display that can be selected to invoke an action
Special kinds
radio buttons - set of mutually exclusive choices
check boxes - set of non-exclusive choices
E.g., Dialog boxes
Information windows that pop up to inform of an important event or request information
E.g., when saving a file, a dialogue box is displayed to allow the user to specify the filename and location. Once the file is saved, the box disappears

26. Social and Organizational Context
Interaction affected by social and organizational context
Other people - desire to impress, competition, fear of failure
Motivation - fear, allegiance, ambition, self-satisfaction
Note: Inadequate systems  cause frustration and lack of motivation

27. Menu Design Details, 1 Again, menus one “interaction style”
i.e., a way in which user can “tell the system what to do”
Advantage (vs. e.g., command line) that range of “commands” is all available
Though, of course, are not all displayed at once
As noted, allows recognition vs. recall
Enhances usability for novice or infrequent users
Vs. direct manipulation
Which uses “model world” to represent system
Advantages
Possibly faster for expert users (as is command line)
Can structure task
Disadvantages
Lack of feedback of change in system state
Little metaphoric assistance in understanding task

28. Menu Design Details, 2
As with any interaction style, need consider design issues such as:
Task-related organization
Phrasing of items
Sequence of items
Graphic layout and design
Shortcuts for knowledgeable frequent users
Online help
Error correction
Selection mechanisms
Keyboard, pointing device, touchscreen, voice, etc.
Will look at:
Meaningful organization of menus
Menu techniques
Single menus, combinations of multiple menus, etc.
Menu content
Fast movement through menu selection

29. BTW, Old School Menu Design (UTPA, circa as late as 2006)
“Glass teletype”
Principle university database access
Top level – menu
Next - query with form fillin (not shown)
Finally, query results

30. Task-Related Menu Organization
Shneiderman:
"The primary goal for menu, form-fillin, and dialog-box designers is to create a sensible, comprehensible, memorable, and convenient organization relevant to the user's task.“
Menu organization provides a structuring of choices
Also, revealing system and command structure through organization
Hierarchies / tree structures
“Natural” for taxonomies
Ubiquitous
Powerful in organizing - log levels
Natural for menus
Single, etc.
E.g., WWW a cyclic network
Organization studied, e.g., alphabetical vs. frequency organization
Results: “it depends”

31. Single Menu Types, 1 Binary Menus Multiple-item Menus
E.g., radio buttons, check boxes
Multiple-item Menus
Multiple-selection menus or check boxes
Pull-down menus (right)
Always available by making selections on a top menu bar
Cascading pull-down menus at right
Key board shortcuts

32. Single Menu Types, 2 Toolbars and pallettes Iconic menus (bottom)
Offers actions on a displayed object
Iconic menus (bottom)
Also, pie menu
Pop-up menus
Appear on a display in response to a check or tap with a pointing device.

33. Single Menu Types – For Long Lists
Menus for long lists
Scrolling menus
Display first portion of menu and an additional menu item, typically an arrow that leads to next set of items in menu sequence
Demos:
Combo boxes
combine scrolling menu with a text-entry field
Sliders and alphasliders
Slider allows the selection of a value
“Alphaslider uses multiple levels of granularity in moving slider thumb and can support tens or hundreds of thousand of items.”

34. Single Menu Types – Fisheye
Fisheye menus
display all of the menu items on screen at once, but show only items near cursor at full size.
Demos
Java
Flash

35. Single Menu Types – 2-Dimen
Menus for long lists
Two-dimensional menus
“Fast and vast”
Give users a good overview of choices
Reduce the number of required actions
Allow rapid selection

36. Single Menu Types - Embedded
Embedded menus and hotlinks
Alternative to explicit menus
Natural to allow users reading about people, events, and places to retrieve detailed information by selecting menus in context

37. FYI - Combination of Multiple Menus
Linear menu sequences and simultaneous menus
Linear
Guide the user through complex decision-making process.
E.g., install
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
E.g., site map
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.

38. Content Organization Shneiderman guidelines
Task
“work on task”
“commands”
System
User
“gives”
“performs”
“feedback”
“Meaningful” grouping and sequencing of menu items important in effectiveness
Want menu structure and items to map well to task
A “guidelines” approach
Shneiderman:

39. Content Organization - Detail Shneiderman
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
Order of items is important
Should consider natural sequence, as possible:
Time
Numeric ordering
Physical properties
When cases have no task-related orderings, designer must choose from such possibilities as:
Alphabetic sequence of terms
Grouping of related items
Most frequently used items first
Most important items first.

40. FYI - Content Organization – Menu Layout, 1
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 titles for next lower-level menu.
E.g. if a menu item is called Business and Financial Services, 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
Guidelines from Shneiderman

41. FYI - Content Organization – Menu Layout, 2
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
Guidelines from Shneiderman

42. Finally, Fast Movement Through Menus
Keyboard shortcuts
Supports expert use
Can make translation to a foreign language more difficult
Bookmarks in browsers
User configured toolbars

43. Data Entry Design Details
Menu item effective for choosing item from list, but there’s more …
Textual input in particular

44. Data Entry Design Details
Menu item effective for choosing item from list, but there’s more …
Textual input in particular
Form fill-in
Set of text input boxes
Format can be constrained, e.g., mm/dd/yyyy
Dialog box
Limited data entry coupled with menu selection
Often a standardized element with guidelines

45. Data Entry with Form Fillin
Appropriate when many fields of data must be entered:
Full complement of information 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 cursor
Error correction methods
Field-label meanings
Permissible field contents
Use of the ENTER and/or RETURN key

46. FYI - Data Entry with Form Fillin (cont.)
Form-Fillin 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
Error messages for unacceptable values
Optional fields clearly marked
Explanatory messages for fields
Completion signal
Format-specific field
Coded fields
Telephone numbers
Social-security numbers
Times
Dates
Dollar amounts (or other currency)

47. FYI - Data Entry with Dialog Boxes
Combination of menu and form-fillin techniques, as Google example
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

48. Novel Menu Designs
Novel designs combining menus and direct manipulation
Pie menus
Allows “walking out” for selection
Control menus
When pointer reaches some point, command is issued
Marking menus
Release of pointing device issues command
Flow menus
Return to central rest area triggers selection and allows further choice
Toolglass
Two hands, e.g., tool palette and tool use

49. 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, e.g., phone trees!
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., cell phones!
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

50. End .