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

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

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

Introduction Usability & User Experience dans le cadre du cours de Visualisation de l'information à 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) VI
  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. 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
  19. SEE WHERE PEOPLE LOOK ON YOUR WEBSITE -  For a

    specific task -  With other data -  Is convincing USERVALUE
  20. Eye Tracker WHAT DO USERS LOOK AT AND FOR HOW

    LONG ?
  21. Eye Tracker WHAT DO THEY EXPLORE FIRST ?

  22. Source : « Eye Tracking the User Experience », Flickr

    Site, Version A Site, Version B FIND THE LIST OF UPCOMING CONFERENCES ?
  23. Source : « Eye Tracking the User Experience », Flickr

    FIND THE BEST OIL FOR YOUR ENGINE ?
  24. TEST UTILISATEUR, AVEC EYE TRACKING USERVALUE

  25. Flickr -  Meet real users -  Test and observe their

    behaviour -  Don’t just listen to what they say
  26. 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
  27. TRI DE CARTES USERVALUE

  28. ACTIVITÉ : RÉALISER UN TRI DE CARTES Lien vers le

    Card Sorting (site Web He-Arc)
  29. TRI DE CARTES USERVALUE

  30. 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
  31. WIREFRAME : AVEC BALSAMIQ LOGO

  32. WIREFRAME : AVEC BALSAMIQ

  33. UI DESIGN PATTERNS 1 2 3 4 5 6 8

  34. 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
  35. ADAPTATION À LA TÂCHE

  36. 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
  37. CARACTÈRE AUTODESCRIPTIF

  38. CARACTÈRE AUTODESCRIPTIF

  39. 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
  40. CONFORMITÉ AUX ATTENTES DES UTILISATEURS

  41. CONFORMITÉ AUX ATTENTES DES UTILISATEURS

  42. FACILITÉ D’APPRENTISSAGE Lorsque l’interface soutient et guide l'utilisateur dans l'apprentissage

    de l'utilisation du système
  43. FACILITÉ D’APPRENTISSAGE http://voyant-tools.org/ http://portal.textometrie.org/demo/

  44. CONTRÔLE UTILISATEUR Lorsque l'utilisateur peut contrôler l'interaction jusqu'à atteindre son

    but
  45. CONTRÔLE UTILISATEUR

  46. CONTRÔLE UTILISATEUR

  47. 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.
  48. TOLÉRANCE À L’ERREUR

  49. TOLÉRANCE À L’ERREUR

  50. APTITUDE À L’INDIVIDUALISATION Lorsque les utilisateurs peuvent modifier l’interface pour

    l’adapter à leurs capacités et à leurs besoins
  51. APTITUDE À L’INDIVIDUALISATION

  52. hvincent2000.wordpress.com, uxmyths.com QUELQUES MYTHES UX

  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. 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
  57. ONE THING WELL

  58. LA PSYCHOLOGIE NUMÉRIQUE (et l’économie comportementale)

  59. UNE APPROCHE EN 2 TEMPS

  60. Système 1 Système 2 ü  Lent et fainéant ü  Rationnel

    et Logique ü  Conscient ü  Raisons & Règles ü  Demande de l’attention ü  Exige de l’effort ü  Contrôlé ü  Rapide et toujours en marche ü  Emotionnel ü  Subconscient ü  Intuitif et Associatif ü  Grande capacité ü  Peu d’efforts ü  Automatique Créé des BIAIS, parce que « rapide » BIAIS influencent les « décisions rationnelles » D. Kahneman, « Thinking Fast & Slow » « L’homme n’est pas un être rationnel, mais un être rationnalisant »
  61. ≠ rationnels, biais : trop de choix tue le choix

  62. D. Ariely 68% 32% 16% 84% AVANT APRÈS ≠ rationnels,

    biais : l’impact d’un leurre
  63. None
  64. il faut aider l’utilisateur pour qu’il fasse des choix «

    bons pour lui » -  irrationalité, biais -  abondance de choix -  philosophie : paternalisme libertaire -  principe : « nudge »
  65. R. Thaler l’architecture de choix

  66. l’architecture de choix

  67. la « bonne » interface utilisateur Ne pas utiliser des

    techniques que l’on ne peut pas expliquer et justifier auprès des utilisateurs - J. Rawls (1971)
  68. None
  69. www.goodui.org Les techniques pour « convaincre » l’utilisateur Psychologie Digitale

  70. montrer que d’autres (comme vous) le font - social proof

  71. None
  72. P. Turnley/CORBIS rendre les choses difficiles à obtenir - scarcity

  73. recherche Hôtel / booking.com

  74. A. Tormey donner quelque chose d’abord - reciprocity

  75. None
  76. ezlawpllc.com montrer la valeur - gradual engagement

  77. Page d’Accueil / Jobup.ch

  78. dixiesunnews.com faites leur faire quelque chose, vite reporter l’inscription au

    plus tard - foot-in-the door
  79. page d’accueil / doodle.com

  80. faites leur compléter, organiser - set completion / organization

  81. None
  82. None
  83. aider l’utilisateur à choisir - recommending

  84. Et bien d’autres techniques pour fabriquer une UI « QUI

    MARCHE ». www.goodui.org
  85. None
  86. -  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
  87. julien.roland@uservalue.ch USERVALUE