Week 3

1
Web CharacterizationWeb Design

• Week 3
• LBSC 690
• Information Technology

2
Todays 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

3
Muddiest Points

• Routing Tables
• Start-gtRun-gtcmd-gtroute print
• Ports
• FTP
• HTML
• (Speeding up at the end)

4
Port Mapping
5
TCP/IP layer architecture
Link
Link
Link
Link
Link
Link
Link for bits
Link for bits
Link for bits
6
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,

7
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

8
User Datagram Protocol (UDP)

• The Internets 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

9
UDP/IP Protocol Stack
10
HyperText Transfer Protocol (HTTP)

• Send request
• GET /path/file.html HTTP/1.0
• From someuser_at_jmarshall.com
• User-Agent HTTPTool/1.0
• Server response
• HTTP/1.0 200 OK
• Date Fri, 31 Dec 1999 235959 GMT
• Content-Type text/html
• Content-Length 1354
• lthtmlgtltbodygt lth1gtHappy New Millennium!lt/h1gt
  lt/bodygt lt/htmlgt

11
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)

12
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

13
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

14
Virtual Private Networks
a secure private network over the public Internet
Public Internet
Intranet
virtual leased line
Intranet
15
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

16
What is the Web?

• HTTP, HTML, or URL?
• Static, dynamic or streaming?
• Public, protected, or internal?
• Content or behavior?

17
Number of Web Sites
18
Whats 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

19
Crawling the Web
20
Robots Exclusion Protocol

• Requires voluntary compliance by crawlers
• Exclusion by site
• Create a robots.txt file at the servers top
  level
• Indicate which directories not to crawl
• Exclusion by document (in HTML head)
• Not implemented by all crawlers
• ltmeta name"robots content"noindex,nofollow"gt

21
Link Structure of the Web
22
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

23
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)

24
Hands onThe Internet Archive

• alexa.com Web crawls since 1997
• http//archive.org
• Check out the CLIS Web site from 1998!
• http//www.clis.umd.edu

25
User-Generated Content Blogs
Doubling
18.9 Million Weblogs Tracked Doubling in size
approx. every 5 months Consistent doubling over
the last 36 months
Doubling
Doubling
Doubling
26
Volume of Blog Posts
Katrina
1 Million Posts/Day by 2005
London Bombings
Justice OConnor Live 8 Concerts
Deepthroat Revealed
Kryptonite Lock Controversy
Newsweek Koran
Schiavo Dies
US Election Day
Superbowl
Indian Ocean Tsunami
27
Global Internet Users
Native speakers, Global Reach projection for 2004
(as of Sept, 2003)
28
Global Internet Users
Web Pages
Native speakers, Global Reach projection for 2004
(as of Sept, 2003)
29
The Deep Web

• Dynamic pages, generated from databases
• Much larger than surface Web
• Not easily discovered using crawling

30
Content of the Deep Web
31
Human Computer Interaction

• A discipline concerned with the
• of interactive computing systems for human use

32
Where is the bottleneck?
computer performance
human performance
1950
2000
2050
33
What are Computers Good At?

• Sense stimuli outside humans 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

34
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

35
Individual Differences

• Physical
• Anthropomorphic (height, left handed, etc.)
• Age (mobility, dexterity, etc.)
• Cognitive
• Perceptual
• Sight, hearing, etc.
• Personality
• Cultural factors

36
Synergy

• Humans do what they are good at
• Computers do what they are good at
• Strengths of one cover weakness of the other

37
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

38
Stages of Interaction
Goals
Intention
Evaluation
Expectation
Selection
Interpretation
Mental Activity
Physical Activity
System
Execution
Perception
39
Challenges of HCI
Goals
System
Execution
Perception
40
What is good design?
Goals
Intention
Evaluation
Expectation
Mental Model
Selection
Interpretation
Mental Activity
Physical Activity
System
Execution
Perception
41
Modeling Interaction
Human
Mental Models
Sight Sound
System
Task
Hands Voice
Software Models
Keyboard Mouse
Task
User
Display Speaker
Computer
42
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

43
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

44
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

45
Design Example QWERTY Keyboard
From http//home.earthlink.net/dcrehr/whyqwert.ht
ml
46
Dvorak Keyboard
From http//www.mwbrooks.com/dvorak/
47
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

