ergonomie & expérience utilisateur (ux) | cours introduction (mobile)

USERVALUE

utilisabilité + expérience utilisateur, He-Arc le 29 avril 2016 (Julien Roland)

UI Mobiles

Julien

Dorit

USERVALUE

3 messages à retenir à propos d’UX Bon pour les utilisateurs … mais aussi pour le business Pas d’UX sans utilisateurs : des Tests … et encore des Tests On peut mesurer, quantifier l’UX … et on doit le faire

-  Easy to use -  Efficient -  Attractive

-  Productive -  Generate Clicks

-  Convincing

UX, Usability, Software Ergonomics … ?

Make digital user interfaces more efficient, for Users and for Businesses

Website

Apps

Smart TV

Software

Credit Photo: AP

User Interfaces that Work ?

Pourquoi améliorer l’UX ? Maximiser les bénéfices (ROI) de votre projet numérique

- des utilisateurs satisfaits qui reviennent (loyauté)

- des interfaces qui optimisent les conversions

- des applications plus productives

Credit Photo: http://wallpaperus.org/laptops-angry-1366x906-wallpaper-836413/

L’expérience utilisateur - En quelques chiffres

Source : Flickr

UX

101,

Nie

lsen

Nor

man

Gro

up

0%

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

Quittent le site à cause d'une mauvaise

expérience

Des acheteurs parlent de leur mauvaise

expérience

On dépense 10% en budget pour gagner 83%

en KPI

68%

44%

10%

83%

Une vraie prise de conscience de l’importance de l’expérience utilisateur

Sources : www.userexperience.co.nz

… même s’il n’est pas toujours simple de convaincre les clients de « faire de l’UX »

RECONTRER DE VRAIS UTILISATEURS

USERVALUE

Planifier le processus

de conception centrée sur l’opérateur humain

La solution conçue

satisfait les exigences utilisateurs

Itérer le cas échéant

Comprendre et spécifier le contexte d’utilisation

Spécifier les exigences

utilisateurs

Proposer des solutions de

conception satisfaisant aux exigences utilisateurs

Évaluer les conceptions

par rapport aux exigences utilisateurs : Tests utilisateurs, Audit

ergonomique, surveillance long terme

D’après ISO 9241:2010

UN PROCESSUS DE CONCEPTION CENTRÉE UTILISATEUR

Lab Field Without use

From C. Rohrer

What people DO

What people SAY

WHY and HOW?

HOW MUCH ?

User Tests

Eye Tracking

Remote User Tests

Contextual Inquiries

Online UX Surveys

Questionnaires – Satisfaction

Card sorting

Focus Groups

A/B Testing

Top Tasks Analysis

DES MÉTHODES D’ÉVALUATION

Planifier le processus

de conception centrée sur l’opérateur humain

La solution conçue

satisfait les exigences utilisateurs

Itérer le cas échéant

Comprendre et spécifier le contexte d’utilisation

Spécifier les exigences

utilisateurs

Proposer des solutions de

conception satisfaisant aux exigences utilisateurs

Évaluer les conceptions

par rapport aux exigences utilisateurs : Tests utilisateurs, Audit

ergonomique, surveillance long terme

D’après ISO 9241:2010

TEST UTILISATEUR, DANS NOTRE LAB

USERVALUE

TEST UTILISATEUR, DEPUIS LA SALLE D’OBSERVATION

USERVALUE

TEST UTILISATEUR, SUR UNE TABLETTE

USERVALUE

Discover usability problems Assess the « quality » of one or more interfaces

(incl. measures)

Formative Tests Summative Tests

Vs. ?

WHEN TO DO USER TESTS ?

Define what to improve

Test iteratively

Compare 2 designs

Assess the quality of UX

Old design

New design

PRÉPARER UN TEST UTILISATEUR

qu’est-ce qui pose problème ?

quels sont les utilisateurs cibles concernés ?

recruter les utilisateurs cibles pour le test

spécifier les tâches que l’on veut tester à travers des scénarios

spécifier les données que l’on veut recueillir

préparer le guide d’entretien

valider le guide d’entretien avec le client

faire 1 ou +sieurs tests d’essai

préparer le setup technique

LES SCÉNARIOS

