hci lecture notes pt.pptx

this is a presentation on human computer interaction.

1. Human Computer Interaction Lecture Notes

2. HUMAN COMPUTER INTERACTION Csc 306 Source: VU, Lora Aroyo Adewale V.A. Lecture 1

3. Course OUTLINE Introduction to HCI Design process/Good and poor design Usability engineering concept Usability engineering life cycle Goal Oriented interaction design Implementation support tools Prototyping Usability evaluation Ubiquitous computing Groupware Virtual and Augmented Reality Collaborative work Hypertext and multimedia Cognitive models

4. HOW PEOPLE INTER A CT WITH COM P UT E RS?

5. yo, W eb & M e d ia G r o u p H u ma n -C o mp u ter Inter a ction Dashboards L o r a Aro 5

6. H u ma n -C o mp u ter Inter a ction L o r a Aroyo, W eb & M e d ia G r o u p 7

7. H u ma n -C o mp u ter Inter a ction Wearab l es L o r a Aroyo, W eb & M e d ia G r o u p 8

8. H u ma n -C o mp u ter Inter a ction Sensing Af f ect Blood V olume Pre s s u re (BV P ) ea r ring In t e r a c ti v e Pi l low as a TV r emote c o ntrol Galvanic Skin R e s p on s e ( GS R ) r in g s and bra c elet L o r a Aroyo, W eb & M e d ia G r o u p 9

9. “ A ve n g e rs” (2 12 H u ma n -C o mp u ter Inter a ction Sp e ech, M o bi l e & Au g m e nt e d I nt e racti o n “Mi n or i ty R e p o rt” (2 2 ) “H e r” ( 2 1 4 ) “Star T rek: In to t he Dark n ess” (2 1 3 ) ) “Star T rek: T OS” (1 9 6 7 ) L o r a Aroyo, W eb & M e d ia G r o u p

10. L o r a Aroyo, W eb & M e d ia G r o u p H u ma n -C o mp u ter Inter a ction Virtual Real i ty 11

11. 12 eb & H u ma n -C o mp u ter Inter a ction Interactive Workspaces Mim i o Sta n ford I nt e ractive W orks p ac e s Pro j ect B e n d D e sk L o r a Aroyo, W eb & M e d ia G r o u p

12. H u ma n -C o mp u ter Inter a ction WHY HCI?

13. How many interactive products are there in everyday use? Think for a minute about what you use in a typical day: cell phone, computer, personal organizer, remote control, soft drink machine, coffee machine, ATM, ticket machine, library information system, the web, photocopier, watch, printer, stereo, calculator, video game.. . the list is endless. Now think for a minute about how usable they are. How many are actually easy, effortless, and enjoyable to use? All of them, several, or just one or two? This list is probably considerably shorter. Why is this so? H u ma n -C o mp u ter Interaction

14. y s e H u ma n -C o mp u ter Inter a ction Typical Frustra t ions C a n ’ t fig u re out how to simp l e things do Many not f r eq u ent use functions h t tp : / / w w w .y o u t ube .c o m / w a tc h ? v = k eM m M 3 P 4 BRM Man h i dd e n functions Opera t i o n outcom not visib l e Can ’ t remember c omb i nat i ons of d i g i ts * # how do w e k now w hether i t w orked how c an w e remember that th i s opt i on i s O N h t tp : / /vi deo . goog le . c o m /vi de op l a y ? d o ci d =5 1 8495 7 822 3 0375 1 1 4 4 L o r a Aroyo, W eb & M e d ia G r o u p 14

15. Definition of HCI by ACM 15 “Human Computer Interaction is a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use as well as the major phenomena surrounding the it.” H u ma n -C o mp u ter Inter a ction

16. Goals of HCI (1) The goals of HCI are to produce usable and safe systems, as well as functional systems. In order to produce computer systems with good usability, developers must attempt to: Understand the factors that determine how people use technology Develop tools and techniques to enable building suitable systems Achieve efficient, effective, and safe interaction Put people first 16 H u ma n -C o mp u ter Inter a ction

