Web Characterization
Web Design
Week 3
LBSC 690
Information Technology
Today’s Goals
Muddiest Points
•	Routing Tables
–	Start->Run->cmd->route print
•	Ports

•	FTP

•	HTML

•	(Speeding up at the end)
Port Mapping
TCP/IP layer architecture
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: someuser@jmarshall.com 
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> �c </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
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
Volume of Blog Posts
Global Internet Users
Global Internet Users
The “Deep Web”
•	Dynamic pages, generated from databases
•	Much larger than surface Web
•	Not easily discovered using crawling 
Content of the Deep Web
Human Computer Interaction
•	A discipline concerned with the 

	

	of interactive computing systems for human use
Where is the bottleneck?
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
Challenges of HCI
What is good design?
Modeling Interaction
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
Dvorak Keyboard 
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 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

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
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
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
Mapping
Visible Constraints
•	Limitations of the actions possible perceived from object’s appearance
–	provides people with a range of usage possibilities

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
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
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: 		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
“Site Blueprint”
Grid Layouts
Grid Layout: NY Times
Grid Layout: NY Times
Grid Layout: ebay
Grid Layout: ebay
Grid Layout: Amazon
Grid Layout: Amazon
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
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
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?