-  « Vous voulez faire une randonnée autour du Col du Mollendruz ce WE. Pouvez-vous me trouver la météo pour Dimanche sur ce site Web ? »

-  « Vos chaussures de course à pied sont usées et vous souhaitez les remplacer. Pouvez-vous en

acheter une paire adaptée à vos besoins, dans votre pointure sur ce site E-commerce ? »

-  « Imaginons que vous souhaitiez boire un grand

Capuccino, fait avec des graines de café moyennement fortes, un ajout de goût caramel et une dose extra de café. Pouvez-vous préparer cette

boisson sur ce distributeur ? »

DES EXEMPLES DE SCÉNARIOS ?

1 2 3

4

5 6

LE GUIDE D’ENTRETIEN : BRIEFING / PRÉ-TEST

LE GUIDE D’ENTRETIEN : TÂCHES

LE GUIDE D’ENTRETIEN : POST-TEST

Guerilla À distance, non modéré

À distance, modéré

En Lab

Desktop, Mobile / Responsive

Apps (Smartphone)

Intranet/App. Enterprise/App. Industrielle

Sélection des profils participants

Participants distribués géographiquement

Sessions dans plusieurs langues

Adapté à des tests fréquents, itératifs

Données qualitatives riches sur les comportements et attentes

Sessions Limitées

Pas de modérateur

Nombre de participants (typiquement) < 10 Non limité 8 – 16 8 - 16

Durée de chaque session < 20 minutes (3-5 tâches)

20 minutes (* 5 tâches)

45min – 1h15 (* 15 tâches)

45min – 1h15 (* 15 tâches)

Données quantitatives, échantillon réduit (8 - 12)

Données quantitatives, échantillon large

Rapport, Vidéos Minimal Pas de vidéos

Observer les sessions en temps réel

Debriefing en temps réel avec les clients pendant les sessions

Mode d’intervention - Wireframing - UX Coaching

- Combi. Lab - UX Coaching

Stand alone Stand alone

TEST UTILISATEUR À DISTANCE, NON MODÉRÉ

https://www.loop11.com/account/

MESURER L’EXPÉRIENCE UTILISATEUR

LES ÉVALUATIONS POST-TÂCHES

6 10 2 3 4 9 11 12 5 1 7 8S N/A F S F N/A S F N/A N/A F N/AS S S S S S S S S S S SF F F F F F F F F S S SS F S S S F S S F S S SF F F F F F F S S S F SS S S S S S S S S S S SN/A N/A N/A N/A N/A N/A N/A N/A N/A S N/A N/AF F F F F F F S S S S SN/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/AS S S S S S S S S S S SN/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/AF F S F F F S S S S S FF S S S S F F F S F S SF S S S S S S S N/A S S SS F F F F S S F F S S SF F F F N/A N/A F F N/A F S S

# tâ

che

# participant

1.00

2.00

3.00

4.00

5.00

6.00

7.00

PERFORMANCE

DIFFICULTÉ

LES QUESTIONNAIRES POST-TEST : LE SUS

LES QUESTIONNAIRES POST-TEST : LE SUS

0

10

20

30

40

50

60

70

80

90

100

SUS Score

49 Non acceptable

Marginal

Acceptable

Pauvre

OK

Bien

Excellent

(score, avec marge d’erreur, 95% confiance)

LES QUESTIONNAIRES POST-TEST : L’ATTRAKDIFF

LES QUESTIONNAIRES POST-TEST : L’UX SCORE

DÉSIRABILITÉ

Flickr

-  Meet real users -  Test and observe their behaviour -  Don’t just listen to what they say

Tests Utilisateurs

≠ Focus Groups

A. Colville, « Cheval et Train »

WHY YOU NEED TO TEST, NOT JUST ASK WHAT THEY WANT

WHY YOU NEED TO OBSERVE, NOT JUST ASK WHAT THEY THINK

« Strangers to ourselves » book cover, Th. Wilson

FOCUS GROUP VS. TEST UTILISATEUR : TROUVER LES DIFFÉRENCES !

-  Make the users real

-  Show HCD in practice, don’t tell

-  Convince with facts, not opinions

-  Agree on what needs to be done

MAKE CHANGE HAPPEN THROUGH TESTING

-  Shorter, lighter Tests

-  Focus on Formative Testing

-  UX « stream » is 1-step ahead

-  Test on what’s available