17. Goals of HCI (2) Underlying the whole theme of HCI is the belief that people using a computer system should come first. Their needs, capabilities and preferences for conducting various tasks should direct developers in the way that they design systems. People should not have to change the way that they use a system in order to fit in with it. Instead, the system should be designed to match their requirements. 17 H u ma n -C o mp u ter Inter a ction

18. Goals of HCI (3) To develop or improve the Safety Utility Effectiveness Efficiency Usability Appeal . . . of systems that include computers 18 H u ma n -C o mp u ter Inter a ction

19. User-Centered Development Methodology Traditional software engineering methods arose in 1960s and 1970s Systems were not highly interactive End-user were computer specialists Issues concerning end-user and usability were not at all important user interface design not considered explicitly Now: Most end-users are not computer specialists Usability vital for success 19 H u ma n -C o mp u ter Inter a ction

20. System –Centred Design Traditional System-Centered design : Emphasis on the functionality, UI is added at the end Emphasis on correct software rather than on ease of use User has to adapt himself to the system 20 H u ma n -C o mp u ter Inter a ction

21. User-Centre design Things are changing : User-Centered design User Interface more important Emphasis on end-users’ tasks , Early end-user participation : in analysis and design Evaluation by end-users Consequences: more work for User Interface designer and User Interface programmer 21 H u ma n -C o mp u ter Inter a ction

22. Factors in HCI (1) There are a large number of factors which should be considered in the analysis and design of a system using HCI principles. Many of these factors interact with each other, making the analysis even more complex. 22 H u ma n -C o mp u ter Inter a ction

23. Factors in HCI (2) Organisation Factors Training, job design, politics, roles, work organisation Environmental Factors Noise, heating, lighting, ventilation Health and Safety Factors The User Cognitive processes and capabilities Motivation, enjoyment, satisfaction, personality, experience 23 H u ma n -C o mp u ter Inter a ction

24. Factors in HCI (3) Comfort Factors Seating, equipment, layout. User Interface Input devices, output devices, dialogue structures, use of colour, icons, commands, navigation, graphics, natural language, user support, multimedia Task Factors Easy, complex, novel, task allocation, monitoring, skills 24 H u ma n -C o mp u ter Inter a ction

25. Factors in HCI (4) Constraints Cost, timescales, budgets, staff, equipment, buildings System Functionality Hardware, software, application Productivity Factors Increase output, increase quality, decrease costs, decrease errors, increase innovation 25 H u ma n -C o mp u ter Inter a ction

26. Fields that contribute to HCI (1) Computer Science Implementation of software Engineering Faster, cheaper equipment Ergonomics Design for human factors 26 H u ma n -C o mp u ter Inter a ction

27. Fields that contribute to HCI (2) Graphic design Visual communication Technical writing Textual communication Linguistics, artificial intelligence Speech recognition, natural language processing 27 H u ma n -C o mp u ter Inter a ction

28. Fields that contribute to HCI (3) Cognitive psychology Perception, memory, mental models Sociology How people interact in groups Anthropology Study of people in their work settings 28 H u ma n -C o mp u ter Inter a ction

29. H u ma n -C o mp u ter Inter a ction Link to Software Engineer i ng • Sep a rate but relat e d concerns: v s . user Some o verlap in techniq u es – U s e cas e s – I t erative file cycle s y stems • • Mult i -discipl i n a ry n at u re of HCI L o r a Aroyo, W eb & M e d ia G r o u p 20

30. H u ma n -C o mp u ter Inter a ction Traditional Life Cycle L o r a Aroyo, W eb & M e d ia G r o u p 21

31. H u ma n -C o mp u ter Inter a ction Evaluatio n -Centered Equa l ly s u p p o r ti v e o f – top - do w n & bot t om - up in s id e- out & outside - in development – L o r a Aroyo, W eb & M e d ia G r o u p 22

32. H u ma n -C o mp u ter Inter a ction I t erative Model L o r a Aroyo, W eb & M e d ia G r o u p 23

