1. Interaction Styles
Based on a power point file by Laura Eventual (of Bowling Green State University)
References:
Price et al.
Schneider (3e)

2. Reading References Hex & Hart son: Price et al.: Schneider: Ch. 3
Ch. 11, Ch. 12 &
§13.1 – 13.6
Schneider:
§6.1 – 6.6, 6.9, &
Chapters 7 & 8

3. Interaction Styles A central issue in User Interface Design
For many, interaction styles and designing an interaction style is the issue of HCI

4. Basic Definitions Interaction or dialogue style.
How a user interacts with a computer system.
The concept of style is central to our ability to characterize and understand the diversity of interactive systems.
The categorization of a particular interface into a particular style is often fuzzy however.

5. Overview show overhead of Goals show overhead of Constraints
show overhead of Quick Statement of Style Categories
show overhead of Common Design Guidelines

6. Overview — Interaction Styles
The choice of interface style depends on
The type of user
The task

7. Command Line Interfaces/General
Command languages rely on user recall of commands
Command language -
Although the design of a command language is a complex task, its implementation is usually simple when there is access to language development tools such as lexical analyzers and parser generators.

8. Command Line Interfaces - Some Benefits
If the sequence of commands have a highly controlled structure, that structure may help novices form a conceptual model of the system.
Expert users may feel in control of systems with command line interfaces and be able to work at speeds that are appropriate.

9. Command Line Interfaces — Design Guidelines
Overheads

10. Form Fill-in
Form fill-in user interfaces are modeled after paper forms

11. Form Fill-in/Advantages
Recognition
Only recall required is what constitutes valid data for fields
Especially useful for:
Intermittent (infrequent) users
Tasks with a lot of data entry

12. Typical Form Components
A form typically consists of:
A series of fields
An ID, a title, and possibly help text
A field consists of:
An ID (often a variable name), a prompt, help
Text, and information about the value to be entered
into the field, such as type, range, default value,
and current value
Typically, form filling is done on a screen (it could be done over the phone)
. In addition to these basic parts of a form, there can be entry and exit conditions and actions for the form and its fields.
Some examples:
A form or subform may not apply in some situations, and a failed entry condition will inhibit its activation.
When a form is entered, the action of displaying all or some fields might betaken, and the current values for fields might be displayed.
When a field is entered, the action of modifying its appearance might be taken to tell users it can be modified, an input editing buffer from an interaction library would be activated; and when the field is left, the appearance would revert.
Validation for field values might be coded as exit conditions for
individual fields, while inter-value validation might
be coded as an exit condition for the whole form.

13. Form fill-in/Issues (1)
Helping users understand how to perform error correction
Distinguishing between data and commands
e.g. The enter (return) key may serve strictly as a command key or may be permitted data

14. Form fill-in/Issues (2)
Choices of field titles and other mnemonics
Spacing of field
Type and amount of feedback to user
Usually not sufficient to just take a paper form and translate it to an electronic version

15. Form fill-in/Summary overhead — Advantages/Disadvantages
overhead —Table 3.2

16. Menu Interfaces A menu is similar in structure to a form Consists of:
A series of options
An ID, a title, help text
And …

17. Choices in Menu Design Binary (2 choices) vs. extended menus
Pull-down menus vs. pop-up menus
Tree-structured vs. linked
Embedded vs. list-oriented

18. More Choices in Menu Design
Linear sequence of menus.
User sees same sequence of menus no matter what
e.g. 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
User can ‘move’ up-down, right-left, etc.

19. More Choices in Menu Design
Embedded networks
Select alternatives from text item which activates menu
Hypertext

20. 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
Not a recall task

21. Design Issues for Menus (1)
Breadth vs. Depth tradeoffs
How many items to put into one menu
How many menus
Basic rule: limit the number of user actions
Make larger menus if necessary
Use 2D menus for many choices that can't be broken

22. Design Issues for Menus (2)
Content and structure of categories (what to group together)
Should not be arbitrary
Categories should not overlap
Categories should not contain extraneous items

23. Design Issues for Menus (3)
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
Comprehensible and distinctive

24. Guidelines for Menu Design
Shneiderman, Table 3.2
Teasley's

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

