Interfaces Homme-Machine

Transcription

1 Interfaces Homme-Machine APP3IR Axel Carlier 29/09/2017 1

2 2

3 Some vocabulary GUI, CHI,, UI, etc. 3

4 Some vocabulary Computer-Human Interaction Interaction HommeMachine User Interface Interface Utilisateur Graphical User Interface Interface Graphique 4

5 ACM definition HCI is «a discipline concerned with the design, evaluation and implementation of interactive computing systems for human use and with the study of major phenomena surrounding them.» Hewett, T. T., Baecker, R., Card, S., Carey, T., Gasen, J., Mantei, M.,... & Verplank, W. (1992). ACM SIGCHI curricula for human-computer interaction. ACM. 5

6 CHI-related domains Design Evaluation Ergonomics, Psychology, Cognitive Sciences, Visualization Human Factors, Sociology Statistics Development Software Development, Computer Graphics, Multimedia etc. 6

7 CHI importance How much of the code is devoted to CHI in today's (1992) applications? ~10 % ~25 % ~50 % ~70 % Myers, B. A., & Rosson, M. B. (1992, June). Survey on user interface programming. In Proceedings of the SIGCHI conference on Human factors in computing systems (pp ). ACM. 7

8 The Three Mile Island incident In 1979, one of this nuclear power plant's reactor partially melted down. 8

9 Historical pointers First tactile stylus 5'00 9

10 SketchPad ( ) Tactile stylus invented in 1955 Sutherland pioneered CAD software 10

11 Historical pointers First tactile stylus First mouse 11

12 First mouse Engelbart ( ) First commercial version in 1983 (Apple Lisa) 12

13 Historical pointers First tactile stylus First mouse First «smartphone» 13

14 IBM Simon (1992) Phone Agenda Calculator Notes taking Tactile screen 14

15 Historical pointers 1970 : Non-interactive interfaces Post-1970 : command-line interfaces 15

16 Visicalc (1979) 16

17 WordStar (1981) WYSIWYG «What You See Is What You Get» 17

18 Apple Lisa (1983) 18

19 Apple Lisa (1983) WIMP Window Icon Mouse Pulldown menu Desktop allegory Xerox Star

20 CHI-related domains Design Evaluation Ergonomics, Psychology, Cognitive Sciences, Visualization Human Factors, Sociology Statistics Development Software Development, Computer Graphics, Multimedia etc. 25

21 Visual hierarchy There should be a correlation between the importance of a content and the way it is displayed: Important content should stand out the most A reader should be able to deduce the informational structure of the page from its layout! 26

22 Gestalt Theory developed by psychologists early in the 20th century. Interpretation of the human visual perception system Our perception depends on several properties 27

23 Gestalt - Proximity Elements that are close are implicitly associated with each other. 28

24 Gestalt - Similarity Elements that have the same shape, color or orientation are implicitly associated with each other. 29

25 Gestalt - Continuity Aligned elements, that form continuous lines or curves, are associated with each other. 30

26 Gestalt - Closure Elements that can be grouped as a single closed form are associated to each other. 31

27 Gestalt When designing a GUI layout, keep in mind a user will perceive these properties. 32

28 Layouts The Gutenberg diagram Primary optical area Strong fallow area Weak fallow area Terminal area 33

29 Layouts The F-pattern 34

30 Layouts Faces and large texts are supposed to attract users attention Don't trust any «rules» 35

31 Navigational models Hub and spoke 36

32 Navigational Models Fully connected 37

33 Navigational Models Multi-level 38

34 Navigational Models Stepwise 39

35 Navigational Models Pyramid 40

36 Navigational Models Pan-and-zoom 41

37 A quick reminder Design Evaluation Ergonomics, Psychology, Cognitive sciences, Visualization Human Factors, Sociology, Statistics Development Software develoment, Computer graphics, Multimedia, etc. 42

38 V-Model 43

39 V-Model User tests come late 44

40 Error Correction Cost 45

41 User-centered design Analysis Conception Evaluation Users are everywhere in the process 46

42 User-centered design Analysis Interviews Persona Scenarii Use cases Card sorting Conception Mock-up / wireframe Prototypes Evaluation Perception test Usability testing 47

43 Interviews Goal: gathering user needs and expectations about the UI. Protocol: Face-to-face Open questions (avoid influencing the user) Neutral interviewer 1h 48

44 Interviews Interviews can have several goals, and can be conducted several times during the project. The range of goals include: Understanding the task Describing and categorizing potential users Getting feedback on a prototype 49

45 Persona About Face: The Essentials of Interaction Design, Alan Cooper 50

46 Why personas? Personas are a way to express users needs, motivations, expectations throughout the whole UI development process. So are statistics... So are real users 51

47 Personas? 52

48 Scenario Extension of the persona method Fictional story that happens to one of the persona while using the UI that is designed Add social context, a background story Best case, worst case, middle case scenarii Leads to writing use cases 53

49 Prototypes The actual UI development should be delayed as much as possible Expensive Prototypes (low quality, then high quality) should be used to validate usability before the actual development starts. 54

50 Horizontal vs. Vertical Prototyping Different features Horizontal Prototype Functionality Full System Vertical Prototype 55