33. Design Process/Good and Poor Design

34. The Psychology of Usable Things “ When simple things need pictures, labels, or instructions, the design has failed. ”

35. WHAT IS DESIGN? A simple definition of design is: achieving goals within constraints Goal: is the purpose of the design intended to be produced with the users and user needs in mind. Constraints: include materials to be used, standards to adopted, the cost, time needed for development as well as the health and safety issues attached to the system.

36. Affordance An  affordance  is the possibility of an action on an object or environment. Affordances are the range of possible (physical) actions by a user on an artefact: 36

37. Two types of Affordances Perceived Affordances : are the actions a user perceives to be possible. Real Affordances : are the actions which are actually possible. HCI LECTURE 2 37

38. Perceived Affordance Perceived affordance  is the quality of an object that suggests how it might be used. In screen-based communications, the concept of perceived affordance  is useful when designing or evaluating a graphical user interface (GUI). HCI LECTURE 2 38

39. Example of Affordance 39 Jug and Tea Cups Real Affordance: Jugs are used for serving tea, while tea cups are used for drinking tea Perceived Affordance: Jugs can be used for drinking tea and tea cups for drinking wine

40. Other examples of Affordances For physical objects, there can be both real and perceived affordances (and the two sets are not necessarily the same). Appearance indicates how to use something: – A chair affords (suggests) sitting. – Knobs are for turning. – Slots are for inserting things. – A button affords pushing. When perceived affordances are taken advantage of, The user knows what to do just by looking. HCI LECTURE 2 40

41. Ambiguous Affordances These two doors are examples of ambiguous affordances in door design. The affordances for these door seem reasonable within themselves. Context is everything. HCI LECTURE 2 41

42. HCI LECTURE 2 42

43. Good Design HCI LECTURE 2 43

44. Mappings Mappings are the relationships between controls and their effects on a system. Types of Mapping Arbitrary Mapping (requires the use of label and memory) Paired Mapping (Confusion can still occur) Full Natural Mapping (No ambiguity, no need for learning or remembering, and no need for labels) Question : How should one arrange the hot plate controls on a cooker? 44

45. Constraints The difficulty of dealing with a novel situation is directly related to the number of possibilities. Constraints are: Physical Semantic Cultural Logical These constraints limit on the number of possibilities. 45

46. Examples of Constraints Physical constraints such as pegs and holes limit possible operations. Semantic constraints rely upon our knowledge of the situation and of the world. Cultural constraints rely upon accepted cultural conventions. Logical constraints exploit logical relationships. For example a natural mapping between the spatial layout of components and their controls. Where affordances suggest the range of possibilities, constraints limit the number of alternatives. 46

47. 47 Motorbike toy with 12 parts.

48. Constraints make its construction simple, even for adults! Physical: Front wheel only fits in one place. Semantic: The rider sits on the seat facing forward. Cultural: Red is a rear light, yellow a front light. Logical: Two blue lights, two white pieces, probably go together. 48

49. The Motor Bike HCI LECTURE 2 49

50. Conventions Conventions are cultural constraints. They are initially arbitrary, but evolve and become accepted over time. They can however vary enormously across different cultures, for example: Light switches: America down is off Britain down is on 50

51. The Structure of Human Memory Short-Term Memory (STM) Short-term memory is the memory of the present, used as working or temporary memory. Information is retained in STM automatically and is retrieved without effort. However, the amount of information in STM is severely limited. STM is extremely fragile – the slightest distraction and its contents are gone. For example, STM can hold a seven digit phone number from the time you look it up until the time you use it, as long as no distractions occur. 51

52. The Structure of Human Memory ctd . Long Term Memory (LTM) Long-term memory is the memory of the past. It takes time to put things into LTM and time and effort to get things out. Capacity is estimated at about 100 million items. 52

53. Knowledge in the Head and in the World Not all of the knowledge required for precise behaviour has to be in the head. It can be distributed: partly in the head partly in the world and partly in the constraints of the world. 53

54. HCI Software Process

