1 Introduction to Human- Computer Interaction

2 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)

3 What is HCI? Design Organizational & Social Issues TechnologyHumans Task

4 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

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

6 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

7 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

8 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

9 Interface Hall of Shame or Fame?

10 Interface Hall of Shame Hard to tell the difference between the two icons & names

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

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

13 Interface Design Cycle Design Prototype Evaluate

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

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

16 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

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

18 Programming Toolkits UI Builders Event models Input / Output models etc.

19 Iteration Design Prototype Evaluate At every stage!

20 Goals of HCI for us 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

21 Project Description Example project from an HCI class propose an interface idea fixing something you don’t like on the web or a new idea for the web Groups 2-3 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

22 Project Process Overview Break-up into groups next Wednesday Project proposal 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)

23 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

24 ESP Low-fi Prototyping & Testing

25 Project Timeline Start Date Deliverable 1 Deliverables 2 Emd of Project Project Idea Project Sketches Low-fi User Test UI Prototype #1 HE Summary UI Prototype #2 User Testing UI Prototype #3

26 Project Examples Online Telebears Research notebook threads of ideas multiple views secure time stamps

27 Research Notebook

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

29 SiteSketch

30 Project Examples (cont.) CD Jukebox

31 CD JukeBox

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

33 Clothes Shopper

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

35 Interactive TV Guide

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

37 Electronic Book Reader

38 Project Examples (cont.) Nutrition tracker

39 Nutrition Tracker

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

41 cUIzine

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

43 Tech-Support Help Desk

44 Project Examples (cont.) Regular expression builder visual tool lets beginners build regular expression

45 Regular Expression Builder

46 Project Examples (cont.) Apartment finder kinda obvious!!! :)

47 Apartment Finder

48 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)

49 PDA Brainstorming

50 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”

51 Total Entertainment Control

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

53 Web Newspaper

54 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

55 PDA Baseball Scorekeeper

56 PalmStock

57 InkChat

58 Josh Back- end Ed Brian Cliff Rendezvous

59 Nutrition/Exercise Tracker

60 Trippin’