51 Prototypes - Wireframe Horizontal prototype Describes the screen layout: Interface elements Navigational systems Screen content 56

52 Prototypes - Wireframe 57

53 Prototypes - Wireframe Cheap Can be annotated during testing Users can separate aesthetic and functional aspects of the UI 58

54 Paper vs. Computer Prototype 59

55 Story-boarding 60

56 Wizard of Oz Interactive paper prototype 61

57 Unique vs. multiple prototypes Doing multiple prototypes takes time! To design To test To refine Goal: avoiding functional fixation 62

58 Unique vs. multiple prototypes Doing multiple prototypes takes time! To design To test To refine Goal: avoiding functional fixation 63

59 70

60 CHI-related domains Design Evaluation Ergonomics, Psychology, Cognitive Sciences, Visualization Human Factors, Sociology Statistics Development Software Development, Computer Graphics, Multimedia etc.) 71

61 Evaluation User modelling Test categories Usability questionnaires 72

62 Technology Acceptance Model Perceived usefulness External Variables Attitude towards Behavioural intention to use Perceived ease-of-use Actual system use [Davis 1989] User acceptance of computer technology: A comparison of two theoretical models 73

63 Acceptability and Usability Usability Efficient to use Subjective satisfaction Easy to learn Easy to remember Few errors [Nielsen 1995] Usability engineering 74

64 Evaluation : Formative vs. Summative Formative Are we building the right interface? What should be different in the next iteration? Summative Does it work? Is it better than existing solutions? 75

65 Evaluation : Qualitative vs. Quantitative Qualitative A small group of users Open questions, interviews Quantitative A significant group of users Likert scale, measure of completion, task time, etc. 76

66 Two main types of test Perception test How do users understand the interface? Usability test Can users perform target tasks with this interface? 77

67 Perception test Mostly formative Mostly qualitative Present the interface to a user and ask questions 78

68 Perception test What does this screen allow you to do? What do you see first? Where are the buttons? The links? What do they mean? What are they for? What do you think will happen if you click here? In order to do [a task], what would you do? 79

69 To get some quantitative data 80

70 An alternative perception test The 5-seconds test Experiments have shown that some users get their first impression (positive or negative) in 50 ms. Most users take less than 5 seconds to make judgment about an interface (this is especially true for websites). 81

71 82

72 5 seconds test What is the website about? What did you, and did you not, like about the layout? Can you remember some words written on the webpage? 83

73 Usability tests - metrics Efficient to use Subjective satisfaction Easy to learn Easy to remember Few errors 84

74 Usability tests - metrics Completion rates (binary: 0 or 1) Task time (continuous) Number of errors (integer) Satisfaction ratings (Likert-scale) Encountered problems Efficient to use Subjective satisfaction Easy to learn Easy to remember Few errors 85

75 Usability metrics More specific to websites Clicks Page views Conversion rate 86

76 Think aloud test 87

77 Think aloud test Ask the user to verbally explain everything he does, why he does it, what he is thinking about. Record everything: The user face, and his voice The screen If possible, watch the whole session 3 to 5 users are usually enough to find most usability issues 88

78 Quantitative usability evaluation Prepare tasks that should be made possible by the UI Select a sample of users, representative of the target population (more information on the sample size later) Ask users to perform the tasks and answer a questionnaire 89

79 Quantitative usability evaluation The questionnaire(s) should try to assess some of the concepts that define usability Subjective satisfaction Easiness to learn Easiness to remember 90

80 Questionnaire The phrasing is important (acquiescence bias, format bias, etc.) Likert-scale How many Likert items should we use? 91

81 Standardized questionnaires Post-study questionnaires (QUIS, SUMI, PSSUQ, SUS, USE, UMUX) Post-task questionnaires (ASQ, ER, SEQ, SMEQ, UME) Websites questionnaires (WAMMI, SUPR-Q) Others (TAM) 92

82 SUS: Software Usability Scale 93

83 PSSUQ: Post-Study System Usability Questionnaire System Quality Information Quality Interface Quality 94

84 SMEQ: Subjective Mental Effort Question 95

85 ASQ: After Scenario Questionnaire 96

86 SUPR-Q: Standardized Universal Percentile Rank Questionnaire 97

87 TAM Questionnaire 98

88 Confidence interval For binary measures 99

89 For example If 7 out of 10 users completed a task

90 Confidence interval For rating-scale and other continuous data 101

91 Is there a statistical difference between designs? Between subjects vs. Within subjects Did the same users test different designs? Principle: Suppose both designs are equivalent (null hypothesis) and estimate the probability of obtaining the observed samples under this hypothesis. 102

92 How to proceed? Between-subjects Within-subjects Continuous data Two-sample t-test Paired t-test Binary data Chi-Square test McNemar test No clear agreement on the literature 103

93 Continuous data Within-subjects P-value (between 0 and 1) If p-value < 0.05, we can confidently reject the null hypothesis 104

94 Continuous data Between-subjects 105

95 Multimedia Project User-centered design: 3 user evaluations Mock-up (Wizard of Oz) Perception test Usability test Need to agree on a return date 106