The Interaction

1
The Interaction

• CptS 443
• Human Computer Interaction

2
Overview

• Interaction Models
• understand human-computer communication
• Ergonomics
• Physical characteristics of interaction
• Context
• Social
• Organizational

3
Task Analysis

• Domain - area of expertise
• e.g. web site design
• Concepts - important aspects
• e.g. HTML, Java, JPEG, editor, browser
• Task - operation within domain
• e.g. design a web page
• Intention - specific action toward goal
• e.g. insert a picture here

4
The Execution-Evaluation Cycle

• Execution
• Establish the goal
• Form the intention
• Specify the action sequence
• Execute the action

• Evaluation
• Perceive the system state
• Interpret the system state
• Evaluate the system state

5
Pressing a Button

• Goal See whats underneath a window
• Intention Click the minimize button
• Sequence Find, move, click
• Execute Move hand, press finger down
• Perceive Open eyes, look
• Interpret Button pressed, window smaller
• Evaluate Mission accomplished

6
Problems

• Gulf of Execution
• How do I do X?
• Actions allowed by system should correspond to
  those intended by user
• Gulf of Evaluation
• What just happened?
• Distance between physical presentation and the
  expectation of the user

7
Interaction Framework
Interface
O Output
observation
presentation
S Core
U Task
performance
I Input
articulation
8
Turning on the Lights
9
Turning on the Lights
power
photons
lights
circuit
wiring
flip
switches
10
The Framework and HCI
Social Context
Screen Design
Ergonomics
Dialog Design
11
The Ergonomics of Arrangement

• Functional
• Related contols and displays grouped
• Multiple device remote controls
• Sequential
• Controls and displays grouped by task order
• Real menus
• Frequency
• Frequently used controls easier to access
• Car

12
Physical Ergonomics

• How comfortable is the user?
• Position - fatigue
• Temperature - concentration
• Lighting - eyestrain or glare
• Noise - hearing loss
• Time - exposure
• Color - eyestrain, color blindness

13
Social Context

• How does social context affect interaction?
• Others - desire to impress, competition, fear of
  failure
• Motivation - fear, allegiance, ambition,
  self-satisfaction
• Inadequate systems cause frustration, lack of
  motivation

14
Interaction Styles

• What is the nature of the interface?
• Command line
• Menus
• Natural language
• Query dialog
• Forms
• WIMP

15
Command Line

• First interactive dialog style
• Direct - no parsing through choices
• Flexible - options, iteration
• Memory - commands must be memorized
• Consistent, meaningful names
• vocabulary of the user
• Slow learning curve

16
Menus

• Shows available choices
• Faster learning curve
• Familiar from dining out
• Indirect - parse through all options
• Text or graphics
• Keyboard or mouse
• Press the Windows key

17
Natural Language

• Most attractive at first glance
• Ambiguous sentences
• The man hit the boy with the stick
• Who is holding the stick
• Ambiguous words
• Cumbersome
• Fast learning curve
• Invoke the stupid paper clip

18
Query Dialog

• Questions and Answer
• Multiple choice, true/false or codes
• Fast learning curve
• Restricted domains
• E.g. setting up an O/S
• Save the presentation to HTML

19
Forms

• Familiarity with paper forms
• Slots to fill information in
• Some slots blank
• Easy movement (e.g. tab key, mouse)
• Fast learning curve
• Direct
• Add student to rolodex

20
WIMP

• Windows
• Icons
• Menus
• Pointers
• Also
• Buttons
• Pallettes
• Dialog Boxes

21
Windows

• Multiple simultaneous tasks on screen
• Layout policies
• Tiling - adjacent windows
• Cascading - overlapping windows
• Scrollbars - displayed portion of contents
• Decorations
• title
• minimize, maximize, close buttons

22
Icons

• Simple pictoral representations
• Minimized windows
• System elements
• Garbage can
• Floppy disk
• Folder
• Globe

23
Pointers

• Manifestation of the mouse on the screen
• Basically a moving icon
• shape indicates mode
• arrow
• hourglass
• cross hairs
• hot spot - pixel that pointer pointing at

24
Menus

• Ordered lists of operations
• Selected item is highlighted
• Cascading sub-menus
• Menu bar
• horizontal menu
• cascading vertical sub-menus
• Popup menus

25
More menus

• Pinned menus
• Keep popular items on the screen
• Indicated with a thumbtack icon
• Keyboard accelerators
• Function keys, alt-keys
• Efficient expert operation
• Pie menus

a b c d e f g h
26
Menu Organization

• How are menu items organized
• Importance
• Frequency
• Separate opposite functionality
• Hicks Law

Time to decide .15 lg(choices1) seconds
27
Buttons

• One item menus
• Individual buttons
• Push button - invokes a command
• Toggle button - changes state when clicked
• Button groups
• Radio buttons - only one selected
• Check boxes - any combination

28
Toolbars

• Collections of small buttons
• Functionally a menu of icons
• Customizable
• Trouble recognizing icons
• place text next to/instead of icon
• tool tips - text that appears when pointer still
• Palettes - indicate mode

29
Dialog Boxes

• Interactive communication
• Task oriented
• Wizards
• Alerts
• Exclusive
• On top

30
Screen Design and Layout

• What goes where
• Presenting information
• Aesthetics vs. utility
• Knowing what to do
• Culture

31
Presenting Information

• How is data best organized geometrically
• Sorting
• alphanumerically
• size
• first name/last name
• Alignment
• decimal point

32
Aesthetics vs. Utility

• How fancy can my interface be?
• Foreground/Background
• Background should not be distracting
• High contrast
• Counter
• gap between foreground elements
• User interest, novelty
• Sales - the demo factor

33
Knowing What to Do

• How can we make the interface obvious to the
  user?
• Style guides
• Consistency
• Familiarity
• Affordances
• handles lift
• buttons push

34
Culture

• Not everyone is American
• Internationalization
• Resources - allow customization
• language
• color
• Icon meanings
• meaning of check marks vs. x marks