Human Computer Interaction
Download
Report
Transcript Human Computer Interaction
Web Characterization
Web Design
Week 3
LBSC 690
Information Technology
Today’s Goals
• Finish our discussion of networking
• Be able to discuss what the Web “is”
• Understand human-computer interaction principles
– What makes something well or poorly designed?
• Connect that knowledge to good Web site design
• Begin to think about evaluation
Muddiest Points
• Routing Tables
– Start->Run->cmd->route print
• Ports
• FTP
• HTML
• (Speeding up at the end)
Port Mapping
TCP/IP layer architecture
Application
Application
Virtual network service
Transport
Transport
Virtual link for end to end packets
Network
Link
Network
Link
Link for bits
Virtual link for packets
Link
Link
Link for bits
Network
Network
Link
Link
Link for bits
The TCP/IP “Protocol Stack”
• Link layer: move bits
– Ethernet, cable modem, DSL
• Network layer: move packets
– IP
• Transport layer: provide “services”
– UDP, TCP
• Application layer: uses those services
– SFTP, SSH, …
Transmission Control Protocol (TCP)
• Guarantees delivery all data
– Retransmits missing data
• Guarantees data will be delivered in order
– “Buffers” subsequent packets if necessary
• No guarantee of delivery time
– Long delays may occur without warning
User Datagram Protocol (UDP)
• The Internet’s basic transport service
– Sends every packet immediately
– Passes received packets to the application
• No delivery guarantee
– Collisions can result in packet loss
• Example: sending clicks on web browser
UDP/IP Protocol Stack
HyperText Transfer Protocol (HTTP)
• Send request
GET /path/file.html HTTP/1.0
From: [email protected]
User-Agent: HTTPTool/1.0
• Server response
HTTP/1.0 200 OK
Date: Fri, 31 Dec 1999 23:59:59 GMT
Content-Type: text/html
Content-Length: 1354
<html><body> <h1>Happy New Millennium!</h1> … </body> </html>
Network Abuse
• Flooding
– Excessive activity, intended to prevent valid activity
• Worms
– Like a virus, but self-propagating
• Sniffing
– Monitoring network traffic (e.g., for passwords)
Encryption
• Secret-key systems (e.g., DES)
– Use the same key to encrypt and decrypt
• Public-key systems (e.g., PGP)
– Public key: open, for encryption
– Private key: secret, for decryption
• Digital signatures
– Encrypt with private key, decrypt with public key
Encrypted Standards
• Secure Shell (SSH)
– Replaces Telnet
• Secure FTP (SFTP)/Secure Copy (SCP)
– Replaces FTP
• Secure HTTP (HTTPS)
– Used for financial and other private data
• Wired Equivalent Protocol (WEP)
– Used on wireless networks
• Virtual Private Network (VPN)
– Not really a “standard”
Virtual Private Networks
a secure private network over the public Internet
Public Internet
Intranet
virtual “leased line”
Intranet
Why is there a Web?
• Affordable storage
– 300,000 words/$ in 1995
• Adequate backbone capacity
– 25,000 simultaneous transfers in 1995
• Adequate “last mile” bandwidth
– 1 second/screen in 1995
• Display capability
– 10% of US population in 1995
• Effective search capabilities
– Lycos and Yahoo were started in 1995
What is the Web?
• HTTP, HTML, or URL?
• Static, dynamic or streaming?
• Public, protected, or internal?
• Content or behavior?
Number of Web Sites
What’s a Web “Site”?
• OCLC counted any server at port 80
– Misses many servers at other ports
• Some servers host unrelated content
– Geocities
• Some content requires specialized servers
– rtsp
Crawling the Web
Robots Exclusion Protocol
• Requires voluntary compliance by crawlers
• Exclusion by site
– Create a robots.txt file at the server’s top level
– Indicate which directories not to crawl
• Exclusion by document (in HTML head)
– Not implemented by all crawlers
<meta name="robots“ content="noindex,nofollow">
Link Structure of the Web
Web Crawl Challenges
• Discovering “islands” and “peninsulas”
• Duplicate and near-duplicate content
– 30-40% of total content
• Server and network loads
• Dynamic content generation
• Link rot
– Changes at 1% per week
• Temporary server interruptions
Duplicate Detection
• Structural
– Identical directory structure (e.g., mirrors, aliases)
• Syntactic
– Identical bytes
– Identical markup (HTML, XML, …)
• Semantic
– Identical content
– Similar content (e.g., with a different banner ad)
– Related content (e.g., translated)
Hands on:
The Internet Archive
• alexa.com Web crawls since 1997
– http://archive.org
• Check out the CLIS Web site from 1998!
– http://www.clis.umd.edu
User-Generated Content: Blogs
Doubling
20,000,000
18,000,000
16,000,000
14,000,000
12,000,000
18.9 Million Weblogs Tracked
Doubling in size approx. every 5 months
Consistent doubling over the last 36 months
Doubling
10,000,000
8,000,000
Doubling
6,000,000
4,000,000
Doubling
2,000,000
M
ar
-0
Ap 3
r03
M
ay
-0
Ju 3
n03
Ju
l0
Au 3
g0
Se 3
p0
O 3
ct
-0
3
N
ov
-0
3
D
ec
-0
Ja 3
n0
Fe 4
b04
M
ar
-0
Ap 4
r04
M
ay
-0
Ju 4
n04
Ju
l0
Au 4
g0
Se 4
p0
O 4
ct
-0
4
N
ov
-0
4
D
ec
-0
Ja 4
n0
Fe 5
b05
M
ar
-0
Ap 5
r05
M
ay
-0
Ju 5
n05
Ju
l0
Au 5
g0
Se 5
p0
O 5
ct
-0
5
0
Volume of Blog Posts
1400000
~1 Million Posts/Day by 2005
Katrina
Justice O’Connor
Live 8 Concerts
1200000
Deepthroat Revealed
1000000
Kryptonite
Lock Controversy
800000
US Election Day
600000
London Bombings
Newsweek Koran
Schiavo Dies
Superbowl
Indian Ocean Tsunami
400000
200000
9/
1
9/ /04
15
9 / / 04
2
10 9/0
/1 4
10 3/0
/2 4
11 7/0
/1 4
11 0/0
/2 4
4
12 /04
/
12 8/0
/2 4
2/
0
1/ 4
5/
1/ 05
19
/0
2/ 5
2
2/ /05
16
/0
3/ 5
2
3/ /05
16
3 / / 05
30
4 / / 05
13
4 / / 05
27
5 / / 05
11
5 / / 05
25
/0
6/ 5
8
6/ /05
22
/0
7/ 5
6
7/ /05
20
/0
8/ 5
3
8/ /05
17
8 / / 05
31
9 / / 05
14
9 / / 05
28
/0
5
0
Global Internet Users
11%
2%
31%
3%
English
Chinese
Japanese
Spanish
German
Korean
French
Portuguese
Italian
Russian
Other
3%
4%
5%
7%
18%
7%
9%
Native speakers, Global Reach projection for 2004 (as of Sept, 2003)
Global Internet Users
11%
2%
2%
1%
3%
2%
5%
31%
3%
1%
3%
4%
6%
2%
6%
5%
4%
68%
7%
English
Chinese
Japanese
Spanish
German
Korean
French
Portuguese
Italian
Russian
Other
18%
7%
9%
Native speakers, Global Reach projection for 2004 (as of Sept, 2003)
The “Deep Web”
• Dynamic pages, generated from databases
• Much larger than surface Web
• Not easily discovered using crawling
Terabytes
1,000,000
10,000
2000
2008 (est)
100
1
LoC
Surface Web
Deep Web
Content of the Deep Web
Human Computer Interaction
• A discipline concerned with the
Implementation
Design
Evaluation
Where is the bottleneck?
computer
performance
human performance
1950
2000
2050
What are Computers Good At?
•
•
•
•
•
•
Sense stimuli outside human’s range
Calculate quickly and accurately
Store large quantities and recall accurately
Respond rapidly and consistently
Perform repetitive actions reliably
Work under heavy load for an extended period
What are Humans Good At?
•
•
•
•
•
•
Sense low level stimuli
Recognize patterns
Reason inductively
Communicate with multiple channels
Apply multiple strategies
Adapt to changes or unexpected events
Individual Differences
• Physical
– Anthropomorphic (height, left handed, etc.)
– Age (mobility, dexterity, etc.)
• Cognitive
• Perceptual
– Sight, hearing, etc.
• Personality
• Cultural factors
Synergy
• Humans do what they are good at
• Computers do what they are good at
• Strengths of one cover weakness of the other
Interaction
• Forming an intention
– Internal mental characterization of a goal
• Selection of an action
– Review possible actions, select most appropriate
• Execution of the action
– Carry out appropriate actions with the system
• Evaluation of the outcome
– Compare results with expectations
Stages of Interaction
Goals
Intention
Expectation
Selection
Evaluation
Interpretation
Mental Activity
Physical Activity
Execution
System
Perception
Challenges of HCI
Goals
Intention
Expectation
“Gulf of Execution”
Evaluation
“Gulf of Evaluation”
Selection
Interpretation
Mental Activity
Physical Activity
Execution
System
Perception
What is good design?
Goals
Intention
Expectation
Evaluation
Mental
Model
Selection
Interpretation
Mental Activity
Physical Activity
Execution
System
Perception
Modeling Interaction
Human
Mental Models
Task
System
Software Models
Task
Computer
User
Sight
Sound
Hands
Voice
Keyboard
Mouse
Display
Speaker
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
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: American English
– Latin-1: European languages
– UNICODE: (nearly) Any language
• Pictographic languages need “entry methods”
• Keyboard shortcuts help with data entry
– Different conventions for standard tasks abound
• VT-100 standard” functions are common
– Differing layouts can inhibit usability
Design Example: QWERTY Keyboard
From http://home.earthlink.net/~dcrehr/whyqwert.html
Dvorak Keyboard
From http://www.mwbrooks.com/dvorak/
Direct Manipulation
• Match control actions with on-screen behavior
– Use a cursor for visual feedback if needed
• Rotary devices
– Mouse, trackball
• Linear devices
– Touch pad, touch screen, iPod shuttle, joystick
• Rate devices
– Laptop eraserhead
Modeling Interaction
Human
Mental Models
Task
System
Software Models
Task
Computer
User
Sight
Sound
Hands
Voice
Keyboard
Mouse
Display
Speaker
Human Senses
• Visual
– Position/motion, color/contrast, symbols
• Auditory
– Position/motion, tones/volume, speech
• Haptic
– Mechanical, thermal, electrical, kinesthethic
• Olfactory
– Smell, taste
• Vestibular
Commodity Output
• Image display
– Fixed view, projection
• Acoustic display
– Speakers, headphones
“Virtual Reality” Output
• Immersive visual
– Surround projection, Movable view
• Force feedback
– Pen, joystick, exoskeleton
• Tactile
– Vibrotactile, pneumatic, piezoelectric
• Vestibular
– Motion-based simulators
• Locomotive
– Stationary bicycle, treadmill
• Thermal, Olfactory
What makes a Wii fun?
Interaction Styles
• Language-based interfaces
– Command line interfaces
– Interactive voice response systems
• Graphical User Interfaces (GUI)
– Direct manipulation
– Menus
• Virtual Reality (VR)
– Direct manipulation
• Ubiquitous computing
Direct Manipulation
• Select a metaphor
– Desktop, CD player, map, …
• Use icons to represent conceptual objects
– Watch out for cultural differences
• Manipulate those objects with feedback
– Select (left/right/double click), move (drag/drop)
GUI Components
• Windows (and panels)
– Resize, drag, iconify, scroll, destroy
• Selectors
– Menu bars, pulldown lists
• Buttons
– Labeled buttons, radio buttons, checkboxes
• Icons (images)
– Select, open, drag, group
Metaphor: Fundamental for Thought
• Theories as buildings:
– The foundation of the theory is shaky
– Theory was toppled
– Buttress your claims
• Mind as a container
– Suddenly came into my head
– Back of my mind
• Time as space:
– The end of the semester is getting closer
Transfer Effects
• People transfer expectations from similar objects
– Positive: prior learning applies to new situation
– Negative: prior learning conflicts with new situation
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.
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?
Mapping
full mapping
arbitrary
back
right
front back front
left
left right
24 possibilities, requires:
-visible labels + memory
paired
back front
front back
2 possibilities per side
= 4 total possibilities
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
• Incorrect effect
– Invoking unfamiliar function just as computer hangs
– Causes “superstitious” behaviors
• Invisible effect
– Command with no apparent result often repeated
• e.g., mouse click to raise menu on unresponsive system
Causality: An Example
Effects visible only after Exec button is pressed
• Ok does nothing!
• Awkward to find appropriate color level
LViewPro
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.
Stereotypes
• 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
WIMP Interfaces
• Windows
– Spatial context
• Icons
– Direct manipulation
• Menus
– Hierarchy
• Pointing devices
– Spatial interaction
Menus
• Conserve screen space by hiding functions
– Menu bar, pop-up
• Hierarchically structured
– Logical grouping
– Conventional positioning
• Tradeoff between breadth and depth
– Too deep can become hard to find things
– Too broad becomes direct manipulation
Dynamic Queries
• Keyboard-initiated 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
• Examples: Google queries, Windows help
Design Concept Summary
•
•
•
•
•
•
•
•
•
Visual affordance
Visible constraints
Mapping
Causality
Transfer effects
Idioms
Metaphors
Cultural associations
Individual differences
“Seamless Interfaces”
• Informative feedback
• Easy reversal
• User in control
– Anticipatable outcomes
– Explainable results
– Browsable content
• Limited working memory load
– Query context
– Path suspension
• Alternatives for novices and experts
– Scaffolding
The Discipline of HCI
From ACM SIGCHI Curricula for Human-Computer Interaction
Information Architecture
• The structural design of an “information
space” to facilitate access to content
• Two components:
– Static design
– Interaction design
Static Design
• Organizing principles
– Logical:
– Functional:
– Demographic:
e.g., chronological, alphabetical
by task
by user
• Metaphors
–
–
–
–
Organizational:
Physical:
Functional:
Visual:
e.g., e-government
e.g., online grocery store
e.g., cut, paste
e.g., octagon for stop
“Site Blueprint”
Main
Homepage
Teaching
Research
Other
Activities
LBSC 690
Ph.D.
Students
IR
Colloquium
INFM 718R
Publications
TREC
Doctoral
Seminar
Projects
Grid Layouts
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
Grid Layout: ebay
Grid Layout: ebay
Navigation
Banner Ad
Navigation
Related
Search Results
Grid Layout: Amazon
Grid Layout: Amazon
Navigation
Navigation
Related
Search Results
Some Layout Guidelines
• Contrast: make different things different
– to bring out dominant elements
– to create dynamism
• Repetition: reuse design throughout the interface
– to achieve consistency
• Alignment: visually connect elements
– to create flow
• Proximity: make effective use of spacing
– to group related and separate unrelated elements
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
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
Human-Computer
Interaction
A discipline concerned with the
Implementation
Design
Evaluation
of interactive computing systems for human use
Evaluation Approaches
• Formative vs. summative
• Extrinsic vs. intrinsic
• Quantitative vs. qualitative
– Deductive vs. inductive
• User study vs. simulation
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
Evaluation Measures
• Time to learn
• Speed of performance
• Error rate
• Retention over time
• Subjective satisfaction
Learning More
• LBSC 733: Networks
• LBSC 795: HCI Design and Evaluation
• INFM 700: Information Architecture
• LBSC 790: HCI Implementation
Before You Go
On a sheet of paper, answer the following
(ungraded) question (no names, please):
What was the muddiest point in
today’s class?