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 … according to Dix et al.
Command line, menus, …, WIMP, …
“Look and feel”
Some interaction style details:
“Theory, principles, and (especially) guidelines”
Menus, form fillin

3. About Interaction (cf. Dix et al., ch. 3)
About Dix et al. …
Recall, Dix et al. book a bit of a standard for graduate HCI courses
And a British book at that
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 Hutchins, Norman, et al.
(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 (from Hutchins, Hollan, and Norman 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.
Dix et al. from Abowd and Beale
This interaction framework has 4 parts, as shown in figure at right
user
input
system
output
Each has its own unique “language”
interaction  translation between languages
problems in interaction = problems in translation
Sound familiar …

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
intentions
state
interpreted

8. Two Schemata E.g., start at “u = user (intentions)” intentions state
interpreted

9. BTW – “Ergonomics” (though touched on earlier)
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.

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

11. 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?

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

13. Menus (much as Shneiderman, more later)
Set of options displayed on screen
Options visible
less recall - easier to use
rely on recognition, so names should be meaningful
Less cognitive effort
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

14. Natural Language (as Shneiderman)
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 …”

15. Query Interfaces (from Dix et al.)
“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

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

17. Spreadsheets (Separated as an interaction style)
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

18. WIMP Interface (Dix et al. separate)
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

19. WIMP “Look and Feel”
Lots of things user can interact when using “direct manipulation” ifs.:
Main WIMP components
windows, menus, icons
Buttons
Dialogue boxes …
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").”

20. More Widgets (or interface elements) (… as seen in QT)
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

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

22. Menu Design Details

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

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

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

26. Task-Related Menu Organization (important ideas …)
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”

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

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

29. Single Menu Types – For Long Lists (and other arcane ideas …)
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.”

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

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

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

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

34. Content Organization for Menus 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:

35. 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 such as:
Alphabetic sequence of terms
Grouping of related items
Most frequently used items first
Most important items first

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

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

38. Finally, Fast Movement Through Menus
Know (and accommodate) thy user)
E.g., keyboard shortcuts
Supports expert use
But, can make translation to a foreign language more difficult
Bookmarks in browsers
User configured toolbars

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

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

41. and, 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

42. Data Entry with Form Fillin (FYI, more guidelines)
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)

43. Data Entry with Dialog Boxes (FYI - more guidelines)
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

44. Novel Menu Designs (Finally, Finally)
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

45. End http://graphics.cs.columbia.edu/courses/csw4170/syllabus-15f.htm
Feiner course with text