Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

UX design for web

88 views

Published on

Cours pour la conception d'une interface ergonomique centrée sur l'utilisateur

Published in: Design
  • Be the first to comment

  • Be the first to like this

UX design for web

  1. 1. Lien
  2. 2. Concevoir des interfaces agréables, accessibles et adaptées. Quelques règles d’ergonomie appliquées au Web Virginie COLOMBEL- Ecriture pour les médias numériques_MMI_2020
  3. 3. Introduction et généralités d’usage
  4. 4. La souris dans tous ses états : vers plus d’ergonomie
  5. 5. Un site web ergonomique est un site utile et utilisable
  6. 6. Pour réaliser un site ou une application utile ET utilisable, il faudra respecter quelques règles simples.
  7. 7. 1. L’arborescence
  8. 8. Définition : L’arborescence, ou plan de site, se présente généralement sous la forme d’un schéma qui organise les pages du site en rubriques et définit les différents niveaux de navigation.
  9. 9. Soigner son arborescence pour optimiser le référencement naturel du site.
  10. 10. Réaliser l’arborescence de son site web en 5 étapes.
  11. 11. 1. Lister tous les contenus du site 2. Analyser l’arborescence de vos concurrents 3. Organiser & hiérarchiser le contenu 4. Formaliser l’arborescence sur papier ou à l’aide d’un logiciel de maquettage 5. Scénariser, penser SEO et recommencer !
  12. 12. 2. La navigation
  13. 13. A. Il faut guider le visiteur
  14. 14. « À chaque clic, je progresse… »
  15. 15. On soigne donc :
  16. 16. Le fil d’Ariane
  17. 17. ‣ C’est le chemin parcouru ou breadcrumb en anglais ‣ Il met en valeur la localisation de l’internaute : où il se trouve dans le site ‣ Il lui indique le chemin à parcourir ‣ Mais Le fil d’ariane n’empiète pas sur la navigation principale
  18. 18. Bon ou pas bon ?
  19. 19. Bon ou pas bon ?
  20. 20. Bon ou pas ?
  21. 21. B.Aller à l’essentiel
  22. 22. Pour tester les sites on fait des scénarii utilisateur.
  23. 23. Test / TP#01 1. La requête : Paul, 18 ans, doit se rendre à Bordeaux dimanche 22 septembre. 2. Il n’a pas beaucoup de moyens et veut que ça lui coûte le moins cher possible. 3. D’habitude, c’est sa mère qui s’occupe de gérer ses déplacements mais là elle n’a pas le temps. 4. Indiquez quels sites Paul va visiter et pour chaque site en combien de temps ou de clics il obtient une réponse satisfaisante à sa requête.
  24. 24. On retient
  25. 25. De manière générale..
  26. 26. 7 clics maximum pour 1 information
  27. 27. 4 entrées par site en général + 2 au maximum* * Sauf exceptions exceptionnelles
  28. 28. Bon ou pas bon ?
  29. 29. L’overlay indispensable en cas de grandes quantités de contenus
  30. 30. La barre de recherche
  31. 31. Le menu hamburger
  32. 32. Le menu 100% mobile friendly
  33. 33. 3.Les utilisateurs
  34. 34. Les internautes ne sont pas...
  35. 35. Des débiles...
  36. 36. IL ne faut ni...
  37. 37. Le sous-estimer ni Le sur-estimer
  38. 38. Pour bien cibler son visiteur, on crée des personas
  39. 39. Qu’est ce que c’est ?
  40. 40. Définition : Un persona est un personnage imaginaire , un internaute idéal. Le persona est généralement doté d'un prénom et de caractéristiques sociales et psychologiques.
  41. 41. Exemple
  42. 42. Un outil ?
  43. 43. Créez le persona du coeur de cible d’un de ces sites TP#01 1
  44. 44. TP#01
  45. 45. 4. L’organisation du contenu
  46. 46. A. La lecture en F, Z ou E ?
  47. 47. La lecture en F, Z ou E ?
  48. 48. C’est l’apparence du site qui influe sur le parcours visuel de l’internaute.
  49. 49. Les internautes ne scrollent pas
  50. 50. B.Inciter l’internaute à scroller
  51. 51. On pratique le cut-off design
  52. 52. 1366px 768 px
  53. 53. 5.la théorie de la Gestalt
  54. 54. WTF ?
  55. 55. Qu’est ce qui se passe ?
  56. 56. ‣Notre cerveau analyse le monde environnant comme un ensemble de formes ‣ Le TOUT est plus que la simple somme de ses parties : la conjonction de plusieurs formes peut faire émerger de nouvelles caractéristiques, une nouvelle image.
  57. 57. ‣ Notre cerveau regroupe les choses qui sont proches physiquement. proximité visuelle = proximité conceptuelle
  58. 58. A.C’est la loi de proximité
  59. 59. Dans une page Web, il faut donc...
  60. 60. ‣ Rapprocher les objets qui entretiennent un rapport fonctionnel ‣ Eloigner ceux qui n’ont rien en commun
  61. 61. Bien.
  62. 62. Pas bien.
  63. 63. B. L’émergence
  64. 64. L’émergence : Pour identifier un objet, on compare ses formes à celles qui nous sont familières. C’est notre cerveau qui fait ça sans nous demander notre avis.
  65. 65. C. La réification
  66. 66. Réification : Le cerveau peut reconnaître une forme même si des é l é m e n t s s o n t manquants
  67. 67. D. La multistabilité
  68. 68. Si un objet a plus de deux interprétations, on en identifiera une à la fois mais jamais les deux en en même temps.
  69. 69. E. La similitude
  70. 70. Pour résumer
  71. 71. 7 points à ne pas négliger pour la conception d’une interface.
  72. 72. 1.L’organisation de la page
  73. 73. ‣ Supprimer tout ce qui est inutile ‣ Limiter le poids des pages ‣ Créer une hiérarchie de lecture claire ‣ Prévoir quelques gabarits de pages et s’y tenir ‣ Penser à l’espace d’écran réellement disponible Bien organiser la page web #1
  74. 74. Les résolutions cibles Source : designersinteractifs.org_2017
  75. 75. Bien organiser la page web #2 ‣ Eviter au maximum le scroll horizontal pour une page web ‣ Le scroll vertical ne doit pas altérer la visibilité des éléments critiques qu’il faut placer au dessus du seuil de scroll
  76. 76. Espace d’écran exploitable
  77. 77. Bien organiser la page web #2 ‣ Eviter tout «scroll stopper» ‣ Eviter un design entièrement élastique : Etirer seulement les colonnes de contenu ‣ Aérer la page par des blancs ‣ Bien différencier les types d’espaces de la page
  78. 78. Inspiration
  79. 79. 2.L’affordance.
  80. 80. Ce qui veut dire ?
  81. 81. Les affordances sont les possibilités d’actions suggérées par les caractéristiques d’un objet
  82. 82. Et donc ? Quel rapport avec le web ?
  83. 83. Optimisez l’affordance : « Vous pouvez me cliquer »
  84. 84. Les éléments « cliquables » doivent être gros
  85. 85. Augmentez la surface des éléments « cliquables »
  86. 86. Optimisez l’affordance : Vous pouvez interagir avec moi
  87. 87. Attention aux fausses affordances !
  88. 88. 3. Des textes lisibles et clairs
  89. 89. Des textes lisibles et clairs ‣ Présentez les textes pour faciliter la lecture à l’écran : ☞ Préférez le HTML aux images pour du texte ou des informations importantes ☞ Limitez l’usage d’image de fond pour le texte
  90. 90. Des textes lisibles et clairs ‣ Typographie et couleurs ☞ Une taille de police jamais en dessous d’un Arial 10 ou d’un Verdana 9 pour le corps de page ☞ On préfère les contrastes positifs : foncé sur clair ☞ Des niveaux de luminosité et de contrastes suffisants et qui respectent les normes W3C. Utilisez cet outil
  91. 91. ☞ Limitez le nombre de couleurs différentes ☞ Préférez les casses mixtes ☞ Utilisez les majuscules uniquement pour attirer l’attention ☞ Limitez l’utilisation des majuscules aux phrases très courtes
  92. 92. ☞ Augmentez l’espace par défaut entre les caractères des titres en majuscules ☞ Evitez l’italique ☞ Un texte non cliquable ne doit pas avoir l’air cliquable ☞ Le format souligné est INTERDIT pour mettre une idée en relief et même pour les titres
  93. 93. ‣ Gestion des blocs et lignes de texte : ☞ Police sans-serif de préférence ☞ Evitez de justifier ☞ Alignement à gauche ☞ Un nombre de caractères agréable : 60-100 ☞ L’interlignage devrait être d’environ 150% du corps du texte Des textes lisibles et clairs
  94. 94. 4. Des liens hypertextes
  95. 95. Des liens visibles et utilisés à bon escient ‣ Un format réservé ‣ Un format les différenciant clairement du texte non cliquable ‣ Un format qui les fasse ressortir de la page Remarque : Le format bleu souligné n’est pas obligatoire mais le changement de couleur et le souligné sont de bons indices.
  96. 96. Liens hypertextes : les clés d’une navigation réussie ‣ Evitez d’avoir trop de formats de liens différents ‣ Adaptez le niveau de lisibilité de vos liens à leur importance ‣ Prévoyez un format spécifique du lien au survol de la souris ‣ Prévoyez un format spécial pour les liens déjà visités
  97. 97. Liens hypertextes : les clés d’une navigation réussie ‣ Lors de sa rédaction, pensez à la taille du lien ‣ Lorsque le lien est composé d’un pictogramme ou d’une icône et d’un libellé, la zone cliquable doit englober tous les éléments ‣ Evitez qu’un lien passe sur deux lignes
  98. 98. Liens hypertextes : les clés d’une navigation réussie ‣ Différenciez les liens externes des liens internes ‣ Signalez les liens pointant vers autre chose qu’une page HTML
  99. 99. 5.Des formulaires simples et efficaces
  100. 100. Des éléments de formulaire adaptés à la tâche
  101. 101. Facilitez la prise en main du formulaire ‣ Adaptez la visibilité des zones de saisie à leur importance ‣ Pour donner plus de visibilité à un champ de saisie, il faut le mettre en blanc sur un fond gris ou de couleur ‣ Evitez de remplir tous les champs avec des données pré-remplies
  102. 102. Faciliter la prise en main du formulaire ‣ Indiquez dès le départ que certains champs sont obligatoires ‣ Accompagnez chaque champ obligatoire d’un élément graphique ou typographique spécifique et facilement repérable ‣ Supprimez les « : » en fin de libellé ‣ En cas de nombreux champs, formez des groupes
  103. 103. Facilitez la prise en main du formulaire ‣ Aligner les libellés à gauche si le nombre de caractères séparant le libellé le plus long du plus court ne dépasse pas 6 à 8 caractères. ‣ La distance entre le libellé et le champ ne doit pas être trop importante
  104. 104. Facilitez la tâche de renseignement ‣ Ne demandez que les données strictement nécessaires ‣ Permettez le passage de champ à champ grâce à la touche TAB ‣ Ordonnez les champs selon une logique attendue ‣ Fournissez des aides et des légendes
  105. 105. Facilitez la tâche de renseignement ‣ Si le nombre de caractères acceptés est limité, informez l’internaute ‣ Le bouton d’action principal doit être visible : fort visuellement et près du formulaire ‣ Evitez de proposer des fonctions d’annulation
  106. 106. Faciliter la tâche de renseignement ‣ Faire ressortir la ou les actions principales du formulaire
  107. 107. Aidez l’internaute à éviter et à corriger ses erreurs_1 ‣ Indiquez le format de renseignements attendu à l’extérieur du champ ‣ Réservez le renseignement par défaut à des données peu critiques ‣ Traitez l’ensemble des erreurs en une seule fois
  108. 108. Aidez l’internaute à éviter et à corriger ses erreurs_2 ‣ Ne pas effacez les informations erronées ‣ Ne pas effacez les entrées valides ‣ Soignez les messages d’erreur : -placez un message juste au dessus du formulaire ☞ il doit attirer l’attention
  109. 109. Aidez l’internaute à éviter et à corriger ses erreurs_3 ‣ Fournissez un message spécifique contextuel ‣ Mettez en valeur visuellement un champ mal renseigné ‣ Le message doit expliquer l’erreur et donner une piste de résolution
  110. 110. 6.Des listes et des tableaux organisés
  111. 111. Organiser ses listes et ses tableaux ‣ N’affichez que des colonnes contenant les informations nécessaires ‣ Prévoyez des filets séparateurs entre chaque ligne ‣ Indiquez le critère de classement par défaut
  112. 112. Organiser ses listes et ses tableaux
  113. 113. 7.Accompagnement du visiteur
  114. 114. Des messages d’information pour accompagner votre visiteur ‣ S’assurer de la bonne visibilité d’un message : ☞ Utilisez des couleurs qui rompent avec celles de la page ☞ Accompagnez le message d’icônes ☞ Jouez sur la taille ☞Animez le message pour lui donner une apparence temporaire
  115. 115. Des messages d’information pour accompagner votre visiteur ‣ Présentez le message sous forme d’une fenêtre de type panneau flottant / Opacifier la page du site située en dessous. ‣ Evitez les messages importants sous forme de pop-up
  116. 116. Des messages d’information pour accompagner votre visiteur ‣ Faites confirmer à l’internaute toute demande d’action destructrice ‣ Ne présentez pas trop d’informations en survol ‣ Disséminez l’aide générale de manière contextuelle
  117. 117. Des messages d’information pour accompagner votre visiteur ‣ Personnalisez votre page 404 : ☞ Evitez tout discours technique ☞ Fournissez des possibilités de navigation ‣ A retenir : Ecrire en rouge c’est alerter d’un danger ou d’une erreur
  118. 118. Pour conclure
  119. 119. Un site ergonomique ‣ Est correctement architecturé ‣ Les pages sont aérées, bien rangées et leur composition réfléchie ‣ Tout est mis en place pour faciliter l’accès à l’information et la lisibilité* est optimisée. ‣ L’internaute doit trouver ce qu’il cherche librement et facilement * On pensera bien entendu aux mal voyants
  120. 120. Sources UX Design & ergonomie des interfaces, Nogier & Leclerc, Dunod https://www.lafabriquedunet.fr/conseils/conception-site-web/ arborescence-site-web/ Ergonomie Web & UX design, Pour une conception centrée utilisateur, Amélie Boucher, Eyrolles Méthodes de design UX, 30 méthodes fondamentales pour concevoir des expériences optimales, Lallemenand & Gronier, Eyrolles https://uxdesign.cc/ux-psychology-go-hand-in-hand-how-gestalt- theory-appears-in-ux-design-18b727343da8 https://medium.muz.li/gestalt-principles-in-ui- design-6b75a41e9965

×