1. Spring 2006 1 CPSC 414/614: Human-Computer Interaction Andrew Duchowski Department of Computer Science Clemson University

2. Spring 2006 2 Course description What is this course about? –DESIGN of Computer Interface for human usability What will we cover? –textbook (almost in its entirety before midterm) –SIGCHI papers –LOTS of reading, class interaction / discussion –some coding

3. Spring 2006 3 I Intro to HCI II Requirements (human aspects, models) III Design (interaction devices, elements) IV Evaluation (iterative design) 1.design based on models of human activities… 2.…and what’s available (devices, code, toolkits…) 3.evaluation (does it work?) EXAMPLES (CHI ‘05 papers) Course outline

4. Spring 2006 4 Key things to do in class Be prepared - READ assigned chapters / papers BEFORE coming to class - you will be graded on participation Read INTELLIGENTLY (especially papers): –know who wrote the material (who’s involved) –know when material was written –know where work was carried out –what what was described (importance of contrib.) Keep track of research work (it’s on the test) PARTICIPATE…(can be difference of letter grade)

5. Spring 2006 5 Class participation Discuss material in class (be prepared) Be able to summarize work –relate key points of work (chapter / paper) Be able to comment on / criticize work –quality of work –relevance of work (to HCI, state-of-the-art) Compare & contrast to others’ contributions Don’t let others dominate discussion Have one or two points to bring up If I don’t know your name by semester’s end…

6. Spring 2006 6 Team organization Book chapters and technical papers will be covered by students (2-person teams) 2-person teams: presenter / discussion leader –presenter summarizes chapter (overhead, PPT, WWW…) about 20 min –discussion leader provides questions on material for class discussion about 15 min Members switch roles

7. Spring 2006 7 Chp.1: What is HCI? study of interaction between humans & computer a methodology for: –modeling the human (e.g., perception, behavior) –examining usability of computer programs, devices, techniques (in general doesn’t have to be just computers, applies to anything man-made that humans use, e.g., cars, light switches, kettles, etc.) most imporantly: HCI leads to DESIGN of interface past contributions: physical devices (mouse, HMD), code (GUI toolkits, window managers)

8. Spring 2006 8 Chp.1: What is HCI? All about design - in the context of Computer Science, design of interface to “back-end” program Interface: –graphical (GUI) –command-line (CLI) –web-based –VR, etc. “Back-end”: –Operating System (O/S) –dB –web site –spreadsheet –calculator –word processor –air traffic control display –flight simulator –nuclear plant –automobile displays –etc.

9. Spring 2006 9 Chp.1: What is HCI? Computer interaction –almost ubiquitous (everywhere); chances are in whatever device you use, there’s a chip in there –e.g., typical day: get up, press “snooze” on alarm clock (what’s the interface on the clock?) drive to work (car interface) stop by ATM (ATM screen) after work, shopping (scanners at store) at home, eat dinner (microwave, stove) watch TV/DVD/VCR (various ent. devices) Interface design applies to all these; computer interface is more obvious in some than in other examples

10. Spring 2006 10 Chp.1: What is HCI? Why bother with interface design? –increasing productivity e.g., in the workforce: employees with a better word processor will be more productive –safety: critical systems with poor interface may endanger lives e.g., ATC, operating room, nuclear plant –commerce: a good interface may sell a product e.g., today’s “hot items”: MP3 players, digital cameras, DVD players, etc. Key point: users shouldn’t have to think (much) about intricacies of interface to use the tool (INTUITIVE INTERFACE) –e.g., ATM: walk up to it, withdraw cash (fairly easy to use)

11. Spring 2006 11 Chp.1: What is HCI? What is “good” UI design? –Good is subjective, isn’t it? I like CLI, you might not… –Besides being intuitive (CLI is not), UI should be usable –Usability (ISO 9241) defined as: Satisfying (subjective) Effective (accuracy: no errors) Efficient (speed: fast) –The SEE indicators are also used for evaluation

12. Spring 2006 12 Chp.1: What is HCI? Classic principles of interface design: –visibility: controls should be visible (e.g., volume control on an MP3 player) –affordance: controls should map to their function, I.e., it should be obvious what each control (button, slider, etc.) does. controls should be intuitive, e.g., volume control: use a vertical slider (up = loud) –feedback: device should give user indication of its state (e.g., phone: dial tone [ready], busy signal, flashing light [message or on hold])

