Human-Computer Interaction
CS100: The World of Computing
John Dougherty
Haverford College
Overview of HCI







HCI and user-centered development
Human perception and memory
Content and visual organization
Navigation
Color and multimedia issues
Accessibility
Globalization
[lecture based on McCraken & Wolfe, 2002]
Definitions of HCI
“A discipline concerned with
the design, evaluation, and
implementation of
interactive computing
systems for human use and
with the study of major
phenomenon surrounding
them.”
[SIGCHI, 1992]
“HCI is the study and the
practice of usability.”
[Carroll, 2002]
Goals of HCI
 Safety - of users, of data
 Utility - services are provided
 Effectiveness - easy to find and use services
 Efficiency - how quickly users can work
 Usability - ease of learning and use
 Appeal - how well user like the interface

from first impression to long-term satisfaction
Brief History of HCI
 Human Factors in Computer Systems [1982]
 Grew out of




Software engineering
Software psychology and human factors
Graphics and user interfaces
Cognitive science (e.g., GOMS: goals, operators,
methods and selection [1983])
User-Centered Development
 Distinct from traditional SW development
 User-centric: user over data, user as part of
design team
 Interdisciplinary: art, psychology, technical
writing, computer science, cognitive science
 Highly iterative: design, implement, test,
learn, redesign, …
Human Capabilities and HCI
 Senses and perception








What we see and what we recall (meaning)
Memory
Sensory, long-term, short-term
Chunking
Recognition vs. recall
Interruptions
Mental models and metaphors
Perceived affordance
Implications for HCI Design
 Lessen memory burden of user

Use recognition, chunk information
 Provide visual cues/memory aids to help resume
interrupted tasks
 Provide feedback



Input received
Approximate time to process
Incremental metaphor and completion/failure
Content Organization
 Exact schemes

alphabetical, chronological, geographical
 Ambiguous schemes


Topical, task-oriented, audience-specific
Metaphor-driven, hybrid
 Structures

Linear, hierarchy, database, hyperlink
Visual Organization
 Proximity - spatially close items are
perceived as related
 Alignment - outline to express organization
 Consistency - across pages in a site, as well
as within a page (buttons, font)
 Contrast - distinguish different items, and
use size, color; make it visually-clear
Navigation Issues
 Site-level



Hierarchy vs. hyperlink
Build context where possible
Navigation bars, menus
 Page-level


Links with a page
Frames
Issues of Color
 Physics and perception
 Models of color




RYB: primary colors
RGB: additive color
CMYK: subtractive color
HSB: hue, saturation and
brightness
 Issues of color harmony
 Color to organize content
Multimedia
 Audio - music, speech, sound

Formats: .wav, .au, .aiff, mid, .mp3, .ra
 Video - impractical for most browsers
 Animation - graphics over time



Video format
Vector format
Program/Script (Java, JavaScript)
 3D animation soon ???
Accessibility/Universal Design








Universal design works for more people
Some US statistics (2002):
8 million blind/visually impaired
20 million deaf/hearing impaired
250 thousand with spinal cord injuries
500 thousand with cerebral palsey
333 thousand with multiple sclerosis
34.8 million seniors (≥65) now, near 54 million by
2020, and 50% impaired
Vision Issues
 Blindness

Text to speech, HTML table markup
 Low vision

Text enlargers, screen magnifiers
 Color blindness

Avoid red/green confusion, contrast brightness
 Photosensitive epilepsy

Avoid flashing text, animation
Mobility Issues






Assistive technology
Sticky Keys
predictive typing
larger physical interface devices
speech recognition
Alternative pointing devices

Eye-gaze, head wand, mouth stick, temporal select
 For web, ensure keyboard-only navigation
Hearing Impairment Issues
 Captioned audio (open, closed)
 Web options



SMIL (W3C)
QuickTime (Apple)
SAMI (Microsoft)
 American Sign Language (ASL)

Video, avatar
Globalization
 Internationalization

Identify cultural items
 Localization

Add cultural items to
provide context
 Translation
 Personalization vs.
privacy
Concluding Remarks on HCI
 Important & emerging
 Interdisciplinary, add ..

AI, media, networking
 Promote effective
leveraging of
computing for people
 Computer should adapt
to people