Introduction to Human Computer Interaction 1 HumanComputer Interaction
- Slides: 60
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
- Stanford hci group
- Icon design in hci
- Paradigm of interaction in hci
- The human inputs and outputs information through
- History of human computer interface
- In computer
- Hci chapter 1
- Jelaskan tentang antarmuka generasi masa depan
- Prinsip imk
- Human computer interaction syllabus
- Pengertian hci
- Alan dix
- Human computer interaction diagram
- Ergonomics in human computer interaction
- Hci merupakan
- Definition of hei in geography
- Ap
- Human environment interaction in portland oregon
- Spatial interaction ap human geography
- What is egypt relative location
- Generalized map ap human geography
- Spatial interaction ap human geography
- Lingua franca definition ap human geography
- Spatial interaction ap human geography
- Human environment interaction
- Human environment interaction
- Cultural diffusion def
- Rome human environment interaction
- Interaction in computer graphics
- Human vs non human bones
- Human needs and human development
- Chapter 8 human needs and human development
- Human development index definition ap human geography
- Human and non human nouns
- Difference between humans and computer
- Cs766
- Introduction to human communication
- Introduction digestive system
- Introduction of human reproduction
- New approaches to organizing hr
- Human resources management chapter 1
- Waistline
- Introduction of hrm
- Human resource planning introduction
- What is decruitment
- Definition of planning
- Medial lateral distal proximal
- Human development introduction
- Introduction of human digestive system
- Introduction of human eye
- Introduction of human eye
- Introduction to human variation
- Multicausality in human services
- Multicausality in human services
- Objectives of computer
- Difference between a computer and computer system
- Computer, computer basics, input and output devices
- Basic structure of a computer
- Difference between computer organisation and architecture
- Basic computer organization and design
- Basic computer organization and design