1. Human-Computer Interaction CS100: The World of Computing John Dougherty Haverford College

2. 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]

3. 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]

4. 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

5. 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])

6. 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, …

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

8. 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

9. Content Organization  Exact schemes alphabetical, chronological, geographical  Ambiguous schemes Topical, task-oriented, audience-specific Metaphor-driven, hybrid  Structures Linear, hierarchy, database, hyperlink

10. 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

11. Navigation Issues  Site-level Hierarchy vs. hyperlink Build context where possible Navigation bars, menus  Page-level Links with a page Frames

12. 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

13. 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 ???

14. 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

15. 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

16. 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

17. Hearing Impairment Issues  Captioned audio (open, closed)  Web options SMIL (W3C) QuickTime (Apple) SAMI (Microsoft)  American Sign Language (ASL) Video, avatar

18. Globalization  Internationalization Identify cultural items  Localization Add cultural items to provide context  Translation  Personalization vs. privacy

19. Concluding Remarks on HCI  Important & emerging  Interdisciplinary, add.. AI, media, networking  Promote effective leveraging of computing for people  Computer should adapt to people