-  Do the UX « basics » upfont

WHAT DOES AGILE MEAN FOR UX TESTING ?

4 key messages about UX Testing -  Good for Users … but also good for Businesses -  No UX without Users : Test … and more Tests

-  It’s possible to measure UX … and you should do it -  Design is a social process, and Testing is a tool for change

EXERCICE : REALISER UN TEST UTILISATEUR

Doodle

1 / "Vous voulez rencontrer vos amis pour un apéro à Neuchâtel dans les semaines qui viennent. Pour cela vous souhaitez fixer une date qui convienne à tous parmi le 4 mai, le 6 mai et le 11 mai. Grâce à l'application pouvez-vous fixer avec vos amis une date qui convienne à tout le monde ? »

2 / "Maintenant vous vous rendez-compte que vous n'êtes plus disponible le 6 mai, comment pouvez-vous l'indiquer à vos amis avec l’App ? »

3 / "Maintenant je vais vous poser une question : Si vous avez invité 3 amis, Martine, Jean et Pierre - qui va voir les réponses de Martine au sondage ? »

4 / "Vous souhaitez être la / le seul à voir les réponses au sondage : Comment feriez-vous ? »

5 / "On imagine enfin, que vous décidez finalement d'appeler vos amis au lieu d'utilisez Doodle, et voulez supprimer le sondage : Comment feriez-vous ? Comment pensez-vous que vos amis vont être informés ? »

Planifier le processus

de conception centrée sur l’opérateur humain

La solution conçue

satisfait les exigences utilisateurs

Itérer le cas échéant

Comprendre et spécifier le contexte d’utilisation

Spécifier les exigences

utilisateurs

Proposer des solutions de

conception satisfaisant aux exigences utilisateurs

Évaluer les conceptions

par rapport aux exigences utilisateurs : Tests utilisateurs, Audit

ergonomique, surveillance long terme

D’après ISO 9241:2010

UNDERSTAND WHAT’S REAL

americanhistory.si.edu

-  Real processes -  Hard to verbalize

-  Rich picture

ETHNOGRAPHIES : OBSERVER ET COMPRENDRE

USERVALUE

TRI DE CARTES

USERVALUE

TRI DE CARTES

USERVALUE

Planifier le processus

de conception centrée sur l’opérateur humain

La solution conçue

satisfait les exigences utilisateurs

Itérer le cas échéant

Comprendre et spécifier le contexte d’utilisation

Spécifier les exigences

utilisateurs

Proposer des solutions de

conception satisfaisant aux exigences utilisateurs

Évaluer les conceptions

par rapport aux exigences utilisateurs : Tests utilisateurs, Audit

ergonomique, surveillance long terme

D’après ISO 9241:2010

WIREFRAME : AVEC BALSAMIQ

UI DESIGN PATTERNS

1 2

3 4

5

6

8

https://en.wikipedia.org/wiki/NS_Savannah

ADAPTATION À LA TÂCHE

Lorsque l’interface s’appuie sur les

caractéristiques de la tâche plutôt que sur la technologie

ADAPTATION À LA TÂCHE

Image from: http://en.3cbang.com/view/19925.

CARACTÈRE AUTODESCRIPTIF

Lorsqu’on sait à tout moment où

on est, qu’est-ce qu’on peut faire et comment on peut

le faire

CARACTÈRE AUTODESCRIPTIF

https://www.flickr.com/photos/schluesselloch/4744914571/

CONFORMITÉ AUX ATTENTES DES UTILISATEURS

Lorsque l’interface correspond aux

besoins prévisibles de l’utilisateur et aux conventions

CONFORMITÉ AUX ATTENTES DES UTILISATEURS

FACILITÉ D’APPRENTISSAGE

Lorsque l’interface soutient et guide l'utilisateur dans

l'apprentissage de l'utilisation

du système

FACILITÉ D’APPRENTISSAGE

CONTRÔLE UTILISATEUR

Lorsque l'utilisateur peut

contrôler l'interaction

jusqu'à atteindre son but

CONTRÔLE UTILISATEUR

TOLÉRANCE À L’ERREUR

Lorsque l’interface permet d’obtenir le résultat prévu avec

une action corrective

minimale, malgré des erreurs de

saisie Image from: http://en.3cbang.com/view/19925.