48
Modeling Interaction
Human
Mental Models
Sight Sound
System
Task
Hands Voice
Software Models
Keyboard Mouse
Task
User
Display Speaker
Computer
49
Human Senses

• Visual
• Position/motion, color/contrast, symbols
• Auditory
• Position/motion, tones/volume, speech
• Haptic
• Mechanical, thermal, electrical, kinesthethic
• Olfactory
• Smell, taste
• Vestibular

50
Commodity Output

• Image display
• Fixed view, projection
• Acoustic display
• Speakers, headphones

51
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

52
What makes a Wii fun?
53
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

54
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)

55
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

56
(No Transcript)
57
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
• The best part of the show is coming up
• The week just whizzed by

58
Transfer Effects

• People transfer expectations from similar objects
• Positive prior learning applies to new situation
• Negative prior learning conflicts with new
  situation

59
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 Hello, is this Tech Support?" Tech Yes,
it is. How may I help you? Caller The cup
holder on my PC is broken and I am within my
warranty period. How do I go about getting that
fixed? Tech I'm sorry, but did you say a cup
holder? Caller Yes, it's attached to the front
of my computer. Tech Please excuse me if I seem
a bit stumped, its 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? Caller 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.
60
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

61
Visual Affordance Problems
Dials for turning?
Sliders for sliding?
What does this button do?
Are these buttons?
62
Mapping
63
Visible Constraints

• Limitations of the actions possible perceived
  from objects appearance
• provides people with a range of usage
  possibilities

64
Visible Constraints Date Entry
65
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

66
Causality An Example

• Effects visible only after Exec button is pressed
• Ok does nothing!
• Awkward to find appropriate color level

LViewPro
67
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.

68
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

69
WIMP Interfaces

• Windows
• Spatial context
• Icons
• Direct manipulation
• Menus
• Hierarchy
• Pointing devices
• Spatial interaction

70
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

71
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

72
Design Concept Summary

• Visual affordance
• Visible constraints
• Mapping
• Causality
• Transfer effects
• Idioms
• Metaphors
• Cultural associations
• Individual differences

73
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

74
The Discipline of HCI
From ACM SIGCHI Curricula for Human-Computer
Interaction
75
Information Architecture

• The structural design of an information space
  to facilitate access to content
• Two components
• Static design
• Interaction design

76
Static Design

• Organizing principles
• Logical e.g., chronological, alphabetical
• Functional by task
• Demographic by user
• Metaphors
• Organizational e.g., e-government
• Physical e.g., online grocery store
• Functional e.g., cut, paste
• Visual e.g., octagon for stop

77
Site Blueprint
Main Homepage
Teaching
Research
OtherActivities
LBSC 690
Ph.D. Students
IR Colloquium
INFM 718R
Publications
TREC
DoctoralSeminar
Projects
78
Grid Layouts
Navigation Bar
Navigation Bar
Content
Content
Navigation Bar
Related Links
Navigation Bar
Content
Content
79
Grid Layout NY Times
80
Grid Layout NY Times
Navigation
Banner Ad
Another Ad
Content
Popular Articles
81
Grid Layout ebay
82
Grid Layout ebay
Navigation
Banner Ad
Navigation
Search Results
Related
83
Grid Layout Amazon
84
Grid Layout Amazon
Navigation
Navigation
Related
Search Results
85
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

86
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)
87
Opening Moves
88
Opening Moves
89
Opening Moves
90
Middle Game
91
Middle Game
92
Navigation Patterns

• Drive to content
• Drive to advertisement
• Move up a level
• Move to next in sequence
• Jump to related

93
Human-Computer Interaction
A discipline concerned with the
of interactive computing systems for human use
94
Evaluation Approaches

• Formative vs. summative
• Extrinsic vs. intrinsic
• Quantitative vs. qualitative
• Deductive vs. inductive
• User study vs. simulation

95
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

96
Evaluation Measures

• Time to learn
• Speed of performance
• Error rate
• Retention over time
• Subjective satisfaction

97
Learning More

• LBSC 733 Networks
• LBSC 795 HCI Design and Evaluation
• INFM 700 Information Architecture
• LBSC 790 HCI Implementation

98
Before You Go

• On a sheet of paper, answer the following
  (ungraded) question (no names, please)
• What was the muddiest point in todays class?