CS 160 Introduction

1. CS 160 Introduction Professor John Canny Fall 2001 August 28, 2001

2. UI Hall of Fame or Hall of Shame?

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 entertainment, art, or branding sites

4. UW Design Machine Group UI Hall of Fame or Hall of Shame?

5. UI Hall of Shame • How do you find the information???? • click on the icons on left • not obvious • icons are moving, making it harder • imagine someone with motor impairment • May be valid for their audience…

6. UI Hall of Fame or Hall of Shame?

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

8. CS 160 Introduction Professor John Canny Fall 2001 August 28, 2001

9. Outline • Who am I? • HCI introduction • Course overview • Project description & handout • Administrivia

10. Who am I? • Professor in EECS • Ph.D. in CS from MIT 1987 • Robot motion planning, computer algebra • Research interests: • Robotics, graphics, simulation, active polymers • Work in HCI • Telepresence (esp. telerobots), avatars • Collaborative filtering & privacy

11. Human-Computer Interaction (HCI) • Humans • A person trying to accomplish something • Other innocent bystanders • Computers • Run application programs • Often remote (client-server) • Interaction • Human expresses their wishes to the machine • The machine responds

12. Organizational & Social Issues Task Design Medium(technology) Humans UI design

13. Task Design Medium(technology) 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” Organizational & Social Issues Humans

14. Task Design 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” Organizational & Social Issues Medium(technology) Humans

15. Task Design Factor Influences “People change their knowledge as they perform, i.e., they learn” Organizational & Social Issues Medium(technology) Humans

16. Task Design Factor Influences “People change their knowledge as they perform, i.e., they learn” Organizational & Social Issues Medium(technology) Humans

17. Task Design Factor Influences People and their tasks change slowly compared to technology: a well-designed UI should last for a while (like mice, desktops etc.) Organizational & Social Issues Medium(technology) Humans

18. User Interfaces (UIs) • Part of application that allows users • to express their intentions to the machine • to interpret results of machineactions • HCD = Human-Centered Design • Understanding user needs • Design • Prototyping • Evaluation • Final implementation of UIs

19. Why Study User Interfaces? • Major part of work for “real” programs • approximately 50% • Many application programs are mostly UI • word proc., spreadsheet, PDAs, email, calendars etc. • You will work on “real” software • intended for users other than yourself • Bad user interfaces cost • money (5%  satisfaction -> up to 85%  profits) • lives (Therac-25) • User interfaces hard to get right • people and tasks are complex

20. Who builds UIs? • A multi-disciplinary team (ideally) • graphic designers • interaction / interface designers • technical writers • marketers • test engineers • software engineers • users

21. How to Design and Build UIs • Identify and understand users’ needs • Task analysis & contextual inquiry • Rapid prototyping • Evaluation • Programming • Iteration

22. Design Prototype Evaluate UI Design Cycle

23. Human-Centered Design • Understanding people • “Get inside the user’s head” • Keep users involved throughout design • Psychology • Cognitive: perception, movement, memory • Social: motives, personalities, group dynamics • Organizations and knowledge work

24. ? Task Analysis & Contextual Inquiry • Observe existing work practices • Create examples and 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 users (participants) • Build models • Low-cost techniques • expert evaluation • walkthroughs

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

28. Design Prototype Evaluate Iteration At every stage!

29. Goals of the Course • Learn to design, prototype, & evaluate UIs • the tasks of prospective users • psychological issues that affect design • techniques for evaluating a user interface design • importance of iterative design for usability • technology used to prototype & implement UI code • how to work together on a team project • communicate ideas • 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 • skills are relevant for other design courses • Are there “purely technical” systems? • Yes! They’re the ones nobody uses. • The rest have usability issues, even indirect ones

31. Project Description • Each of you will propose a UI or app. • 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 due two weeks from Thursday. • Project task analysis & “sketches” • i.e., rough proposals that can & will change • Low fidelity prototyping & user testing

33. ESP Low-fi Prototyping & Testing

34. Project Process Overview • Form groups by next week • User interviews (tentative) • Project task analysis & “sketches” • i.e., rough proposals that can & will change • Low fidelity prototyping & user testing • Build interactive (hi-fi) prototype • In-class presentations and critiques • Heuristic evaluations (individual)

35. Project Process Overview (cont.) • Heuristic evaluation summary • Build 2nd interactive prototype • In lab demo and critiques • User testing of 2nd prototype (observation) • In class presentation and critiques • Build final design • In class presentations and critiques

36. Project Timeline Low-fi User Test HE Summary Project Idea User Testing Dec. 1 Sept. 8 Nov. 1 Oct. 1 Hi-fi Prototype #1 Project Sketches Final Prototype Hi-fi Prototypes

37. Project Examples • CD Jukebox

38. CD JukeBox

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

40. Clothes Shopper

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

42. Interactive TV Guide

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

44. Electronic Book Reader

45. Project Examples (cont.) • Nutrition tracker

46. Nutrition Tracker

47. Project Examples (cont.) • cUIzine • recipe tool for the home

48. cUIzine

49. InkChat

50. Ed Rendezvous Josh Brian Back- end Cliff