13. Spring 2006 13 Chp.1: What is HCI? Examples of design, visibility, affordance, feedback Fig.1: salt / pepper shakers: which is which?

14. Spring 2006 14 Chp.1: What is HCI? Examples of design, visibility, affordance, feedback Fig.2: which knob controls which burner?

15. Spring 2006 15 Chp.1: What is HCI? Examples of design, visibility, affordance, feedback Fig.3: can I set the freezer / fridge temperature independently?

16. Spring 2006 16 Chp.1: What is HCI? Discussion Can you think of examples of: –very usable systems –not so usable systems (are there any devices that appear to be confusing to people)? How can they be improved? Can you think of examples of: –very usable computer programs –not so usable computer applications? How can they be improved? ASSIGNMENT 1: collect at least 3 examples (pictures) of not so usable “systems”, e.g., can by anything, doesn’t have to be computer program

17. Spring 2006 17 Chp.1: What is HCI? Examples of not very usable systems: –complicated telephones do you use all the features (e.g., multi-party conf. calls, call forwarding, call-waiting, etc.)? –wristwatch how often do you use its “extended” features (time zone, stopwatch, alarm, countdown timer, etc.) Examples of very usable systems: –scissors intuitive how to use, mainly because it mostly has just one application

18. Spring 2006 18 Chp.1: What is HCI? Lots of other examples (some good some not so good) here: http://www.baddesigns.com I’m sure there are others…don’t use the “classics”: ambiguous doors stovetop controls (the ones I just showed)

19. Spring 2006 19 Chp.1: What is HCI? When designing a computer program: –think what capabilities program should have –how is a user going to access those functions More formally, –HCI is a discipline concerned with the design, evaluation, and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them NOT just the creation of “user-friendly” programs Need to understand human processes (cognition, perception) and interaction protocol between human and computer

20. Spring 2006 20 Chp.1: What is HCI? HCI challenges: –continuous technological development, e.g.: better / faster machines new languages, applications (web, internet, VR, multimedia, imaging, graphics, etc.) –two concerns: keep abrest of technology (e.g., SIGCHI) marry good HCI with effective use of technology (I.e., make sure both are good: the “back-end” program works and the interface is good)

21. Spring 2006 21 Chp.1: What is HCI? HCI Goals: –production of usable, safe, and functional systems –development or improvement of systems (including computing systems), with respect to: safety utility (functionality, what system does) effectiveness (is it good at what it does) efficiency (in case of programming, speed, memory utlization, etc.) usability (key concept in HCI: make system easy to learn and use) –system: consider complete environment, not just hardware or software, but people

22. Spring 2006 22 Chp.1: What is HCI? Underlying HCI belief: people come first; a computer is just a tool, a means to accomplish some task, e.g., –writing a paper –communicating with friends –designing a landscape –preparing income taxes –cataloging, organizaing, printing pictures –desinging roads, bridges, airplanes, cars, etc. For good design, need knowledge of humans and technology –often need multi-disciplinary teams (e.g., Comp. Sci, Psychology, IE, Arts, etc.)

23. Spring 2006 23 Chp.1: What is HCI? Evolution of HCI –70s--80s: psychologists interested in information- processing aspects of computer as analogy to mental processes (e.g., modeling brain as a computer, connectionist network, associative memory, etc.) various HCI studies: testing menus (depth vs. breadth), usability of single-user computer –80s--90s: examining more powerful PCs, workstations, communication (e.g. email), multimedia (e.g., imaging, visualization, “data mining”), VR (“presence”), group work (CSCW)

24. Spring 2006 24 Chp.1: What is HCI? Evolution of HCI: three landmark systems 1.Dynabook Alan Kay, Xerox Parc one of first laptops (book-sized PC) 2.Star Xerox Parc desk-sized system high-res display, graphics, icons mouse mapped to 2D “desktop” on screen 3.Apple Lisa based to some extent on Dynabook & Star precursor to Macintosh WIMP: Windows, Icons, Menus, Pointer introduction of desktop metaphor GUI, WYSIWYG word processor

