Introduction to the Design, Prototyping, & Evaluation of Human-Computer Interfaces (CS 160)

1. Introduction to the Design, Prototyping, & Evaluation of Human-Computer Interfaces (CS 160) Professor James Landay Spring 2002 January 23, 2002

2. UI Hall of Fame or Hall of Shame? http://www.hro.nl/

3. Long Intros Belong in the UI Hall of Shame • Do not help the user accomplish their task • why did they come to the site? • Take too long • most visitors will just leave & never come back • May be valid for entertaninment, art, or branding sites

4. UI Hall of Fame or Hall of Shame?

5. UI Hall of Shame! • How do you cancel?

6. Introduction to the Design, Prototyping, & Evaluation of Human-Computer Interfaces (CS 160) Professor James Landay Spring 2002 January 23, 2002

7. Outline • Who am I? • HCI introduction • Course overview • Project description • Administrivia

8. Who am I? • Assistant professor in EECS • Ph.D. in CS from Carnegie Mellon 1996 • sketching user interfaces electronically • Work in the HCI area • informal communications (pens, speech, etc.) • ubiquitous computing • Cal grad (BS EECS ‘90)

9. Human-Computer Interaction (HCI) • Human • the end-user of a program • the others in the organization • Computer • the machine the program runs on • often split between clients & servers • Interaction • the user tells the computer what they want • the computer communicates results

10. Organizational & Social Issues Task Design Technology Humans What is HCI?

11. Organizational & Social Issues Task Design Technology Humans These Factors Influence Each Other & Design “Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device”

12. Organizational & Social Issues Task Design Technology Humans These Factors Influence Each Other & Design “Now that mice are included with most computers, applications assume a mouse will be used as a the pointing device”

13. Organizational & Social Issues Task Design Technology Humans Factors Influence “People change their knowledge as they perform, i.e., they learn”

14. Organizational & Social Issues Task Design Technology Humans Factors Influence “People change their knowledge as they perform, i.e., they learn”

15. User Interfaces (UIs) • Part of application that allows people • to interact with computer • to carry out their task • User vs. Customer vs. Client • user is a term only used by 2 industries -> bad! • customer – the person who will use the product you build • client – the person/company who is paying you to build it HCI = design, prototyping, evaluation, & implementation of UIs

16. Why Study User Interfaces? • Major part of work for “real” programs • approximately 50% • You will work on “real” software • intended for people other than yourself • Bad user interfaces cost • money (5% satisfaction -> up to 85% profits) • lives (Therac-25) • User interfaces hard to get right • people are unpredictable

17. What is Usability? • Ease of learning • faster the second time and so on... • Recall • remember how from one session to the next • Productivity • perform tasks quickly and efficiently • Minimal error rates • if they occur, good feedback so user can recover • High user satisfaction • confident of success

18. Interface Hall of Shame or Fame?

19. Interface Hall of Shame • Hard to tell the difference between the two icons & names

20. Who Builds Interfaces? • A team of specialists (ideally) • graphic designers • interaction / interface designers • technical writers • marketers • test engineers • software engineers • customers

21. Keys to Designing & Building Successful Interfaces • Design cycle • Customer-centered design • Task analysis & contextual inquiry • Rapid prototyping • Evaluation • Programming • Iteration

22. Interface Design Cycle Design Prototype Evaluate

23. Customer-centered Design “Know thy Customer” • Cognitive abilities • visual & aural perception • physical manipulation • memory • Organizational / job abilities • Keep customers involved throughout project

24. ? Task Analysis & Contextual Inquiry • Observe existing work practices • Create scenarios of actual use • Try-out new ideas before building software

25. Fantasy Basketball Rapid Prototyping • Build a mock-up of design • Low fidelity techniques • paper sketches • cut, copy, paste • video segments • Interactive prototyping tools • HTML, Visual Basic, HyperCard, Director, etc. • UI builders • Fusion, NeXT, Visual Cafe

26. Evaluation • Test with real customers (participants) • Build models • Low-cost techniques • expert evaluation • walkthroughs

27. Programming • Toolkits • UI Builders • Event models • Input / Output models • etc.

28. Design Prototype Evaluate Iteration At every stage!

29. Goals of the Course • Learn to design, prototype, & evaluate interfaces • discover the tasks of prospective customers • cognitive/perceptual constraints that affect design • techniques for evaluating an interface design • importance of iterative design for usability • technology used to prototype & implement UI code • how to work together on a team project • communicate your results to a group • key to your future success

30. How CS160 Fits into CS Curriculum • Most courses for learning technology • compilers, operating systems, databases, etc. • CS160 concerned w/design & evaluation • assume you can program/learn new languages • technology as a tool to evaluate via prototyping • skills will become very important upon graduation • complex systems, large teams • don’t look for large immediate impact in other CS courses

31. Project Description • Each of you will propose an interface idea • fixing something you don’t like or a new idea • Groups • 4-5 students to a group • work with students w/ different skills/interests • groups meet with teaching staff every two weeks • Cumulative • apply several HCI methods to a single interface

32. Project Process Overview • Project proposal (individual) due Monday • based on workshop we will hold this Saturday • Break-up into groups next Wednesday • Project task analysis & “sketches” • i.e., rough proposals that can & will change • Low fidelity prototyping & testing

33. ESP Low-fi Prototyping & Testing

34. Project Process Overview • Project proposal (individual) due Monday • based on workshop we will hold this Saturday • Break-up into groups next Wednesday • Project task analysis & “sketches” • i.e., rough proposals that can & will change • Low fidelity prototyping & testing • Build 1st interactive prototype • In class presentations & critiques • Heuristic evaluations (individual)

35. Project Process Overview (cont.) • Heuristic evaluation summary • Build 2nd interactive prototype • In lab demo & critiques • Customer testing of 2nd prototype • In class presentation & critiques • Build 3rd prototype • “real” interface, but not necessarily “real” app. • In class presentations & critiques

36. Low-fi User Test User Testing HE Summary March 13 Project Idea May 8 Jan. 28 Feb. 13 Project Sketches UI Prototype #1 UI Prototype #2 UI Prototype #3 Project Timeline

37. Project Examples • Online Telebears • Research notebook • threads of ideas • multiple views • secure time stamps

38. Research Notebook

39. Project Examples (cont.) • SiteSketch • web page design • sketch-based

40. SiteSketch

41. Project Examples (cont.) • CD Jukebox

42. CD JukeBox

43. Project Examples (cont.) • Clothes Shopper • online shopping • knows your prefs & sizes

44. Clothes Shopper

45. Project Examples (cont.) • Interactive TV Guide • find shows, program VCR to record, etc.

46. Interactive TV Guide

47. Project Examples (cont.) • Electronic book reader • take advantage of all the online texts on the net

48. Electronic Book Reader

49. Project Examples (cont.) • Nutrition tracker

50. Nutrition Tracker