TOLÉRANCE À L’ERREUR

APTITUDE À L’INDIVIDUALISATION

Lorsque les utilisateurs

peuvent modifier l’interface pour

l’adapter à leurs capacités et à leurs besoins

APTITUDE À L’INDIVIDUALISATION

hvincent2000.wordpress.com, uxmyths.com

QUELQUES MYTHES UX

MYTHE : LES UTILISATEURS VEULENT PLUS DE FONCTIONS

mcgovern

MYTHE : VOUS ÊTES COMME VOS UTILISATEURS

Flickr

Source : sandrinedet.wordpress.com

MYTHE : SI VOUS ÊTES UN EXPERT, PAS BESOIN DE TESTER

nielsen

MYTHE : IL FAUT FORCÉMENT BEAUCOUP D’UTILISATEURS POUR TESTER

8 RÈGLES D’OR DE L’UX

concevez pour vos utilisateurs, avant tout

impliquez vos utilisateurs, ils vous le rendront bien

enlevez tout ce que vous pouvez, mais pas plus

chaque détail compte, vraiment

ne réinventez pas la roue, utilisez les patterns

testez méthodologiquement avec de vrais utilisateurs

restez détachés de « votre » design

défendez des choix éthiques, « bons » pour les utilisateurs

ONE THING WELL

ONE THING WELL

ONE THING WELL

MES 8 RÈGLES D’OR DE L’UX

concevez pour vos utilisateurs, pas pour vos clients

impliquez vos utilisateurs, ils vous le rendront bien

enlevez tout ce que vous pouvez, mais pas plus

chaque détail compte, vraiment

ne réinventez pas la roue, utilisez les patterns

testez méthodologiquement avec de vrais utilisateurs

restez détachés de « votre » design

défendez des choix éthiques, « bons » pour les utilisateurs

L’optimisation de la conversion

-  Tester des CHANGEMENTS SIMPLES, mais avec un impact potentiel grand -  Tester chaque changement SUFFISAMMENT LONGTEMPS pour que ce soit

significatif, en intégrant au moins un cycle business complet -  Tester CONTINUELLEMENT pour optimiser sans cesse son service Web

Identifier des opportunités d’optimisation -- avec le modèle LIFT

WiderFunnel

1.  Proposition de Valeur : Pas clair ce qu’on va trouver sur ce Shop : « Pourquoi acheter là et pas ailleurs ? »

2.  Clarté : Le moteur de recherche est trop petit, on ne le voit pas : « Comment trouver un produit ? »

3.  Clarté : Les menus sont peu visibles, et noyés dans les autres infos : « Qu’est-ce qu’il y a dans le Shop ? »

4.  Distraction / Clarté / Urgence : La très grande galerie attire toute l’attention sur des « exclusivité » que l’on peut juste « découvrir » : « Pourquoi me propose-t-on cela ? », « Est-ce que l’offre va durer longtemps ? »

5.  Pertinence : Titre = « Nos magasins » induit en erreur, en fait il s’agit des promotions dans les magasins, et non la liste des magasins

6.  Anxiété : Les éléments qui rassurent « sûr et pratique » sont peu visibles, car noyés dans la masse d’images peu structurée et dans la couleur de fond de page

Which Test Won ?

A B

+ ? %

3 SUISSES

A B

+ ? %

ETAM

A B

+ 50 %

GOOGLE

SUZUKI

A B

+ ? %

A B

+ 46 %

THE GUARDIAN

A B

+ 12 %

USTREAM

A B

+ 23.3%

1-800-DENTIST

A

OXFAM (MOBILE)

A B

+ ? %

EXTRASPACE STORAGE (MOBILE)

A B

+ ? %

-  UI « qui marche » = bonne pour les utilisateurs ET pour le business

-  Améliorer l’Expérience Utilisateur = ROI ++ dans votre projet

-  Faire de l’UX sans voir les utilisateurs, c’est pas faire de l’UX

-  Observer ce que les utilisateurs font, pas demander ce qu’ils pensent

-  Nous ne sommes pas rationnels dans nos décisions, mais influençables

-  Il faut influencer les utilisateurs dans le bon sens (« good UI »)

-  Pour optimiser il faut diminuer les frictions, et persuader

julien.roland@uservalue.ch

USERVALUE