1. Human Computer Interface Lecture1. Introduction

2. UI Hall of Fame or Hall of Shame?

3. UI Hall of Shame! ▣ How do you cancel?

4. Outline ▣ HCI introduction ▣ Course overview

5. ▣ 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 Human-Computer Interaction (HCI)

6. What is HCI? Design Organizational & Social Issues TechnologyHumans Task

7. 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” Humans Technology Task Design Organizational & Social Issues

8. 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” Humans Technology Task Design Organizational & Social Issues

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

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

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

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

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

14. Interface Hall of Shame or Fame?

15. Interface Hall of Shame ▣ Hard to tell the difference between the two icons & names

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

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

18. Interface Design Cycle Design Prototype Evaluate

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

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

21. 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 Fantasy Basketball

22. Evaluation ▣ Test with real customers (participants) ▣ Build models ▣ Low-cost techniques ▲expert evaluation ▲walkthroughs

23. Programming ▣ Toolkits ▣ UI Builders ▣ Event models ▣ Input / Output models ▣ etc.

24. Iteration Design Prototype Evaluate At every stage!

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

26. Project Description ▣ Each of you will propose an interface idea ▲fixing something you don ’ t like or a new idea ▣ Groups ▲3 students in one group ▲work with students w/ different skills/interests ▣ Cumulative ▲apply several HCI methods to a single interface

27. Project Process Overview ▣ Project proposal (individual) ▣ Break-up into groups ▣ 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)

28. ESP Low-fi Prototyping & Testing

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

30. Research Notebook (Example)

31. Project Examples (cont.) ▣ SiteSketch ▲web page design ▲sketch-based

32. SiteSketch

33. Project Examples (cont.) ▣ CD Jukebox

34. CD JukeBox

35. Project Examples (cont.) ▣ Clothes Shopper ▲online shopping ▲knows your prefs & sizes

36. Clothes Shopper

37. Project Examples (cont.) ▣ Interactive TV Guide ▲find shows, program VCR to record, etc.

38. Interactive TV Guide

39. Project Examples (cont.) ▣ Electronic book reader ▲ take advantage of all the online texts on the net

40. Electronic Book Reader

41. Project Examples (cont.) ▣ Nutrition tracker

42. Nutrition Tracker

43. Project Examples (cont.) ▣ cUIzine ▲recipe tool for the home

44. cUIzine

45. Project Examples (cont.) ▣ Tech support help desk ▲ avoid using the phone for getting help

46. Tech-Support Help Desk

47. Project Examples (cont.) ▣ Regular expression builder ▲visual tool ▲lets beginners build regular expression

48. Regular Expression Builder

49. Project Examples (cont.) ▣ Apartment finder ▲ kinda obvious!!! :)

50. Apartment Finder

51. Project Examples (cont.) ▣ Read WWW over phone ▲find structure in pages & build voice menus ▲navigation problem ▲cache common paths & reorder? ▣ PDA brainstorming tool ▲small portable computers in a group meeting (say Palm Pilots)

52. PDA Brainstorming

53. Project Examples (cont.) ▣ Runner ’ s training log ▲input daily workouts ▲reports ▲reminders ▣ PDA for shopping ▲scan in UPC & tells you whether a good price ▣ Home entertainment control - “ no more remotes ”

54. Total Entertainment Control

55. Project Examples (cont.) ▣ Football play design program ▲sketch players & show how they will move ▲simulate plays ▣ Customized web newspaper

56. Web Newspaper

57. Project Examples (cont.) ▣ PDA Baseball score keeper ▲have stats of the players on your PDA ▲keep track of what happens during the game ▲upload stats after the game

58. PDA Baseball Scorekeeper

59. PalmStock

60. InkChat

61. Josh Back- end Ed Brian Cliff Rendezvous

62. Nutrition/Exercise Tracker

63. Trippin ’

64. Books ▣ Two recommended textbooks ▲Human-Computer Interaction by Alan Dix, et al., 2nd edition, 1998. ▲Developing User Interfaces by Dan Olsen, 1998.

65. Assignments (tentative) ▣ Individual ▲2-3 written ▣ Group ▲3-4 written assignments ▲all group work handed in on Web (group web site)

66. Grading ▣ A combination of ▲TEST (30%) ▲individual assignments, participation(40%) ▲group project (30%)  demos/presentation (group component)  project write-ups and exercises