Intro Usability & User Experience (Mobile), HE-Arc (290416)

Intro Usability & User Experience dans le cadre du cours d'Interfaces Mobiles donné à la Haute-École Arc à Neuchâtel le 29 avril 2016

Transcript

1. USERVALUE utilisabilité + expérience utilisateur, He-Arc le 29 avril 2016 (Julien Roland) UI Mobiles
2. Julien Dorit USERVALUE
3. 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
4. -  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 ?
5. 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/
6. L’expérience utilisateur - En quelques chiffres Source : Flickr UX 101, Nielsen Norman Group 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%
7. Une vraie prise de conscience de l’importance de l’expérience utilisateur
8. Sources : www.userexperience.co.nz … même s’il n’est pas toujours simple de convaincre les clients de « faire de l’UX »
9. RECONTRER DE VRAIS UTILISATEURS USERVALUE
10. 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
11. 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
12. 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
13. TEST UTILISATEUR, DANS NOTRE LAB USERVALUE
14. TEST UTILISATEUR, DEPUIS LA SALLE D’OBSERVATION USERVALUE
15. TEST UTILISATEUR, SUR UNE TABLETTE USERVALUE
16. Discover usability problems Assess the « quality » of one or more interfaces (incl. measures) Formative Tests Summative Tests Vs. ?
17. WHEN TO DO USER TESTS ? Define what to improve Test iteratively Compare 2 designs Assess the quality of UX Old design New design
18. 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
19. 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 ? »
20. DES EXEMPLES DE SCÉNARIOS ? 1 2 3 4 5 6
21. LE GUIDE D’ENTRETIEN : BRIEFING / PRÉ-TEST
22. LE GUIDE D’ENTRETIEN : TÂCHES
23. LE GUIDE D’ENTRETIEN : POST-TEST
24. 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
25. TEST UTILISATEUR À DISTANCE, NON MODÉRÉ https://www.loop11.com/account/
26. MESURER L’EXPÉRIENCE UTILISATEUR
27. LES ÉVALUATIONS POST-TÂCHES 6 10 2 3 4 9 11 12 5 1 7 8 S N/A F S F N/A S F N/A N/A F N/A S S S S S S S S S S S S F F F F F F F F F S S S S F S S S F S S F S S S F F F F F F F S S S F S S S S S S S S S S S S S N/A N/A N/A N/A N/A N/A N/A N/A N/A S N/A N/A F F F F F F F S S S S S N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A S S S S S S S S S S S S N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A N/A F F S F F F S S S S S F F S S S S F F F S F S S F S S S S S S S N/A S S S S F F F F S S F F S S S F 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É
28. LES QUESTIONNAIRES POST-TEST : LE SUS
29. 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)
30. LES QUESTIONNAIRES POST-TEST : L’ATTRAKDIFF
31. LES QUESTIONNAIRES POST-TEST : L’UX SCORE
32. DÉSIRABILITÉ
33. Flickr -  Meet real users -  Test and observe their behaviour -  Don’t just listen to what they say
34. Tests Utilisateurs ≠ Focus Groups A. Colville, « Cheval et Train » WHY YOU NEED TO TEST, NOT JUST ASK WHAT THEY WANT
35. WHY YOU NEED TO OBSERVE, NOT JUST ASK WHAT THEY THINK « Strangers to ourselves » book cover, Th. Wilson
36. FOCUS GROUP VS. TEST UTILISATEUR : TROUVER LES DIFFÉRENCES !
37. -  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
38. -  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 ?
39. 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
40. 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 ? »
41. 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
42. UNDERSTAND WHAT’S REAL americanhistory.si.edu -  Real processes -  Hard to verbalize -  Rich picture
43. ETHNOGRAPHIES : OBSERVER ET COMPRENDRE USERVALUE
44. TRI DE CARTES USERVALUE
45. TRI DE CARTES USERVALUE
46. 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
47. WIREFRAME : AVEC BALSAMIQ
48. UI DESIGN PATTERNS 1 2 3 4 5 6 8
49. 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
50. ADAPTATION À LA TÂCHE
51. 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
52. CARACTÈRE AUTODESCRIPTIF
53. 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
54. CONFORMITÉ AUX ATTENTES DES UTILISATEURS
55. FACILITÉ D’APPRENTISSAGE Lorsque l’interface soutient et guide l'utilisateur dans l'apprentissage de l'utilisation du système
56. FACILITÉ D’APPRENTISSAGE
57. CONTRÔLE UTILISATEUR Lorsque l'utilisateur peut contrôler l'interaction jusqu'à atteindre son but
58. CONTRÔLE UTILISATEUR
59. 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.
60. TOLÉRANCE À L’ERREUR
61. APTITUDE À L’INDIVIDUALISATION Lorsque les utilisateurs peuvent modifier l’interface pour l’adapter à leurs capacités et à leurs besoins
62. APTITUDE À L’INDIVIDUALISATION
63. hvincent2000.wordpress.com, uxmyths.com QUELQUES MYTHES UX
64. MYTHE : LES UTILISATEURS VEULENT PLUS DE FONCTIONS mcgovern
65. MYTHE : VOUS ÊTES COMME VOS UTILISATEURS Flickr
66. Source : sandrinedet.wordpress.com MYTHE : SI VOUS ÊTES UN EXPERT, PAS BESOIN DE TESTER
67. nielsen MYTHE : IL FAUT FORCÉMENT BEAUCOUP D’UTILISATEURS POUR TESTER
68. 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
69. ONE THING WELL
70. ONE THING WELL
71. ONE THING WELL
72. 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
73. L’optimisation de la conversion
75. -  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
76. Identifier des opportunités d’optimisation -- avec le modèle LIFT WiderFunnel
77. 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
78. Which Test Won ?
79. A B + ? % 3 SUISSES
80. A B + ? % ETAM
81. A B + 50 % GOOGLE
82. SUZUKI A B + ? %
83. A B + 46 % THE GUARDIAN
84. A B + 12 % USTREAM
85. A B + 23.3% 1-800-DENTIST A
86. OXFAM (MOBILE) A B + ? %
87. EXTRASPACE STORAGE (MOBILE) A B + ? %
89. -  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
90. julien.roland@uservalue.ch USERVALUE