Transcript LSU/SLIS Human-Computer Interaction (HCI) Session 9 LIS 7008 Information Technologies Agenda • HW6 & Midterm • Javascript Talk • Human computer interaction Some materials from Saul Greenberg: http://pages.cpsc.ucalgary.ca/~saul/hci_topics/

LSU/SLIS
Human-Computer Interaction
(HCI)
Session 9
LIS 7008
Information Technologies
Agenda
• HW6 & Midterm
• Javascript Talk
• Human computer interaction
Some materials from Saul Greenberg: http://pages.cpsc.ucalgary.ca/~saul/hci_topics/
HW6 Working Examples
• http://slis.lsu.edu/faculty/wu/7008/fa09/nhan/7008.ht
ml
• http://slis.lsu.edu/faculty/wu/7008/fa09/apercy/7008.
html
• http://slis.lsu.edu/faculty/wu/7008/fa09/jtapp/7008.ht
ml
• http://slis.lsu.edu/faculty/wu/7008/fa09/ldegirolamo/
7008.html
• http://slis.lsu.edu/faculty/wu/7008/fa09/kcorso/kcors
o_hw6.html
• …
Midterm
Avg=75
100
90
80
70
60
50
40
30
20
10
0
1
2
A
3
4
5
6
B
7
8
9 10 11 12 13 14 15 16 17
C
D
Integrated Grade = CP*10% + HQ*15% + P*40% + M*10% (or 25%) + F*25%(or 10%)
Javascript Talk
• Posted on syllabus page and Moodle
– http://csc.lsu.edu/~wuyj/Teaching/7008/fa09/JScriptTal
k/jstalk_08.html (accessible from syllabus)
• Strategy for programming
– Build a little, test it, build more…
• Your project:
– Build a little, test, build more, test…
The Discipline of HCI
From ACM SIGCHI Curricula for Human-Computer Interaction
Moore’s Law
computer
performance
transistors
speed
storage
...
1950
1990
2030
Human Cognition
human
performance
1950
1990
2030
Human Computer Interaction
• A discipline concerned with the
Implementation
Design
Evaluation
Interactive computing
systems for human use
What are Humans Good At?
•
•
•
•
Sense low level stimuli (e.g., stress, anxiety)
Recognize patterns
Reason inductively
Communicate with multiple channels
– Voice, image, text …
• Apply multiple strategies to a task
• Adapt to changes or unexpected events
– Computers cannot
What are Computers Good At?
• Sense stimuli outside human’s range
• Calculate quickly and accurately
• Store large quantities and recall accurately
– Reproduce information accurately
• Respond rapidly and consistently
• Perform repetitive actions reliably
• Work under heavy load for an extended period
Human-computer Synergy
• Humans do what they are good at.
• Computers do what they are good at.
• Strengths of one cover weakness of the other
Types of Applications of
Interactive Systems
• Life critical
– Low error rate first and foremost
– Justifies an enormous design and testing effort
• Custom Commercial
– Speed and accuracy; training of use
• Office and Home
– Easy self-learning, low cost, high user satisfaction
• Creative task systems
– User needs assessment is very challenging
User Characteristics
• Physical
– Anthropomorphic (height, left handed, etc.)
– Age (mobility, dexterity, etc.)
• Cognitive
• Perceptual
– Sight, hearing, etc.
• Personality
– Including cultural factors
• In contrast to programmer characteristics
Modeling Interaction
(E.g., reserve air ticket)
Human
Mental Models
Task
System
Software Models
Task
Computer
User
Sight
Sound
Hands
Voice
Keyboard
Mouse
Display
Speaker
Discussion Point: Mental Models
• As a user, what do you need to know about
a machine in order to interact with it
effectively? (In other words, what is your
mental model of a system such as a vending
machine, an ATM?)
• Think about it for a minute before you see
the next slide
Mental Models
• How the user thinks the machine works
– What actions can be taken?
– What results are expected from an action?
– How should system output be interpreted?
• Mental models exist at many levels
– Hardware, operating system, and network
– Application programs
– Information resources
Stages of Interaction
Goals
Intention
Selection
Expectation
Conceptual
Model
Execution
E.g., Google interface
Evaluation
Interpretation
Perception
The GOMS Perspective
Engineering models of user’s tasks
• Goals
– What the user is trying to achieve
• Operators
– What capabilities the system provides
• Methods
– How those capabilities can be used
• Selection strategies
– Which method to choose in a specific case
Input Devices
• Text
– Keyboard, Optical Character Recognition
– Speech recognition, handwriting recognition
• Direct manipulation
– 2-D: mouse, trackball, touch pad, touch panel
– 3-D: wand, data glove
• Remote sensing
– Camera, speaker ID, head tracker, eye tracker
Keyboard
• Produces character codes
– ASCII: encodes American English characters
– Latin-1: encodes European languages characters
– UNICODE: encodes (nearly) Any language
• Pictographic languages need “entry methods”
• Keyboard shortcuts help with data entry
– Different conventions for standard tasks abound
• VT-100 keyboard standard functions are common
– See http://www.unet.maine.edu/noc/vtkey.html
– Differing layouts can inhibit usability
Design Example: QWERTY Keyboard
From http://home.earthlink.net/~dcrehr/whyqwert.html
Dvorak Keyboard
This types 30% faster.
From http://www.mwbrooks.com/dvorak/
2-D Direct Manipulation
• Match control actions with on-screen behavior
– Use a cursor for visual feedback if needed
• Rotary devices
– Mouse, trackball
• http://www.trackballworld.com/?gclid=CMfRgNKlz50CFRQeDQodoHOrsw
• Linear devices
– Touch pad, touch screen, iPod shuttle, joystick
• Rate devices
– Laptop eraser head mouse, see
http://prioritylaptopbattery.stores.yahoo.net/p0keerhemore1.html
Modeling Interaction
Human
Mental Models
Task
System
Software Models
Task
Computer
User
Sight
Sound
Hands
Voice
Keyboard
Mouse
Display
Speaker
Human Senses
5 Categories:
• Visual
– Position/motion, color/contrast, symbols
– How many colors should you use on screen? <=4.
• Too many colors confuse your eyes.
• Auditory
– Position/motion, tones/volume, speech
• Haptic
– Mechanical, thermal, electrical, kinesthethic
• Olfactory
– Smell, taste
• Vestibular
– Physical motion simulation (Disney World)
Computer Output -1
• Image display
– Fixed view, movable view, projection
• Acoustic display
– Headphones, speakers, within-ear monitors
• Tactile display
– vibrotactile, pneumatic, piezoelectric
• Force feedback
– dexterous handmaster, joystick, pen
Computer Output -2
• Inertial Display
– Motion-based simulators
• Olfactory Display
– Chemical (requires resupply), e.g., fragrance
• Locomotive display
– Stationary bicycle, treadmill, ... (trip hazards)
• Temperature Display
Four Stages of Interaction -1
• Forming an intention
–
–
–
–
“What we want to happen”
Intention: an internal mental characterization of a goal
The goal may comprise sub-goals (but rarely well planned)
For example, “write e-mail to grandma”
• Selection of an action
– Review possible actions and select most appropriate
– For example, “use Outlook to compose e-mail”
Four Stages of Interaction -2
• Execution of the action
– Carry out the action using the computer
– For example, “double-click Outlook icon”
• Evaluation of the outcome
– Compare results with expectations
– Requires perception, interpretation, and
incremental evaluation
– For example, “did Outlook open?”
Interaction Styles
• Graphical User Interfaces (GUI)
– Direct manipulation (2D, 3D)
• e.g., copy files to folders
– Menus
• Language-based interfaces
– Command line interfaces
– Interactive voice response systems
• E.g., call your credit card company, say your 16-digit number
• Virtual Reality (VR)
– Direct manipulation of objects in the virtual space
• Ubiquitous computing
– Third wave in computing
WIMP Interfaces
• Windows
– Spatial context
• Icons
– For direct manipulation
• Menus
– Organized in a hierarchy
– Question: a long list or a flat list? Show options fast.
• Pointing devices
– Spatial interaction with objects
GUI Components
• Windows (and panels)
– Can resize, drag, iconify, scroll, destroy
• Selectors
– Menu bars, pulldown lists
• Buttons
– Labeled buttons, radio buttons, checkboxes
• Icons (images)
– Can select, open, drag, group
Direct Manipulation
• Select a metaphor
– Desktop, CD player, map, …
• Use icons to represent conceptual objects
– Watch out for cultural differences of icons
– E.g., Thai and American recycle bin
• Manipulate those objects with feedback
– Select (left/right/double click), move (drag/drop)
Visual Affordance
• The perceived and actual fundamental properties
of the object that determine how it could be used
– Appearance indicates how the object should be used
•
•
•
•
•
Chair for sitting
Table for placing things on
Knobs for turning
Slots for inserting things into
Buttons for pushing
• Complex things may need explaining but
simple things should not
– When simple things need instructions, design has failed
Visual Affordance Problems
Sliders for sliding?
Are these buttons?
Dials for turning?
What does this button do?
Visible Constraints
• Limitations of the actions possible perceived
from object’s appearance
– provides people with a range of usage possibilities
Push or pull?
Which side? Can only push,
side to push clearly visible
Visible Constraints: Date Entry
Causality
• The thing that happens right after an action is assumed by
people to be caused by that action
– The “feedback” of your action follows your action
• False causality
– Incorrect effect
• Invoking unfamiliar function just as computer hangs
• Causes “superstitious” behaviors
– E.g., some popup windows are not the “feedback” of your Webpage
manipulation actions
– Invisible effect
• Command with no apparent result often re-entered repeatedly
– For example, mouse click to raise menu on unresponsive system
Causality: An Example
Effects visible only after “Exec” button is pressed
• “Ok” button does nothing!
• Awkward to find appropriate color level
•How do you know how much Red, Green, Blue should be applied?
LViewPro
Transfer Effects
• People transfer expectations from similar objects
– Positive: prior learning applies to new situation
• Whenever you see a keyboard, you want to type
– Negative: prior learning conflicts with new situation
• This typewriter does not have a ribbon
Positive and Negative Transfer
“First we thought the PC was a calculator. Then we found out
how to turn numbers into letters with ASCII — and we thought it
was a typewriter. Then we discovered graphics, and we thought
it was a television. With the World Wide Web, we've realized it's
a brochure.” ― Douglas Adams
Caller:
Tech:
Caller:
Tech:
Caller:
Tech:
Caller:
Hello, is this Tech Support?"
Yes, it is. How may I help you?
The cup holder on my PC is broken and I am within my warranty
period. How do I go about getting that fixed?
I'm sorry, but did you say a cup holder?
Yes, it's attached to the front of my computer.
Please excuse me if I seem a bit stumped, it’s because I am. Did
you receive this as part of a promotional, at a trade show? How
did you get this cup holder? Does it have any trademark on it?
It came with my computer, I don't know anything about a
promotional. It just has '4X' on it.
At this point the Tech Rep had to mute the call, because he couldn't
stand it. The caller had been using the load drawer of the CD-ROM drive
as a cup holder, and snapped it off the drive.
Cultural Associations
• Because a trashcan in Thailand may look
like this:
• A Thai user is likely to be confused by
this image popular in Apple interfaces:
• Sun found their email icon problematic
for some American urban dwellers who
are unfamiliar with rural mail boxes.
Population Stereotypes/Idioms
• People learn “idioms” that work in a certain way
– Red means danger
– Green means safe
• Idioms vary in different cultures
– Light switches
• America: down is off
• Britain: down is on
– Faucets
• America: counter-clockwise on
• Britain: counter-clockwise off
Menus
• Conserve screen space by hiding functions
– Menu bar, pop-up window
• Can be hierarchically structured
– By application’s logic
– By convention (e.g., where is the print function?
Under the File tab)
• Tradeoff between breadth and depth
– Too deep  can become hard to find things
– Too broad  becomes direct manipulation
Dynamic Queries
• What to do when menus become too deep?
– Merges keyboard and direct manipulation
• Select menu items by typing part of a word
– After each letter, update the menu
– Once the word is displayed, user can click on it
• Example: Windows help index
– In Windows XP, click “start”  select “Help and
Support”  click “Index” tab  In the search box
under “type in the keyword to find,” type “blind”…
Language-Based Interfaces
• Command Entry
– Compact and flexible
– Powerful in the hands of expert users
– Difficult for novices to learn
• Natural Language
– Use natural language to operate a computer
– Intuitive and expressive
– Ambiguity makes reliable interpretation difficult
“Seamless Interfaces”
• Computer gives informative feedback on actions
• Allow easy reversal of actions
• Allow user in control, computer shows:
– Anticipatable outcomes
– Explainable results
– Browsable content
• Require users a limited working memory load
– Query context is given
• Provide alternatives for novices and experts
– Scaffolding
Information Architecture
• The structural design of an “information
space” to facilitate access to content
• Consists of at least two components:
– Static design
– Interaction design
Information Architecture
- Static Design
• Organizing Principles
– Logical: inherent structure design
– Functional: by task
– Demographic: by user
• Take advantage of metaphors
–
–
–
–
Organizational: e.g., e-government
Physical: e.g., online grocery store
Functional: e.g., cut, paste, etc.
Visual: e.g., octagon for stop
“Site Blueprint”
Main
Homepage
Teaching
Research
Other
Activities
LIS 7008
Grant
Proposals
IR
Colloquium
LIS 7410
Publications
TREC
LIS 7610
Projects
Some Layout Guidelines
• Contrast: make different things different
– to bring out dominant elements
– to create dynamism
• Repetition: reuse design throughout the interface
– to create consistency
• Alignment: visually connect elements
– to create flow
• Proximity: make effective use of spacing
– to group related and separate unrelated elements
Evaluate http://www.louisianafolklife.org using CRAP guideline
Please discuss what problems this Website have!
Screen Design: Use Grids
Navigation Bar
Navigation Bar
Content
Content
Navigation Bar
Content
Related Links
Navigation Bar
Content
Grid Layout: NY Times
Grid Layout: NY Times
Navigation
Banner Ad
Another Ad
Content
Popular
Articles
Information Architecture
- Interaction Design
• Chess analogy: a few simple rules that disguise an
infinitely complex game
• The three-part structure
– Openings: many strategies, lots of books about this
– End game: well-defined, well-understood
– Middle game: nebulous, hard to describe
• Information navigation has a similar structure!
– Middle game is underserved
From Hearst, Smalley, & Chandler (CHI 2006)
Opening Moves
Opening Moves
Middle Game
Middle Game
Navigation Patterns
•
•
•
•
•
Drive to content
Drive to advertisement
Move up a level
Move to next in sequence
Jump to related
How do you like the navigation patterns in this Website:
http://www.lib.lsu.edu/edu/bbweek/index.html
Design Critique
• www.philipglass.com
• http://www.michaelkamen.com/
• Please discuss the design problems of these
two Websites.
Aural Perception
• We respond to sounds without prior focus
– Lack of focus limits simultaneous stimuli
• Absolute amplitude & pitch hard to interpret
– But changes stand out clearly
• Stereo effect provides a sense of direction
– Relative amplitude & phase difference can be
perceived.
Speech Output
• Replay of digitized human speech clips
– High fidelity, but limited vocabulary
• Every time you get the same speech with same quality.
• Speech Synthesis
– Generate spoken output from unrestricted input
• Based on pronunciation rules and lists of exceptions
– Sounds unnatural due to misplaced emphasis
• Prosody-guided speech synthesis
– Use pronunciation of similar words as a guide
Auditory Display
• Nonspeech audio output for user interfaces
• Same objectives as graphical output:
– Alert the user to exceptional conditions
• E.g., computer gives you a warning sound – “Ding!”
– Provide ubiquitous feedback
– Present information
• But with different characteristics
– Effective even without a focus
– Fairly low resolution of audio quality
Auditory Display Design
• Need a metaphor
– Clock ticking, alarm bells, keyboard clicks, etc.
• Auditory channel is easily overloaded
– So do not present too many auditory channels simultaneously
– A focus helps manage cognitive load
• Changes are more useful than numeric values
– Changes in pitch, amplitude, position, harmonics, etc.
An Auditory Image Display
• Display 2-D images using only sound
– Sweep from left to right every second
• Audible pause and click between sweeps
– Top pixels are high frequency, bottom are low
• Blind users can detect objects and motion using
auditory image displays
– Time indicates horizontal position
– Pitch indicates vertical position
– Sweep-to-sweep differences indicate motion
• E.g., http://www.visualprosthesis.com/javoice.htm
– Scroll down to the middle, under “Images for Soundscapes,” try
some auditory image displays by clicking the images. Use an
earphone if necessary.
Interactive Voice Response Systems
• Operate without graphical interfaces
– Good for hands-free operations (e.g., when driving)
– Telephone access to a system
• Built on three technologies
– Speech recognition (Users input speech to systems)
– Text-to-speech (Systems output speech by reading text)
– Dialog management (computers control the process)
• Example: TellMe (1-800-555-TELL)
Dialogue Management
• User initiative
• System initiative
– Allows a smaller vocabulary
• E.g., please say your 16-digit card credit number
• Mixed initiative (e.g., barge in)
Interaction Design of Voice
Response System
San Francisco
Oakland
San Jose
Baltimore
National
Dulles
Anywhere
else
Where are
you departing
from?
Where do
you want
to go?
Anywhere
else
Wrong
Goodbye
Confirmed
Sorry
Verification
Not a day
What day
do you want
to travel?
Another
day
Day when there
are flights
HCI Evaluation Measures
• Time to learn a system
• Speed of performance
– How quickly can you perform a task
• Error rate
– E.g., how often you click a wrong button
• Retention over time
– How much do you still remember after using the system
• Subjective satisfaction of system
Evaluation Approaches
• Extrinsic vs. intrinsic
• Formative vs. summative
• Human subjects vs. simulated users
• Deductive vs. abductive
Evaluation Examples
• Direct observation
– Evaluator observes users interacting with system
• in lab: user asked to complete pre-determined tasks
• in field: user goes through normal duties
– Validity depends on how contrived the situation is
• Think-aloud
– Users speak their thoughts while doing the task
– May alter the way users do the task
• Controlled user studies
– Users interact with system variants
– Correlate performance with system characteristics
– Control for confounding variables
Summary
• HCI design starts with user needs and abilities
– Users have a wide range of both
• Users must understand their tools/systems
– And these tools/system can learn about their user!
• E.g., browsers record your browsing history
• Many techniques are available
– Direct manipulation, languages, menus, etc.
– Choosing the right technique is important
• SLIS has an advanced course on this
– LIS7401 HCI
• CSC has an undergrad course on HCI design
– CSC4264