Introduction to Human Computer Interaction 1 HumanComputer Interaction

Introduction to Human. Computer Interaction 1

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

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

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

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

User Interfaces (UIs) l Part of application that allows people l l l to interact with computer to carry out their task User vs. Customer vs. Client l l l 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 6

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

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

Interface Hall of Shame or Fame? 9

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

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

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

Interface Design Cycle Design Prototype Evaluate 13

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

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

Rapid Prototyping l l Build a mock-up of design Low fidelity techniques l l Interactive prototyping tools l l paper sketches cut, copy, paste video segments HTML, Visual Basic, Hyper. Card, Director, etc. UI builders l Fusion, Ne. XT, Visual Cafe Fantasy Basketball 16

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

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

Iteration At every stage! Design Prototype Evaluate 19

Goals of HCI for us l Learn to design, prototype, & evaluate interfaces l l l l 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 l key to your future success 20

Project Description l 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 l Groups l l l 2 -3 students to a group work with students w/ different skills/interests groups meet with teaching staff every two weeks Cumulative l apply several HCI methods to a single interface 21

Project Process Overview l l l Break-up into groups next Wednesday Project proposal Project task analysis & “sketches” l l l i. e. , rough proposals that can & will change Low fidelity prototyping & testing Build 1 st interactive prototype In class presentations & critiques Heuristic evaluations (individual) 22

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

Low-fi Prototyping & Testing 24 ESP

oje Sta rt D ct P Sk ro jec ate etc t. I he de s a Lo wfi U UI Pr ser oto Te De typ st liv e# era 1 ble 1 HE Su mm UI ary Pr oto typ e# De 2 live rab les 2 Us er Te sti UI ng Pr oto typ e# Em 3 d of Pro ject Pr Project Timeline 25

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

Research Notebook 27

Project Examples (cont. ) l Site. Sketch l l web page design sketch-based 28

Site. Sketch 29

Project Examples (cont. ) l CD Jukebox 30

CD Juke. Box 31

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

Clothes Shopper 33

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

Interactive TV Guide 35

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

Electronic Book Reader 37

Project Examples (cont. ) l Nutrition tracker 38

Nutrition Tracker 39

Project Examples (cont. ) l c. UIzine l recipe tool for the home 40

c. UIzine 41

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

Tech-Support Help Desk 43

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

Regular Expression Builder 45

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

Apartment Finder 47

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

PDA Brainstorming 49

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

Total Entertainment Control 51

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

Web Newspaper 53

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

PDA Baseball Scorekeeper 55

Palm. Stock 56

Ink. Chat 57

Ed Rendezvous Josh Brian Backend Cliff 58

Nutrition/Exercise Tracker 59

Trippin’ 60