55. HCI Software Process The Software Process in HCI involves Software Development Life Cycle Find out the process of SDLC and the models used Usability Engineering Life Cycle

56. The Usability Engineering Lifecycle 1. Know the User 2. Usability Benchmarking 3. Goal-Oriented Interaction Design 4. Iterative Design: (a) Prototyping (b) Formative Usability Evaluation (Inspection and/or Testing) 5. Usability Evaluation 6. Follow-up Studies 56 HCI Lecture 3 Usability Engineering Concepts

57. Know the Users Identification of u sers can be classified according to their: Experience Educational level Age Amount of prior training HCI Lecture 3 Know the User 57

58. Usability Benchmarking This describes the standard of the new system to be develo ped in comparison to the existing standards. Raising the standard or maintaining the existing standard is also put into consideration in the interface design of the system. The return on investment (i.e. profit margin) of the new system would be part of the benchmarking. HCI Lecture 3 Usability Benchmarking 58

59. Goal-Oriented Interaction Design The software is designed based on an understanding of human goals and associated tasks. What is a goal? A goal is a final purpose or aim, an objective. Tasks are particular ways of accomplishing a goal. There may be multiple ways of achieving a goal. Goal Oriented Interaction Design 59

60. Example of goal and tasks Goal: Get something to eat. Task: Go to the restaurant around the corner. Task: Call small chops service. Task: Go to the market, buy ingredients, and cook for self. Too often, software designers focus on simplifying a task, rather than accomplishing a goal. Tasks are means to an end, not an end in themselves. 60

61. Six Attributes of Usability of a System (1) Effectiveness: completeness with which users achieve their goal. (2) Learnability: ease of learning for novice users. (3) Efficiency: steady-state performance of expert users. (4) Memorability: ease of using system intermittently for casual users. (5) Errors: error rate for minor and catastrophic errors. (6) Satisfaction: how satisfying a system is to use, from user’s point 61 HCI Lecture 4 Usability Engineering Concepts

62. 9 A model of factors contributing to usability HCI Lecture 3 Usability Engineering Concepts

63. 10 Usability Principles 1. Do not rely only just on usability guidelines – always test with users. Usability guidelines have exceptions; you can only be confident that a UI is good if you test it successfully with users. 2. Ensure that the sequences of actions to achieve a task are as simple as possible. Reduce the amount of reading and manipulation the user has to do. Ensure the user does not have to navigate anywhere to do subsequent steps of a task. HCI Lecture 3 Usability Engineering Concepts

64. 11 Usability Principles 3. Ensure that the user always knows what he or she can and should do next Ensure that the user can figure out the affordance ( what commands are available and are not available). Make the most important commands stand out . 4 . Provide good feedback including effective error messages. Inform users of the progress of operations and of their location as they navigate. When something goes wrong explain the situation in adequate detail and help the user to resolve the problem . HCI Lecture 3 Usability Engineering Concepts

65. 12 Usability Principles 5. Ensure that the user can always get out, go back or undo an action . Ensure that all operations can be undone . Ensure it is easy to navigate back to where the user came from. 6. Ensure that response time is adequate. Users are very sensitive to slow response time They compare your system to others. Keep response time less than a second for most operations. Warn users of longer delays and inform them of progress . HCI Lecture 3 Usability Engineering Concepts

66. Implementation Support -Tools

67. Technology Supporting User Interface. Input Devices. Output Devices. High-speed Processing. Networking. 67

68. Technology Supporting User Interface. Input Devices. Keyboard. Pointing devices. 3D Input. Recognized Input. 68

69. Technology Supporting User Interface. Input Devices. Keyboards. QWERTY DVORAK Split 69

70. Technology Supporting User Interface. Input Devices. POINTING DEVICES Mouse Trackball Touch-screen 70

71. Technology Supporting User Interface. Input Devices. 3D Input. Data Glove 3D-Mouse 71

72. Technology Supporting User Interface. Input Devices. Recognized Input. OCR Eye-Gaze Barcode Scan 72