26. Natural language
This is an area that has not fared well as a practical solution to user interface problems, partly because of the difficulty of implementing efficient systems
Implementation is often based on AI techniques such as augmented transition networks

27. Direct Manipulation —Introduction
Imagine driving a car that has no steering wheel, accelerator, brake pedal ... in place of the familiar manual controls, you have only a keyboard for input. You could drive by typing in commands such as
‘Slow to 20 and turn left’.
What makes real cars easier to drive is the directness of their controls.
Each interface is specially designed for controlling some function.
Our hypothetical car has only one control — a keyboard.

28. Graphic (DM) Interaction Overview
Tools for the development of graphical or direct manipulation interfaces are part of many window toolkits.
Their implementation is most often based on the object-oriented paradigm where graphical objects represented by icons are acted on by events caused by the user, the application, or other objects.

29. DM Examples (1) Display editors:
Full screen (as opposed its line- oriented)
WordStar, Word, EMACS, vi, MacWriter
What you see is what you get
Cursor oriented
Immediate display of results (action)
Easy to reverse

30. DM Examples (2) Spread sheets, video games immediate feedback
e.g. use ‘paddles’ to hit ‘ball’
‘frog jumps across road’
easy to learn
but can become more skilled with practice
challenging
useful to advanced users as well
no syntax
no error messages
immediate feedback

31. DM Advantages
Some data suggests that graphical computer objects are easier to remember and use than keystroke objects (Cuniff & Taylor, 1987).

32. Direct Manipulation Systems Have Four Features:
Continuous representation of objects and actions of interest
Physical actions or labeled button presses manipulate objects and initiate actions
Impact of actions on objects is immediately visible
Data objects selected and operated on by simulated physical control instead of by verbal reference (e.g. ‘That one, not the one in row six’)
From Shneiderman ?

33. Where Did Idea of DM UI's Come From
Influences, philosophies grow out of UI for Xerox STAR, circa 1970's:
For the user, a familiar conceptual model, the desktop, made of icons and windows
Ability to see and point rather than remember & type
WYSIWYG
Universal commands across applications, such as MOVE, COPY, DELETE

34. STAR Failed in Marketplace!
Most users were still professional programmers who did not appreciate the interface
Cost $15,000
Little useful software
Lacked an open architecture: third party vendors could not write s/w for the STAR
Perceived as slow

35. DM Issues to Consider There are degrees of directness
The roles of space and motion of objects
Not well-understood
Choice of symbols or icons
Must be meaningful to all
Taking actions from keyboard to use mouse is distracting
CLICK 1
There are degrees of directness.
An interface may incorporate direct manipulation features, and still include features of the other dialogue styles.
An (false) assumption - mousable UI's are direct while keyboard UI's are not.
CLICK 2 The roles of space and motion of objects is not well-understood.
CLICK 3Choice of symbols or icons - must be meaningful to all .
Signs not always meaningful to all - different interpretations. What do the following icons mean?
CLICK 4. Sometimes, taking figures/actions from keyboard to use mouse is distracting.

36. DM Guidelines
Graphical representation should be appropriate and meaningful
Based on user feedback
Possible that user could add a new or compound object or action

37. Windows-based Computer Dialogues
Windows allow the user to interact with multiple sources of information at the same time, as if he/she had multiple output displays of different sizes

38. Functions/uses of Windows — Why Use Windows
Rapid access to more information than is possible with a single screen
Access to multiple sources of information
Permit combining of multiple sources of information
Independent control of multiple programs

39. Uses of Windows (2) Reminding
Different windows may set the ‘mode’ of the interaction style in another window
Windows can display multiple representations of the same task
CLICK 1
Reminding
a window (s) can be used to help users keep track of information to use in the near but not immediate future.
CLICK 2
Different windows may set the "mode" of the interaction style.
E.g.. One subset of the command language may be used in one window and another subset in another window.
CLICK 3
Windows can display multiple representations of the same task.
E.g.. if a user wants to access a database record, one window might contain the query and another window might contain a pictorial representation of the likely location of the record.

40. Visual Design (From Powell: Designing UIs)
Go over outline