Intro Usability & User Experience, He-Arc (08122017)

Intervention dans le cadre du cours de Visualisation de l'Information, donné à la Haute-École Arc (Neuchâtel) le 8 Décembre 2017

Transcript

1. ERGONOMIE / EXPÉRIENCE UTILISATEUR Introduction, HE-Arc Julien Roland, 8 Décembre 2017, Neuchâtel
2. -  Easy to use -  Efficient -  Safe -  Attractive -  Productive -  Convincing UX, Usability, Ergonomics … ? “User Interfaces that work for Users – and for Businesses” Credit Photo: AP
3. POURQUOI AMÉLIORER L’EXPÉRIENCE UTILISATEUR ?
4. http://wallpaperus.org/laptops-angry-1366x906-wallpaper-836413/
5. 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%
6. DE L’UX SANS UTILISATEURS ?
7. NON ! (ou presque …)
9. 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 LA CONCEPTION CENTRÉE UTILISATEUR
10. www.userexperience.co.nz Mais il n’est pas toujours évident de rencontrer les utilisateurs …
11. 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
12. source : (D. Szuc, 2014)
13. TEST UTILISATEUR D’UTILISABILITÉ, EN LAB
15. Discover usability problems Assess the « quality » of one or more interfaces (incl. measures) Formative Tests Summative Tests Vs. ?
16. WHEN TO DO USER TESTS ? Define what to improve Test iteratively Compare 2 designs Assess the quality of UX Old design New design
17. WHEN TO DO USER TESTS ? BCV Starbucks WEB GRAND PUBLIC WEB GRAND PUBLIC MACHINE GRAND PUBLIC MOBILE GRAND PUBLIC WEB ENTREPRISE TV WHAT TO IMPOVE ? TEST ITERATIVELY ASSESS THE UX
18. PRÉPARER UN TEST UTILISATEUR ?
19. q  Qu’est-ce qui pose problème ? q  Quels sont les utilisateurs cibles concernés ? q  Recruter les utilisateurs cibles pour le test q  Spécifier les tâches que l’on veut tester à travers des scénarios q  Spécifier les données que l’on veut recueillir q  Préparer le guide d’entretien q  Valider le guide d’entretien avec le client q  Faire 1 ou +sieurs tests d’essai q  Préparer le setup technique
20. LES TÂCHES « 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 ? »
21. 1 2 3 4 5 6
25. 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 UV
26. MESURER L’EXPÉRIENCE UTILISATEUR
27. MESURER L’EXPÉRIENCE UTILISATEUR ?
28. LA PERFORMANCE DES TÂCHES
29. LA « SINGLE EASE QUESTION » (OU SEQ)
30. LE « SYSTEM USABILITY SCALE » (OU SUS)
31. L’ATTRAKDIFF (LITE)
32. Tests Utilisateurs ≠ Focus Groups A. Colville, « Cheval et Train » WHY YOU NEED TO TEST, NOT JUST ASK WHAT THEY WANT
33. WHY YOU NEED TO OBSERVE, NOT JUST ASK WHAT THEY THINK « Strangers to ourselves » book cover, Th. Wilson
34. LES DIFFÉRENCES PAR RAPPORT À UN FOCUS GROUP ?
35. FOCUS GROUP VS. TEST UTILISATEUR : TROUVER LES DIFFÉRENCES !
36. LE TEST UTILISATEUR, UN OUTIL DE CHANGEMENT ?
37. Les messages clés … -  il n’y a pas d’UX sans utilisateurs : testez … et testez encore -  tester n’est pas forcément « lourd », mais il faut de la méthode -  tester ≠ demander aux utilisateurs ce qu’ils pensent ! -  on peut mesurer l’UX … et vous devriez le faire -  les tests utilisateurs sont (avant tout) un outil de changement
38. 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 décembre, le 6 décembre et le 11 décembre. 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 décembre, 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/ « Le jour d’après, vous souhaitez savoir laquelle des dates semble être préférée par vos amis. Comment feriez-vous ? » 6 / « On imagine enfin, que vous décidez finalement d'appeler vos amis au lieu d'utilisez Doodle, et vous ne voulez plus utiliser le sondage : Comment feriez-vous ? Comment pensez-vous que vos amis vont être informés ? » ACT
39. 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
40. source : (D. Szuc, 2014)
41. americanhistory.si.edu
43. ORGANISER LES INFORMATIONS POUR LES UTILISATEURS ?
45. RÉALISER UN TRI DE CARTES Lien vers le Card Sorting (site Web He-Arc) ACT
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. source : support.balsamiq.com/tutorials/specifyinginteraction/
48. FAIRE DES WIREFRAMES ?
49. Les messages clés … -  ≠ techniques selon les besoins et les préférences -  peu importe les techniques et outils, ce sont que des moyens -  ce qui compte (avant tout) ce sont les conversations autour -  pour ça il faut pouvoir : partager, comprendre, et mettre à jour -  et cela ne sert à rien de peaufiner vos wireframes !
50. 1 2 3 4 5 6 8
52. DES MYTHES DE L’EXPÉRIENCE UTILISATEUR ?
53. nielsen MYTHE : LES UTILISATEURS LISENT SUR LE WEB
54. chartbeat MYTHE : LES GENS NE SCROLLENT PAS
55. MYTHE : LES UTILISATEURS VEULENT PLUS DE FONCTIONS mcgovern
56. MYTHE : LES UTILISATEURS VEULENT PLUS DE FONCTIONS
57. ZOOM : « ONE THING WELL »
58. MYTHE : VOUS ÊTES COMME VOS UTILISATEURS Flickr
59. sandrinedet.wordpress.com MYTHE : POUR UN EXPERT, PAS BESOIN DE TESTER
60. nielsen, 2000 / sauro, 2010 MYTHE : IL FAUT TESTER AVEC BEAUCOUP D’UTILISATEURS
61. MYTHE : IL FAUT 1 « BON DESIGN » POUR QUE ÇA MARCHE •  148 millions de bookmarks •  50 milliards de pages vues / mois •  sur invitation seulement, $15
62. ZOOM : LE « BRUTALISME »
63. gerrymcgovern.com/new-thinking/speed-best-measure-customer-experience MYTHE : L’UX N’A RIEN À VOIR AVEC LA PERFORMANCE Walmart.com, +1s faster à +2% conversion Firefox, -2.2s page load à +10M download Financial Times, +1s delay à -4.9% articles read GQ, 7s to 1.5s page load à 6M to 11M visitors / month Google, -400ms delay à -8M searches / day Amazon, -1s page load à -$1.6B / year Etsy, +160Kb à +12% bounce rate, mobile New York Times, 3s page load à large number abandon site
64. PERFORMANCE WEB, POURQUOI ?
65. kenyon, 2011 / https://moz.com/blog/site-speed-are-you-fast-does-it-matter •  sur 100 sites web en 2011 •  peu changé depuis (sans doute plus lent)
66. webbloatscore.com/
67. mobiforge.com/research-analysis/understanding-web-page-weight
68. mobiforge.com/research-analysis/the-web-is-doom •  sites du TOP10 sont + légers que les autres •  Sites du TOP10 s’amaigrissent, au contraire des autres
69. https://twitter.com/lukew/status/928642523467255808
70. poids de la page ? … > 1Mb
71. ceglowski, 2015 / idlewords.com/talks/website_obesity.htm
72. DES RÈGLES D’ACCESSIBILITÉ WEB ?
73. -  Les images ont-elles une alternative textuelle ? -  Les liens sont-ils explicites ? -  Est-il possible de naviguer avec la tabulation de manière cohérente ? -  Le contraste entre la couleur du texte et celle du fond est-elle suffisamment élevée ? -  L’information n’est-elle pas donnée que par la couleur ? -  …
74. https://www.w3.org/Translations/WCAG20-fr https://www.w3.org/TR/mobile-accessibility- mapping/ (Mobile) http://www.accessiweb.org/index.php/ accessiweb_2.2_liste_deployee.html
75. 10 M d’utilisateurs avec un handicap au UK http://www.craigabbott.co.uk/accessibility-is-not-an-edge-case
76. Les messages clés … -  vérifier que vos Applis sont accessibles, trop ne le sont pas ! -  rendre vos Applis accessibles les rendent meilleures pour tous -  rendre vos Applis accessibles contribue à en améliorer le code -  rencontrer des utilisateurs avec un handicap pour comprendre
77. Les messages clés … -  une UI doit « marcher » pour les utilisateurs et pour le business -  améliorer l’UX, ç’est rentable -  faire de l’UX, c’est rencontrer les utilisateurs -  observer ce que les utilisateurs font, ne pas demander ce qu’ils en pensent -  aller sur le terrain pour comprendre le contexte avant -  en faire moins, c’est plus difficile, mais c’est souvent mieux -  n’oubliez pas la performance de vos Apps ! -  rendre un produit ou service accessible, c’est le rendre meilleur pour tous
78. julien.roland@uservalue.ch