25. Spring 2006 25 Chp.1: What is HCI? Evolution of HCI: Main considerations All HCI takes place in social & organizational context Application design is geared towards specific purposes, dividing tasks between human and machine To adapt application to human, need to know something about human psychological and physiological abilities and limitations –human info processing: limited attention, memory –language: linguistics, verbal comm. –communication: methods of, body language, emoticons, etc. –interaction: human-to-human, e.g., turn-taking –ergonomics: carple-tunnel syndrome, eye strain, fatigue, …

26. Spring 2006 26 Chp.1: What is HCI? Evolution of HCI: Main considerations To create successful computer application, need to know something about capabilities and limitations of computer –input: devices, e.g., keyboard, mouse, camera, microphone, sensors, etc. –output: displays, graphics, sound, etc. –dialogue techniques, genre, style: what & how to communicate to user, e.g., state of system, output (visualizations, charts, numbers, etc.), what colors to use, animation speed, etc…

27. Spring 2006 27 Chp.1: What is HCI? Designing for users User-Centered Design –CHI’s current “buzzword” (used to be “user- friendly”), this is better since it suggests what differentiates HCI from traditional software engineering –traditional (old) SE design processes: waterfall model tends to leave user evaluation to the end result is (usually) that system works great for developers, not always for users –HCI design process: ITERATIVE DESIGN design, evaluate, repeat…

28. Spring 2006 28 Chp.2: Requirements gathering 4 components: –people –work (the task) –environment (physical, organizational, social) –technology The HCI design process: not quite as linear as software engineering’s “waterfall model” Key differences: –user-centered design: involve users as much as possible user requirements (HCI) vs. system requirements (SE) –integration of multidisciplinary knowledge –iterative design: periodically check with user

29. Spring 2006 29 Chp.2: Requirements gathering Inolving users: –decide who end user is, how product will be used, made, sold, marketed –observe current user practices - leads to system requirements (how can current practice be improved?) –can use psychological models of human, e.g., follow & test such concepts as Fitt’s Law –include user representatives on team: end users management marketing personnel graphic designers, etc.

30. Spring 2006 30 Chp.2: Requirements gathering Incorporating interdisciplinary knowledge: –computer science (AI, graphics, O/S, dB, etc.) –psychology –human factors –linguistics –philosophy –sociology –anthropology

31. Spring 2006 31 Chp.2: Requirements gathering: some techniques Direct observation –field studies –controlled studies (in the lab) –somewhat obtrusive, users may know they’re being watched/tested Indirect observation –video recording –keystroke logging –eye tracking Interviewing –questionnaires (usually subjective in nature, often administered for subjective evaluation) –Likert scale (“on a scale of 1-5” etc.)

32. Spring 2006 32 Chp.3: Users and domain Identify stakeholders –primary users (e.g., checkout person at Bi-Lo) –secondary users (e.g., customers at Bi-Lo) –tertiary users (e.g., Bi-Lo management, shareholders) Identify environment –physical (noise, stress, comfort, etc.) –social (individual, collaborative, etc.) –cultural (note cultural differences, language, etc.)

33. Spring 2006 33 Chp.3: Users and domain Usability goals –qualitative: learnability, etc., subjective evaluation –quantitative: measurable, e.g., performance (speed and accuracy) and process (eye movements) metrics Universal accessibility –designing for the disabled, e.g., color-blind (computer graphics: recoloring), quadrepligic (eye tracking: eye typing)

34. Spring 2006 34 Chp.3: Users and domain Characterizing users –of ATMs (as in textbook): what is their level of banking knowledge (shallow or deep) –other examples: fridge: do you need deep knowledge to operate? cell phones: what features do people want? “Known” user groups (personas): –early adopters –elderly –others?

35. Spring 2006 35 Chp.3: Users and domain Characterizing the domain –task analysis –gist: what expert knowledge is possessed by users? –example: designing for the military---complex domain, lots of expertise required Sounds difficult, e.g., “as a designer, do I need to possess the same expertise as users?” Doable if you think in terms of task, procedures, etc. What are the steps users typically make –examples? –doctors, x-ray radiologists, endoscope operators, stock brokers, military ATC operators (friend or foe tasks), etc.