ergonomie & expérience utilisateur (ux) | cours introduction (mobile)
TRANSCRIPT
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 %
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
USERVALUE