Upload
vivian-cox
View
215
Download
1
Tags:
Embed Size (px)
Citation preview
CMPUT 301: Lecture 14The Interaction
Lecturer: Martin JagersandDepartment of Computing Science
University of Alberta
Notes based on previous courses byKen Wong, Eleni Stroulia
Zach Dodds, Martin Jagersand
2
Today:
• Models of interaction
• Interaction styles
• Elements of WIMPS
3
Models of Interaction
• Terms:– goal
– to be accomplished
– domain– area of discourse
– tasks– operations to
manipulate domain concepts
– intention– specific action required
to meet goal
– core language– computational attributes
of the domain relevant to the system
– task language– psychological attributes
of the domain relevant to the user
4
Norman’s Model of Interaction
• Execution-evaluation cycle:1. establishing the goal
2. forming the intention
3. specifying the action sequence
4. executing the action
5. perceiving the system state
6. interpreting the system state
7. evaluating the system state with respect to goals and intentions
5
Norman’s Model of Interaction
• Why interfaces cause problems:– gulfs of execution difference between
1. the user’s formulation of the actions needed to reach the goal and
2. actions allowed by the system
– gulfs of evaluation distance between
1. the presentation of the system state and 2. the expectation of the user
6
Interaction Framework
• Framework:– four components
– language for each component
– input and output components form the interface
– four translations
– execution, state change, then evaluation
System UserInterface
7
Interaction Framework
• Does the (users) task language map easily to the input language?– e.g.,
– turning on only a certain section of room lights
– running a program whose icon is not visible
8
Interaction Framework
• Does the input language reach all system states?– e.g.,
– remote control unit with no way to access certain functions
9
Interaction Framework
• How to express system state with limited output devices?– e.g.,
– limited screen space to present the entire system state
10
Interaction Framework
• How effectively can the user interpret and evaluate the output?– e.g.,
– unmarked analog clock
– misleading or no feedback
– previewing facilities
– advice
11
Frameworks and HCI
12
Ergonomics
• Ergonomics:– Human factors engineering– the study of the physical characteristics of the
interaction– e.g.,
– physical controls
– physical environment
– qualities of the display
13
Ergonomics
• Arrangement of controls and displays:– efficiently accessible– avoid frustration– well organized
14
Ergonomics
• Organizing controls and displays:– functional
– group by function
– sequential– arrange to reflect order of use in a task
– frequency– most commonly used controls are most accessible
15
Ergonomics
• Health issues:– physical position– temperature– lighting– noise– time (exposure)
16
Interaction Styles
• Common interfaces:– command line
– menus
– natural language
– question/answer and query dialog
– forms and spreadsheets
– Direct/Indirect manipulation
– WIMP
– point and click
– 3D
17
Command Line
• Example:% cat foo | tr -sc A-Za-z ‘\012’ |tr A-Z a-z | sort | uniq -c | sort -n | tail -50
18
Command Line
• Advantages– flexible and powerful– useful for repetitive tasks– Easy to define macros
• Disdvantages– more difficult to use and learn– need to recall commands (no cues)– commands may vary across systems
19
Menus
• Example:Payment Details
Payment methods:1. Cash2. Cheque3. Credit card4. Invoice
9. Cancel transaction
Choose one: _
20
Menus
• Advantages– recognize options instead of recalling– Structures learning (logical grouping and
meaningful naming)
• Disadvantages– Dangers of too many menus– Can consume lots screen space
– Consider country selection
21
Natural Language
• What:– user expresses instructions in everyday
language
• Issues:– ambiguity
– “The man hit the boy with the stick”
– restricted domains or vocabulary– e.g.,
– Train ticket buying
22
Question/Answer
• What:– user replies to a series of questions with yes/no
or multiple choice answers
• Issues:– easy to learn and use– limited in flexibility and power– e.g.,
– wizards and assistants
– Turbotax
23
Query Dialog
• What:– user constructs expressions to retrieve information
from a database
• Issues:– query language syntax– requires experience– does result match what was intended?– e.g.,
– search engines
24
Forms
• User is presented with a display resembling a paper form and enters data into fields
Advantages:– Simplifies data entry– Requires modest training
Issues:– movement around the form– input validation and correction
25
Spreadsheets
• like forms, with a grid of cells containing values and formulas
Issues:– another programming paradigm– dependencies among cells– Designed for: what-if analyses– In practice used for: lists
26
Interaction styles
• Indirect interface
1. User has to visualize in his/her mind
2. No direct feedback on state change
3. Dissociation between users command and system response
• Direct manipulation
1. Visually presents task concepts
2. Immediate reaction
3. Easy learning
4. Encourages exploration
5. Affords high subject satisfaction
27
WIMP
• What is a WIMP interface?
28
WIMP
• What:– windows, icons, menus, pointer– user in control
• Examples:– Microsoft Windows– Mac OS– X Windows + window manager– NeXTStep
29
30
Point and Click
• What:– virtually all actions take only a single mouse
click
• Examples:– web browser– multimedia (CD ROM) programs– touchscreen information kiosks
31
3D
• What:– using 3D techniques, appearances, or
workspaces
• Examples:– virtual reality– virtual worlds– shading effects on icons, buttons, etc.
32
33
3D
34
6D, n-D
• Interact with computer controlled, intelligent (??) machines:
35
WIMP Interface Elements
• Windows– overlapping, tiled
– scrollbars
– titlebars
– move, resize, raise, lower, maximize, minimize, close, etc.
36
WIMP Interface Elements
• Icons
37
WIMP Interface Elements
• Menus:– pulldown, popup, falldown, tearoff, pinup, pie– grouping, hierarchy– keyboard accelerators– consistency– too tall?
38
WIMP Interface Elements
• Pointer:– click to focus, focus follows pointer– cursor shape indicates mode– tooltips, balloon help
39
WIMP Interface Elements
• Other:– buttons
– radio buttons
– check boxes
– sliders
– toolbars
– tabs
– progress indicators
– palettes
– dialog boxes
40
Screen Design and Layout
• Presenting information:– match presentation to purpose– e.g.,
– sort file listing by name, or by date, or …
– alignment of text versus numbers
41
Screen Design and Layout
• Entering information:– use clear, logical layout of form fields– requires task analysis– alignment is important
42
Screen Design and Layout
• Aesthetics and utility:– beauty versus utility– a pretty interface is not necessarily a good
interface– still, good graphic design can increase user
satisfaction
43
Screen Design and Layout
• Knowing what to do:– style guides
– platform or company standards for the design of user interfaces
– e.g., Macintosh Human Interface Guidelines
44
Screen Design and Layout
• Knowing what to do:– affordances
– “where do I click?”
– elements should suggest, by their shape and other attributes, what you can do with them
– e.g., a button affords pushing
45
Screen Design and Layout
• Localization/internationalization:– change of language for text– alignment and layout– date formats– time formats– number formats
46
Screen Design and Layout
• Date/time formats:
47
Interactivity
• Beyond the “look” of a user interface, there is also the “feel”.
48
End
• What did I learn today?
• What questions do I still have?