73. Technology Supporting User Interface. Output Devices. CRT. LCD. Sound. Printers 3D display 73

74. Computers vs. Humans Computers do not work like humans. One part of software, the inside, must be written in harmony with the demands of hardware The other side of software, the outside, must be written in harmony with the demands of human nature. 74

75. Differences between computers and humans Computers Humans Incredibly Fast Incredibly Slow Error Free Error Prone Deterministic Irrational Apathetic Emotional Literal Inferential Sequential Random Predictable Unpredictable Amoral Ethical Stupid Intelligent 75

76. Prototyping In increasing order of complexity: Verbal Prototypes: textual description of choices and results. Paper Prototypes: Low-Fidelity: hand-drawn sketches. High-Fidelity: more elaborate printouts. Interactive Sketches: interactive composition of hand-drawn sketches. Working Prototypes: interactive, skeleton implementation. 76

77. Verbal Prototype Simple textual description of choices and results. Write the user guide first, before anything is implemented. Have it reviewed by someone else. HCI Lecture 8 Prototyping 77

78. Paper Prototypes Paper prototypes simulate screen and dialogue elements on paper. First hand-drawn sketches (lo-fi), later perhaps more elaborate printouts (hi-fi). Greeking (drawing squiggly lines) is used to represent text which would otherwise be a distraction. 78

79. Interactive Sketches Scan in hand-drawn interface sketches. Assemble interactive prototype with clickable elements. Retains throwaway, casual look to encourage criticism and discussion, as shown in Figure 6. 79

80. Interaction Design versus Interface Design Interface design suggests an interface between code on one side and users on the other side and passing messages between them. Interaction design refers to function, behaviour, and final presentation of a system 80

81. Usability Evaluation

82. Usability Evaluation – Four Types Exploratory - how is it (or will it be) used? Predictive - estimating how good it will be. Formative - how can it be made better? Summative - how good is it? 82

83. Usability Evaluation Methods The methods of usability evaluation can also be classified according to who performs them: Usability Inspection Methods Inspection of interface design by usability specialists using heuristics and judgement (no test users). Usability Testing Methods Empirical testing of interface design with real users . 83

84. Usability Inspection Methods Inspection methods of interface design use heuristic methods based on analysis and judgement rather than experiment. Theses methods are: 1. Heuristic Evaluation: A small team of evaluators inspects an interface using a small checklist of general principles and produces an aggregate list of potential problems. 2. Guideline Checking: An evaluator checks an interface against a detailed list of specific guidelines and produces a list of deviations from the guidelines. 84

85. 3. Cognitive Walkthrough: A small team walks through a typical task in the mind set of a novice user and produces a success or failure story at each step along the correct path. [analyses learnability] 4. Guideline Scoring: An evaluator scores an interface against a detailed list of specific guidelines and produces a total score representing the degree to which an interface follows the guidelines. 85

86. 5. Action Analysis: An evaluator produces an estimate of the time an expert user will take to complete a given task, by breaking the task down into even smaller steps and then summing up the atomic action times. [analyses efficiency] 86

87. Usability Testing Methods “ Would you fly in an airplane that has not been flight tested? Of course not. So you should not be using software that has not been usability tested. ” 87

88. Why do Usability Testing? More often than not, intuitions are wrong! People believe they understand behaviour of others based on their own experiences. This belief only lost through prediction if there is no measurement (! usability tests). Designers of system find it very easy to use. Experience changes one’s perception of the world. It is almost impossible to “forget” an experience and put oneself in position of someone not having had the same experience. 88

89. Usability Testing Methods Empirical testing of interface design with representative users. ( i ) Thinking Aloud: Test users verbalise thoughts while performing test tasks. (ii) Co-Discovery: Two test users explore an interface together. Insight is gained from their conversation while performing test tasks. (iii) Formal Experiment: Controlled experiment, face-to-face with test users, measurements and statistical analysis. (iv) Query Techniques: Interviews and Questionnaires (v) Usage Studies: Usage data is collected from a small number of users working on their own tasks in their natural environment over a longer period. 89