Social Software
Week 6
LBSC 690
Information Technology
Agenda
•	Questions

•	Computer Mediated Communication (CMC)

•	Computer-Supported Cooperative Work

•	Online communities

•	Human-Computer Interaction (finally!)

Muddiest Points
•	Lossless vs. Lossy for audio

•	MPEG forward and backward interpolation

•	Where to put a CSS file

•	Why use XML?

•	Ajax
The Age of Participation

Some CMC Applications
•	Email
•	Email mailing lists
•	Usenet News Groups
–	Google/Yahoo Groups
•	Threaded discussion lists 
•	Blogs
•	Wikis
•	Chat rooms
•	Instant Messaging
•	Video teleconferencing
•	…
Describing CMC Applications
•	How many participants? 
–	One or many

•	When?
–	Synchronous or asynchronous

•	Where?
–	Local or remote

Asynchronous Remote
•	Email: centralized storage
–	Individual
–	Mailing lists (http://web.utk.edu/~gwhitney/jesse.html)

•	Usenet: distributed storage
–	http://en.wikipedia.org/wiki/Usenet
–	Hierarchical organization
•	comp.edu.languages.natural
–	Archive: groups.google.com 
–	Analysis: http://research.microsoft.com/~masmith/ 

•	Discussion lists and blogs
–	Example: http://discus.hope.edu/f05
Synchronous Remote
•	Instant Messaging (IM)
–	e.g., Windows Live Messenger
–	Often with audio and video
–	Sometimes with whiteboard+shared applications

•	Chat Rooms
–	Whole lines are sent at a time
–	e.g., Yahoo chat

Collaborative Editing
•	Google Docs
–	Docs.google.com
Synchronous Local
•	Meeting support systems
–	Brainstorming
–	Online review
–	Annotated minutes
•	Example
–	Teaching theater student tools
“Groupware”
•	Work
–	Grounded in the study of work processes
•	Cooperative
–	Assumes a shared objective, task
•	Computer-supported
–	http://en.wikipedia.org/wiki/Collaborative_software

Key Issues in CSCW
•	Shared information space 
•	Group awareness
•	Coordination
•	Concurrency control
•	Multi-user interfaces
•	Heterogeneous environments
Case Study 1:
 Virtual Reference
•	http://www.askusnow.info/

•	Required functions

•	System architecture

•	Adoption
Some Virtual Reference Issues
•	Language 
•	Routing (questions to expertise)
•	Collaborative response
•	Diverse computing environments
•	Load balancing
•	Transaction tracking

Case Study 2:
Your Project Team!
•	Face to face meetings
•	Teleconferences
•	Shared workspace on TerpConnect
•	IM-synchronized work sessions
–	Shared applications?
User-Generated Content
•	Blogging

•	Photo sharing (like in Flickr) 

•	Tagging (like in delicious)

•	Social networking (like in facebook) 

•	Video sharing (like YouTube)

Online Communities
•	Any collection of people who communicate online 
–	People
–	Shared purpose
–	Policies
–	Computer systems

•	Extensive resources available at:
–	http://www.fullcirc.com/community/communitymanual.htm
Some Shared Purposes
•	Exchange information

•	Provide support 

•	Create something

•	Socialize informally 

•	Discuss ideas 
Online Patient Support Groups
    Online support group participants include 28% of adult Internet users (34 million) in 2001

Some Policies
•	Requirements for joining a community, 
•	Style of communication among participants 
•	Accepted conduct (netiquette)
•	Repercussions for nonconformance  

Core Attributes
•	Shared goal, interest, need, or activity 

•	Some members engage in repeated, active participation

•	Access to shared resources
–	And policies manage the access to those resources.

•	Reciprocity of information, support and services 

•	Shared context
–	Social conventions, language, protocols, …

     (Preece 2001)
Underlying Principles - 1
Underlying Principles - 2
Underlying Principles - 3
Design Strategies of Successful Communities
Design Principles of Successful Communities 
Roles
•	Lurkers
•	Dominators
•	Linkers, pollinators
•	Flamers
•	Newbies
•	Polly Annas
Discussion
•	How would you design an online community for people who have moved, or are interested in moving (permanently) from Estonia to the United States of America?
Social Networks
•	Some social networks: 
–	http://trust.mindswap.org/cgi-bin/relationshipTable.cgi

•	Create your own:
–	http://www.ning.com/

Getting Back to HCI
•	Keys to “usability”
–	Consistent 
–	Controllable
–	Predictable
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
Where the Mental Model Fits
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
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 708P: Communities of Practice

•	LBSC 715: Knowledge Management 

•	LBSC 795: HCI Design and Evaluation

•	INFM 700: Information Architecture

•	LBSC 790: User Interface Programming
Some HTML Style Guidelines
•	Design for generic browsers
–	And test on every version you wish to support 
•	Provide appropriate “access points”
–	User needs and navigation strategies differ
•	Design useful navigational aids
–	A Web search may lead to the middle of a site
•	Include some indication of currency
–	Date of last update, “new” icons, etc.
•	Indicate who is responsible for the content
–	Helps readers assess authority
Individual Differences
•	Physical
•	Cognitive
•	Perceptual
•	Gender
•	Age
•	Cultural
•	Educational
•	Experience with computers 
•	Socio-economic
–	Equipment, bandwidth, …
Some Accessibility Guidelines
•	Design for device independence
•	Maintain compatibility with earlier browsers
–	Provide alternative pages if necessary
•	Provide alternatives to aural and visual content
–	Alt tags for images, transcripts for audio
•	Make is easy for assistive devices to work
–	Use structural (rather than layout-oriented) markup
–	Give a title to each frame
–	Only use HTML tables for table data (not content layout)
–	Use markup to indicate language switching
Section 508 (Federal Web pages)
•	A text equivalent for every non-text element shall be provided. 
•	Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation. 
•	Web pages shall be designed so that all information conveyed with color is also available without color. 
•	Documents shall be organized so they are readable without requiring an associated style sheet. 
•	Redundant text links shall be provided for each active region of a server-side image map. 
•	Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape. 
•	Row and column headers shall be identified for data tables. 
•	Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers. 
•	Frames shall be titled with text that facilitates frame identification and navigation. 
•	Pages shall be designed to avoid causing the screen to flicker with a frequency >2 Hz and <55 Hz. 
•	A text-only page, with equivalent information or functionality, shall be provided when compliance cannot be accomplished in any other way. The content shall be updated when the primary page changes 
•	When pages use scripting languages to display content or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology. 
•	When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with the above. 
•	When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required. 
•	A method shall be provided that permits users to skip repetitive navigation links. 
•	When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required. 
HTML Validators
•	Syntax checking: cross-browser compatibility
–	http://validator.w3.org
–	Try it on http://www.umd.edu 

•	Style checking: Section 508 compliance
–	http://www.cynthiasays.com/
–	Try it on http://www.umd.edu 
Before You Go!
•	On a sheet of paper (no names), answer the following question:

	What was the muddiest point in today’s class?