Interfaces Homme-Machine - PDF Free Download

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

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

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

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

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

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. 195-202). ACM. 7

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

Historical pointers First tactile stylus 5'00 9

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

Historical pointers First tactile stylus First mouse 11

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

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

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

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

Visicalc (1979) 16

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

Apple Lisa (1983) 18

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

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

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

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

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

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

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

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

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

Layouts The F-pattern 34

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

Navigational models Hub and spoke 36

Navigational Models Fully connected 37

Navigational Models Multi-level 38

Navigational Models Stepwise 39

Navigational Models Pyramid 40

Navigational Models Pan-and-zoom 41

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

V-Model 43

V-Model User tests come late 44

Error Correction Cost 45

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

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

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

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

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

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

Personas? https://www.youtube.com/watch?v=b23iwg0koi8 52

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

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

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

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

Prototypes - Wireframe 57

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

Paper vs. Computer Prototype 59

Story-boarding 60

Wizard of Oz Interactive paper prototype 61

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

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

Evaluation User modelling Test categories Usability questionnaires 72

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

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

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

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

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

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

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

To get some quantitative data 80

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

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

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

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

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

Think aloud test 87

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

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

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

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

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

SUS: Software Usability Scale 93

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

SMEQ: Subjective Mental Effort Question 95

ASQ: After Scenario Questionnaire 96

SUPR-Q: Standardized Universal Percentile Rank Questionnaire 97

TAM Questionnaire 98

Confidence interval For binary measures 99

For example If 7 out of 10 users completed a task... 100

Confidence interval For rating-scale and other continuous data 101

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

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

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

Continuous data Between-subjects 105

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