Téléchargé 65 fois
Téléchargé parChristophe Clouzeau
UX & Accessibilité : les clés pour réussir
Le document présente l'importance de l'expérience utilisateur (UX) et de l'accessibilité numérique en tant qu'outils complémentaires pour optimiser l'interaction avec les utilisateurs sur le web. Il aborde des concepts clés tels que l'ergonomie, la conception centrée utilisateur et les meilleures pratiques pour rendre les interfaces plus accessibles et utilisables. Enfin, il souligne l'impact positif d'une approche axée sur l'utilisateur sur la performance commerciale et l'engagement des internautes.
UX & Accessibilité : les clés pour réussir
- 1. 1 Linagora AgenceNeoma Tenir comptede tous ses utilisateurs pour optimiser son business M atinée pour com prendre UX & Accessibilité Les clés pour réussir 28 avril 2016
- 2. 2 Experte en solutions OpenSource Stratégie, UX et Design
- 3.
- 4. 4 UX et Accessibilité complémentaires: Usages VS. Accès communs : Orientés utilisateurs © Oscar Keys
- 5. 5 1/ L’UX 2/ L’accessibiliténumérique 3/ UX = utilisateurs (comme l’accessibilité) 4/ Règles UX et Accessibilité Cas pratiques TEST
- 6. 6 Qu’est-ce que l’UX? user experience
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20. 20 Affordance : Capacité d’unobjet ou d’une caractéristique à suggérer son utilisation
- 21. 21 Ergonomie (grec) Ergon : travail Nomos: lois, règles
- 22. 22 Définition de l’ergonomie: « étude scientifique de la relation entre l’homme et ses moyens, ses méthodes et ses milieux de travail. »
- 23. 23 UX : « UsereXperience »
- 24. 24 Interfaces : organisation visuelle cohérence compréhension perceptibilité typographie miseen page interactivité utilisabilité hiérarchie éditoriale
- 25. 25 Objectif : S’adresser aucerveau fainéant (car il l’est déjà) -> l’instinct machinal des internautes (et leurs attentes + usages) EST la base de la réflexion
- 26.
- 27.
- 28. 28 Accessibilité Accès à : •Unbus •Un musée •Un parc •Un bureau de Poste
- 29.
- 30. 30 Accessibilité numérique Permettre àtoute personne, qu’elle que soit sa déficience, d’accéder au contenu et au service proposé. Cible : 15% des internautes dans le monde
- 31. 31 Accessibilité numérique 1999 -Monde W3C émet les recommandations d’accessibilité web (WCAG) Loi 11 février 2005 en France « Pour l'égalité des droits et des chances, la participation et la citoyenneté des personnes handicapées » 2009 – France (décret) Application obligatoire du RGAA pour les sites web publics (Référentiel Général d’Accessibilité pour les Administrations) Aujourd’hui : RGAA v3.0
- 32.
- 33. 33 Accessibilité numérique ->pour tous Nous avons tous besoin d’accessibilité : • en tant que personnes valides : pour travailler dans un train, en extérieur durant une journée ensoleillée, etc. ; • en situation temporaire d’invalidité (bras cassé, etc.) ; • en situation de handicap. Pour les moteurs de recherche aussi.
- 34.
- 35.
- 36. 36 Visuel Auditif Moteur Cognitif Processus COGNITIFS psychologie/capacitésdans les domaines : • perceptifs • sensori-moteur • du raisonnement • de la mémoire • du langage • de l’espace Accessibilité numérique
- 37.
- 38. 38 Maintenabilité Coût Interopérabilité Plutôtque d’adapter des services et des interfaces aux handicaps, on préfère la notion de conception universelle. Accessibilité numérique
- 39. 39 UX, RWD etaccessibilité numérique RGAA 2 et 3 - Zoom 200%
- 40. 40 UX = Connaîtreses utilisateurs Focus cible
- 41. 41 Placer l’humain • Considérerl’homme dans le rapport homme-machine -> lorsque cela ne fonctionne pas du côté des utilisateurs, c’est parce qu’il y a un écart important entre la vision du concepteur et celle de l’utilisateur final • Conception centrée utilisateur UX-design, UX-conception, UX-ergonomie -> se mettre constamment dans la peau de votre internaute
- 42.
- 43. 43 UI design Fonction « çamarche »
- 44. 44 Usability design Action « çamarche mieux »
- 45. 45 Émotion « ça marchemieux et ça me fait dire Wahou ! » UX design
- 46. 46 Utilisabilité • Un projetinteractif réussi est un projet : – utile – utilisable – utilisé Répondre à un besoin : l’internaute vient pour une raison ou pour quelque chose Faciliter la satisfaction du besoin : l’internaute reste et trouve ce qu’il veut le plus aisément que possible Prolonger la satisfaction du besoin : l’internaute revient car il trouve son bonheur
- 47. 47 Exemple : LeaderVs. Challenger Comment CapitainTrain triple ses ventes chaque année ? En misant sur l’expérience client. http://lareclame.fr/124974-parole-annonceur-capitaine-train-florent-darrault
- 48. 48 Les théories Les théoriesde Gestalt La loi de Fitts La loi de Hick Le nombre de Miller - la loi de proximité (macro/micro) - la loi de similarité (taille, forme, couleurs) - Une cible est d’autant plus facile et rapide à atteindre qu’elle est proche et grande - mémoire de travail : Au-delà de 7 éléments, dans notre tête cela s’embrouille (+/- 2) - Le temps nécessaire pour se décider croit proportionnellement au nombre et à la complexité des options proposées.
- 49. 49 Gestalt : loide proximité
- 50. 50 Gestalt : loide proximité
- 51. 51 Gestalt : loide proximité
- 52. 52 Gestalt : loide proximité
- 53. 53 Gestalt : loide proximité
- 54. 54 Gestalt : loide proximité
- 55. 55 Gestalt : loide similarité (taille)
- 56. 56 Gestalt : loide similarité (forme)
- 57. 57 Gestalt : loide similarité (couleur)
- 58. 58 Gestalt : loide similarité - menu Chacun des éléments suggère la même fonction d’achat : - la typographie, - la couleur, - le design de même nature
- 59. 59 Gestalt : loide similarité - architecture
- 60. 60 Gestalt : loide similarité - produits
- 61. 61 Gestalt : loide similarité - gabarit
- 62. 62 Gestalt : loide continuité Principe addictif : la suite d’éléments affichés nous invite à continuer le déroulement des prochaines images. BONUS
- 63. 63 Fitts : ciblefacile Grossissez vos éléments cliquables.
- 64. 64 Fitts : cible facile Check-box, Sous-menus: l’icone & l’intitulé sont cliquables
- 65. 65 Fitts : ciblefacile Les éléments cliquables doivent être « proches »
- 66.
- 67. 67 Hick : temps dedécision 3 choix exceptionnels ! Sinon, 3 autres à découvrir.
- 68.
- 69. 69 Le concept d’affordance •Capacité d’un objet ou d’une caractéristique à suggérer son utilisation • Sur les écrans, l’apparence d’un objet suggère immédiatement ses possibilités d’action – Forme – Couleur – Libellé – Localisation dans l’interface – Adjonction d’éléments indices – Comportement : NON
- 70. 70 Vous pouvez interagiravec moi Bouton - affordance VALIDERVALIDER
- 71. 71 VALIDERVALIDER Bouton – affordance- accessibilité Vous pouvez interagir avec moi
- 72. 72 RechercherMots-clef Moteur de recherche Vouspouvez interagir avec moi
- 73. 73 Menu déroulant Windows Seven WindowsOffice Vous pouvez interagir avec moi
- 74. 74 Nom de lapersonne Cette personne est l’auteur d’un ouvrage mondialement connu que vous devez absolument avoir parmi vos livres de chevet. Elle… En savoir + Zone cliquable Vous pouvez interagir avec moi
- 75. 75 Vous pouvez interagiravec moi L’information ne doit jamais être véhiculée par la couleur seule.
- 76. 76 Vous pouvez interagiravec moi
- 77. 77 40 % desinternautes ne vont pas plus loin qu’une première page web Que faire pour qu’ils restent ? Analytics SEO, 2010 © Jared Erondu
- 78. 78 Avoir un bututile Concevoir tout ça Facile à utiliser Envie de l’utiliser (émotion) Pour tous Confiance contenu/service Aisément trouvable © Peter Morville’s User eXperience Honneycomb usable useful findable desirable accessible valuable credible
- 79. 79 Règles UX etAccessibilité de base mais qui marchent
- 80. 80 Les internautes scrollent! • 91% des internautes scrollent (scoop 1) • Parfois jusqu’en bas des pages ! (scoop 2) Étude ClickTale, 2006
- 81. 81 -> Définir lazone chaude, le fold : zone supérieure d’affichage visible selon une résolution donnée ex. 1024x768 -> barre à 570 pixels -> Prévoir une hauteur maximale de page à raison de 3 scrolls Les internautes scrollent !
- 82.
- 83. 83 Nous sommes optimistes! BOUTON Test du centrage optique Zone cliquable
- 84. 84 Maintenant, choisissez cetteoption hyper importante : Choix 1 Choix 2 Choix 3 Choix 4 Associez ! -> Liste à puces linéaires loi de Gestalt
- 85. 85 Grossissez ! -> Agrandirles zones de lien ET les zones cliquables VALIDER VALIDER loi de Fitts
- 86. 86 Golden Ratio TypographyCalculator http://www.pearsonified.com/typography/
- 87. 87 Grossissez le contenu! Passez vos textes courant à 16px Interlignage : 21px CSS en EM et %
- 88. 88 Action = réaction •L’interface doit répondre à chaque action de l’utilisateur – ex. du « panier » en e-commerce
- 89. 89 Feedback et dialogue •L’interface doit expliquer clairement ce qui est attendu de l’utilisateur – ex. des messages d’alertes • Donner de l’information ponctuellement au bon moment
- 90. 90 L’internaute arrive avecses acquis (...) Convention Lorsque 50 à 79% des sites utilisent le même principe (après : standard) – Convention de localisation des éléments – Convention de vocabulaire – Convention de présentation – Convention d’interaction
- 91. 91 (...) et ilpeut apprendre • Capitaliser sur l’apprentissage de l’internaute • L’accompagner dans sa prise en main
- 92. 92 Gérez les erreurs •L’utilisateur se trompe TOUJOURS – Prévoir qu’il se trompe, annule, retourne en arrière, revient
- 93. 93 Gérez les attentes surmobile, nous passons 1/3 du temps à patienter
- 94. 94 Gérez les animations aideà patienter
- 95. 95 Aux bons mots,le succès • Le vocabulaire doit être compréhensible – Les bons libellés – Orientés utilisateurs Effectuer une requête Trier par Éditer Rechercher Afficher par Modifier
- 96. 96 Ayez un boncaractère • Polices sans-serif de préférence dans le texte courant Lisibilité Dyslexie
- 97. 97 Ayez un boncaractère Un texte écrit en minuscules, ferré à gauche et bien interligné est plus lisible qu’en majuscules, mais il est toujours possible d’écrire les libellés de bouton en majuscules si on les souhaite impactants. UN TEXTE ECRIT EN MINUSCULES, FERRE A GAUCHE ET BIEN INTERLIGNE EST PLUS LISIBLE QU’EN MAJUSCULES, MAIS IL EST TOUJOURS POSSIBLE D’ECRIRE LES LIBELLES DE BOUTON EN MAJUSCULES SI ON LES SOUHAITE IMPACTANTS. Lisibilité Dyslexie
- 98. 98 Jouez des Contrastes lisibilitéet vitesse de perception
- 99.
- 100.
- 101.
- 102. 102 Liens • Les liensdoivent être explicites. • Les libellés sont compréhensibles hors du contexte de la page web.
- 103. 103 Images et Liens <ahref="" title="Cliquer pour réserver"> Je réserve</a> <img href="" alt="Logo Air France">
- 104. 104 Formulaires : utilisezles labels • Un élément de formulaire doit toujours comporter un label (étiquette) <label for="login">Identifiant</label> <input id="login" name="login" type="text" value=""> L’attribut for du label pointe vers l’attribut id du champ texte. Si vous ne pouvez pas mettre de label, les WCAG permettent l’usage de l’attribut title sur l’élément de formulaire concerné. Identifiant <input type="text" name="login" title="Votre identifiant">
- 105. 105 Formulaires HTML5 <input> disposede nouveaux types qui précisent la donnée qui sera stockée dans la variable. • nombre entier (type="number"), • email (type="email"), • URL (type="url"), • date (type="date"), • mois (type="month"), • semaine (type="week"), • date/heure (type="datetime"), • heure (type="time"), • plage de valeurs (type="range"), • téléphone (type="tel"), • couleur (type="color")
- 106. 106 Formulaires • Pensez auxchamps requis <form id="demo"> <label for="user">Identifiant</label> Username:<input id="user" type="text" name="username" required> <input type="submit"> </form>
- 107. 107 Formulaires : améliorez Nom* Prénom * Sujet Date de réservation * Commentaire * Tous les champs sont obligatoires VALIDERANNULER À VOUS
- 108. 108 / / Formulaires Nom * Prénom* Sujet Date de réservation * Commentaire NOM JJ Tous les champs avec * sont obligatoires VALIDERX Annuler MM AAAA Super ! Sujet Format JJ/MM/AAAA Les balises HTML ne sont pas autorisées.
- 109. 109 Navigation Véritables repères d’orientation •Menu toujours présent, à la même place • Fil d’ariane • Code couleur + pictos • Intitulés uniques • Accès rapides : ex. par typologie utilisateurs • Liens d’évitement : ex. http://www.gouvernement.fr/
- 110.
- 111. 111 a:focus { outline:-webkit-focus-ring-colorauto 5px; outline-offset:-2px; } Ex : http://www.w3schools.com/cssref/sel_focus.asp
- 112.
- 113. 113 Plus c’est grand,plus c’est 16/9e
- 114. 114 Plus c’est grand,plus c’est 16/9e
- 115. 115 Faîtes des testsutilisateurs Focus Group Test utilisateurs – Méthode collective – Approche marketing – Intérêt pour les avis subjectifs des internautes, leurs opinions – Méthode individuelle – Approche UX/ergo – Observation des comportements réels de navigation pour recueillir des données objectives VS. « Pas besoin de test utilisateurs, nous avons déjà fait plein de réunions ! » X
- 116. 116 Écouter la cible,ses envies +200% de conversion 7 vs 21 clics +150% de compréhension 10 vs 25 perception message
- 117. 117 UX et accessibilitésont des outils pour vendre mieux
- 118.
- 119.
- 120. 120 Améliorons * ? Sélection corbeille? Proportions À VOUS
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135. 135 Ergonomie web. Pourdes sites web efficaces, Amélie Boucher, Editions Eyrolles, Collection Accès libre, 356 pages, 2011 The Design of Everyday Things, Donald A. Norman, 257 pages, Basic Books, 2002 Consultable en ligne : http://www.trilemon.com/wp-content/uploads/2012/04/The-Design-of-Everyday-Things-Revised-and- Expanded-Edition.pdf + 2 conférences : https://www.youtube.com/watch?v=l9qrlan611I http://www.ted.com/talks/don_norman_on_design_and_emotion Design d'expérience utilisateur. Principes et méthodes UX, Sylvie Daumal, Editions Eyrolles, Collection Design web, 208 pages, 2012 Les blogs et sites à connaître : http://blocnotes.iergo.fr/ https://uxmag.com/ http://uxmind.eu/ Références et bibliographie UX
- 136. 136 OPQUAST – Lesbonnes pratiques par et pour les pros du Web http://opquast.com/fr/ Opquast est un écosystème qui regroupe des bonnes pratiques, des outils et des professionnel pour améliorer la qualité des sites web et l'expérience RGAA - Référentiel général d'accessibilité pour les administrations http://references.modernisation.gouv. fr/introduction-au-rgaa-0 Le référentiel général d'accessibilité pour les administrations (RGAA) offre une traduction opérationnelle des critères d’accessibilité issus des règles internationales ainsi qu'une méthodologie pour vérifier la conformité ces critères. Références en accessibilité
- 137. 137 Merci de votreattention Des questions ? @ Linagora @ AgenceNeoma
- 138. 138 Témoignage Jean-Philippe Simmonet 28avril 2016 UX & Accessibilité Les clés pour réussir
- 139.
- 140.
- 141.
- 142. 142 Merci de votreattention Des questions ? @ Linagora @ AgenceNeoma