Download presentation
Presentation is loading. Please wait.
1
1 Introduction to Human- Computer Interaction
2
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
3 What is HCI? Design Organizational & Social Issues TechnologyHumans Task
4
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
5 Factors Influence “People change their knowledge as they perform, i.e., they learn” Humans Technology Task Design Organizational & Social Issues
6
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
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
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
9 Interface Hall of Shame or Fame?
10
10 Interface Hall of Shame Hard to tell the difference between the two icons & names
11
11 Who Builds Interfaces? A team of specialists (ideally) graphic designers interaction / interface designers technical writers marketers test engineers software engineers customers
12
12 Keys to Designing & Building Successful Interfaces Design cycle Customer-centered design Task analysis & contextual inquiry Rapid prototyping Evaluation Programming Iteration
13
13 Interface Design Cycle Design Prototype Evaluate
14
14 Customer-centered Design “Know thy Customer” Cognitive abilities visual & aural perception physical manipulation memory Organizational / job abilities Keep customers involved throughout project
15
15 Task Analysis & Contextual Inquiry Observe existing work practices Create scenarios of actual use Try-out new ideas before building software ?
16
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
17 Evaluation Test with real customers (participants) Build models Low-cost techniques expert evaluation walkthroughs
18
18 Programming Toolkits UI Builders Event models Input / Output models etc.
19
19 Iteration Design Prototype Evaluate At every stage!
20
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
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
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
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
24 ESP Low-fi Prototyping & Testing
25
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
26 Project Examples Online Telebears Research notebook threads of ideas multiple views secure time stamps
27
27 Research Notebook
28
28 Project Examples (cont.) SiteSketch web page design sketch-based
29
29 SiteSketch
30
30 Project Examples (cont.) CD Jukebox
31
31 CD JukeBox
32
32 Project Examples (cont.) Clothes Shopper online shopping knows your prefs & sizes
33
33 Clothes Shopper
34
34 Project Examples (cont.) Interactive TV Guide find shows, program VCR to record, etc.
35
35 Interactive TV Guide
36
36 Project Examples (cont.) Electronic book reader take advantage of all the online texts on the net
37
37 Electronic Book Reader
38
38 Project Examples (cont.) Nutrition tracker
39
39 Nutrition Tracker
40
40 Project Examples (cont.) cUIzine recipe tool for the home
41
41 cUIzine
42
42 Project Examples (cont.) Tech support help desk avoid using the phone for getting help
43
43 Tech-Support Help Desk
44
44 Project Examples (cont.) Regular expression builder visual tool lets beginners build regular expression
45
45 Regular Expression Builder
46
46 Project Examples (cont.) Apartment finder kinda obvious!!! :)
47
47 Apartment Finder
48
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
49 PDA Brainstorming
50
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
51 Total Entertainment Control
52
52 Project Examples (cont.) Football play design program sketch players & show how they will move simulate plays Customized web newspaper
53
53 Web Newspaper
54
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
55 PDA Baseball Scorekeeper
56
56 PalmStock
57
57 InkChat
58
58 Josh Back- end Ed Brian Cliff Rendezvous
59
59 Nutrition/Exercise Tracker
60
60 Trippin’
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.