Save 37% off PRO during our Black Friday Sale! »

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

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

Ca5c9eb394cb9d1be30288327b94c4c5?s=128

Julien ROLAND

April 29, 2016
Tweet

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

  74. None
  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 + ? %

  88. None
  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