Ergonomie & UX

1,488 views
1,287 views

Published on

Eléments d'introduction à l'ergonomie d'un site web à partir du livre Ergonomie Web d'Amélie Boucher

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,488
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
57
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Ergonomie & UX

  1. 1. UX : User Experience Quelques règles d’ergonomie... mercredi 3 septembre 14
  2. 2. mercredi 3 septembre 14
  3. 3. Introduction et généralités d’usage mercredi 3 septembre 14
  4. 4. mercredi 3 septembre 14
  5. 5. Différents objets que l’on peut améliorer d’un point de vue ergonomique mercredi 3 septembre 14
  6. 6. Un site web ergonomique est un site utile et utilisable mercredi 3 septembre 14
  7. 7. mercredi 3 septembre 14
  8. 8. Règle n°1 mercredi 3 septembre 14
  9. 9. Se méfier des règles ! mercredi 3 septembre 14
  10. 10. La règle des 3 clics ? mercredi 3 septembre 14
  11. 11. On oublie... mercredi 3 septembre 14
  12. 12. On retient : mercredi 3 septembre 14
  13. 13. À chaque clic, je progresse... mercredi 3 septembre 14
  14. 14. On soigne : mercredi 3 septembre 14
  15. 15. ‣ Le chemin parcouru : fil d’Ariane ou breadcrumb ‣ On met en valeur la localisation de l’internaute : où il se trouve dans le site ‣ On lui indique le chemin à parcourir mercredi 3 septembre 14
  16. 16. Exemple mercredi 3 septembre 14
  17. 17. 7 clics pour une information mercredi 3 septembre 14
  18. 18. La loi de MILLER mercredi 3 septembre 14
  19. 19. Kézako? mercredi 3 septembre 14
  20. 20. Le nombre magique sept, plus ou moins deux : quelques limites à nos capacités de traitement de l'information (Miller, 1956) Wikipedia mercredi 3 septembre 14
  21. 21. «Des recherches récentes démontrent que la loi du nombre magique sept est fondée sur une interprétation erronée de l'article de Miller. Le nombre correct de nouveaux éléments pouvant tenir dans la mémoire courante est probablement de trois ou quatre» Wikipédia mercredi 3 septembre 14
  22. 22. 5 entrées par site au minimum + 2 au maximum mercredi 3 septembre 14
  23. 23. Règle n°2 mercredi 3 septembre 14
  24. 24. Les internautes ne sont pas... mercredi 3 septembre 14
  25. 25. mercredi 3 septembre 14
  26. 26. Des débiles... mercredi 3 septembre 14
  27. 27. IL ne faut ni... mercredi 3 septembre 14
  28. 28. Le sous-estimer ni Le sur-estimer mercredi 3 septembre 14
  29. 29. Les personas mercredi 3 septembre 14
  30. 30. Une personne donnée, dans un contexte précis mercredi 3 septembre 14
  31. 31. mercredi 3 septembre 14
  32. 32. Règle n°3 mercredi 3 septembre 14
  33. 33. La lecture en F, Z ou E ? mercredi 3 septembre 14
  34. 34. C’est l’apparence du site qui influe sur le parcours visuel de l’internaute mercredi 3 septembre 14
  35. 35. Règle n°4 mercredi 3 septembre 14
  36. 36. Les internautes ne scrollent pas mercredi 3 septembre 14
  37. 37. FAUX mercredi 3 septembre 14
  38. 38. On pratique le cut-off design mercredi 3 septembre 14
  39. 39. On organise sa page mercredi 3 septembre 14
  40. 40. La théorie de la Gestalt mercredi 3 septembre 14
  41. 41. WTF ? mercredi 3 septembre 14
  42. 42. Postulat ‣ 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 mercredi 3 septembre 14
  43. 43. ‣ Notre cerveau regroupe les choses qui sont proches physiquement. proximité visuelle = proximité conceptuelle mercredi 3 septembre 14
  44. 44. Il faut donc... mercredi 3 septembre 14
  45. 45. ‣ Rapprocher les objets qui entretiennent un rapport fonctionnel ‣ Eloigner ceux qui n’ont rien en commun mercredi 3 septembre 14
  46. 46. mercredi 3 septembre 14
  47. 47. 1.Bien organiser la page web mercredi 3 septembre 14
  48. 48. Bien organiser la page web #1 ‣ 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 mercredi 3 septembre 14
  49. 49. Bien organiser la page web Les 3 résolutions majoritaires mercredi 3 septembre 14
  50. 50. Bien organiser la page web #2 ‣ Eviter au maximum le scroll horizontal ‣ Le scroll vertical ne doit pas altérer la visibilité des éléments critiques qu’il faut placer au dessus du seuil de scroll mercredi 3 septembre 14
  51. 51. Espace écran exploitable mercredi 3 septembre 14
  52. 52. Bien organiser la page web #2 ‣ Eviter tout «scroll stopper» ‣ Eviter un design entièrement elastique : Etirer seulement les colonnes de contenu ‣ Aérer la page par des blancs ‣ Bien différencier les types d’espaces de la page mercredi 3 septembre 14
  53. 53. Mais aussi dans le détail... mercredi 3 septembre 14
  54. 54. mercredi 3 septembre 14
  55. 55. C’est la loi de proximité mercredi 3 septembre 14
  56. 56. Mais aussi... mercredi 3 septembre 14
  57. 57. La loi de FITTS mercredi 3 septembre 14
  58. 58. «Le temps qu’on met pour atteindre une cible est proportionnel à la distance à laquelle elle se trouve mais aussi à sa taille .» mercredi 3 septembre 14
  59. 59. Les éléments cliquables doivent être gros mercredi 3 septembre 14
  60. 60. Augmentez la surface des éléments cliquables mercredi 3 septembre 14
  61. 61. Découvrez et appliquez le concept d’affordance mercredi 3 septembre 14
  62. 62. Les affordances sont les possibilités d’actions suggérées par les caractéristiques d’un objet mercredi 3 septembre 14
  63. 63. mercredi 3 septembre 14
  64. 64. Optimiser l’affordance : Vous pouvez me cliquer mercredi 3 septembre 14
  65. 65. Optimiser l’affordance : Vous pouvez interagir avec moi mercredi 3 septembre 14
  66. 66. Attention aux fausses affordances mercredi 3 septembre 14
  67. 67. mercredi 3 septembre 14
  68. 68. 2. Des textes lisibles et clairs mercredi 3 septembre 14
  69. 69. Des textes lisibles et clairs ‣ Présenter les textes pour faciliter la lecture à l’écran : ☞ Préférer le HTML aux images pour du texte ou des informations importantes ☞ Limiter l’usage d’image de fond pour le texte mercredi 3 septembre 14
  70. 70. 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 ☞ Des contrastes positifs : foncé sur clair ☞Des niveaux de luminosité et de contrastes suffisants : outil mercredi 3 septembre 14
  71. 71. ☞ Limiter le nombre de couleurs différentes ☞ Préferer les casses mixtes ☞ Utiliser les majuscules uniquement pour attirer l’attention ☞ Limiter l’utilisation des majuscules aux phrases très courtes mercredi 3 septembre 14
  72. 72. ☞ Augmenter l’espace par défaut entre les caractères des titres en majuscules ☞ Eviter 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 mercredi 3 septembre 14
  73. 73. Des textes lisibles et clairs ‣ Gestion des blocs et lignes de texte : ☞ Police sans-serif ☞ Eviter de justifier ☞ Alignement à gauche ☞ Un nombre de caractères agréable : 60-100 ☞ L’interlignage devrait être d’environ 150% du corps du texte mercredi 3 septembre 14
  74. 74. Des textes lisibles et clairs ‣ Ecrire pour le Web : ☞ Ecrire pour être scanné ☞ Utiliser un langage familier ☞ Faire un effort de concision ☞ Une idée par paragraphe ☞ Faire des phrases courtes mercredi 3 septembre 14
  75. 75. ☞ Faites ressortir les mots clés avec le bold sans en abuser ☞ Rythmez les longs paragraphes ☞ Pensez liste à puces ☞ Fournir un format imprimable pour le long mercredi 3 septembre 14
  76. 76. Des textes lisibles et clairs ‣ Titres et libellés : aller à l’essentiel ☞ 1 concept = 1 mot ☞ Créer une hiérarchie de taille de titres Typo : Un titre trop gros sera moins lu qu’un titre moyen ☞ Limiter la longueur des titres et libellés ☞ Commencer par les mots-clés ☞ Donne aux pages des titres explicites ☞ Être le plus précis possible dans la rédaction. mercredi 3 septembre 14
  77. 77. 2. Liens hypertextes : les clés d’une navigation réussie mercredi 3 septembre 14
  78. 78. 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. mercredi 3 septembre 14
  79. 79. Liens hypertextes : les clés d’une navigation réussie ‣ Eviter d’avoir trop de formats de liens différents ‣ Adapter le niveau de lisibilté de vos liens à leur importance ‣ Prévoir un format spécifique du lien au survol de la souris ‣ Prévoir un format spécial pour les liens déjà visités mercredi 3 septembre 14
  80. 80. Liens hypertextes : les clés d’une navigation réussie ‣ Lors de sa rédaction, penser à 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 ‣ Eviter qu’un lien passe sur deux lignes mercredi 3 septembre 14
  81. 81. Liens hypertextes : les clés d’une navigation réussie ‣ Différencier les liens externes des liens internes ‣ Signaler les liens pointant vers autre chose qu’une page HTML mercredi 3 septembre 14
  82. 82. 3.Des formulaires simples et efficaces mercredi 3 septembre 14
  83. 83. Des éléments de formulaire adaptés à la tâche mercredi 3 septembre 14
  84. 84. Faciliter la prise en main du formulaire ‣ Adapter la visibilité des zones de saisie à leur importance ‣ Pour donner plus de visibilté à un champ de saisie, il faut le mettre en blanc sur un fond gris ou de couleur ‣ Eviter de remplir tous les champs avec des données pré-remplies mercredi 3 septembre 14
  85. 85. Faciliter la prise en main du formulaire ‣ Indiquer dès le départ que certains champs sont obligatoires ‣ Accompagner chaque champ obligatoire d’un élément graphique ou typographique spécifique et facilement repérable ‣ Supprimer les « : » en fin de libellé ‣ En cas de nombreux champs, former des groupes mercredi 3 septembre 14
  86. 86. Faciliter 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 mercredi 3 septembre 14
  87. 87. Faciliter la tâche de renseignement ‣ Ne demander que les données strictement nécessaires ‣ Permettre le passage de champ à champ grâce à la touche TAB ‣ Ordonner les champs selon une logique attendue ‣ Fournir des aides et des légendes mercredi 3 septembre 14
  88. 88. Faciliter la tâche de renseignement ‣ Si le nombre de caractères acceptés est limité, en informer l’internaute ‣ Le bouton d’action principal doit être visible : fort visuellement et près du formulaire ‣ Eviter de proposer des fonctions d’annulation mercredi 3 septembre 14
  89. 89. Faciliter la tâche de renseignement ‣ Faire ressortir la ou les actions principales du formulaire mercredi 3 septembre 14
  90. 90. Aider l’internaute à éviter et à corriger ses erreurs ‣ Indiquer le format de renseignement attendu à l’extérieur du champ ‣ Réserver le renseignement par défaut à des données peu critiques ‣ Certaines données peuvent être validées à la volée ‣ Traiter l’ensemble des erreurs en une seule fois mercredi 3 septembre 14
  91. 91. Aider l’internaute à éviter et à corriger ses erreurs ‣ Ne pas effacer les informations erronnées ‣ Ne pas effacer les entrées valides ‣ Soigner les messages d’erreur : - placer un message juste au dessus du formulaire ☞ il doit attirer l’attention - Eviter d’afficher le message dans une fenêtre Java-Script mercredi 3 septembre 14
  92. 92. Aider l’internaute à éviter et à corriger ses erreurs ‣ Fournir un message spécifique contextuel ‣ Mettre en valeur visuellement un champ mal renseigné ‣ Le message doit expliquer l’erreur et donner une piste de résolution mercredi 3 septembre 14
  93. 93. 4.Organiser ses listes et ses tableaux mercredi 3 septembre 14
  94. 94. Organiser ses listes et ses tableaux ‣ N’afficher que des colonnes contenant les informations nécessaires ‣ Prévoir des filets séparateurs entre chaque ligne ‣ Indiquer le critère de classement par défaut mercredi 3 septembre 14
  95. 95. Organiser ses listes et ses tableaux mercredi 3 septembre 14
  96. 96. 5.Bannières publicitaires : oui, mais... mercredi 3 septembre 14
  97. 97. Bannières publicitaires : oui, mais... ‣ Bien distinguer les zones de publicité du contenu réel ‣ Limiter la longueur des animations : 15’ ‣ Eviter le déclenchement automatique du son ‣ Fournir un moyen de fermer la bannière ou d’accéder directement au site mercredi 3 septembre 14
  98. 98. 6. Des messages d’information pour accompagner votre internaute mercredi 3 septembre 14
  99. 99. Des messages d’information pour accompagner votre internaute ‣ S’assurer de la bonne visibilité d’un message : ☞ Utiliser des couleurs qui rompent avec celles de la page ☞ Accompagner le message d’icônes ☞ Jouer sur la taille ☞Animer le message pour lui donner une apparence temporaire mercredi 3 septembre 14
  100. 100. Des messages d’information pour accompagner votre internaute ☞ Présenter le message sous forme d’une fenêtre de type panneau flottant / Opacifier la page du site située en dessous. ‣ Eviter les messages importants sous forme de pop-up ‣ Eviter les simples informations sous forme de fenêtre d’alerte Javascript mercredi 3 septembre 14
  101. 101. Des messages d’information pour accompagner votre internaute ‣ Faire confirmer à l’internaute toute demande d’action destructrice ‣ Ne pas présenter trop d’informations en survol ‣ Disséminer l’aide générale de manière contextuelle ‣ Fournir des informations sur le temps et la progression de chargement mercredi 3 septembre 14
  102. 102. Des messages d’information pour accompagner votre internaute ‣ Personnaliser sa page 404 : ☞ Eviter tout discours technique ☞ Fournir des possibilités de navigation ‣ A retenir : Ecrire en rouge c’est alerter d’un danger ou d’une erreur mercredi 3 septembre 14
  103. 103. Pour conclure mercredi 3 septembre 14
  104. 104. 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’accessibilité ‣ L’internaute doit trouver ce qu’il cherche librement et facilement mercredi 3 septembre 14
  105. 105. Pour vérifier... Les tests utilisateurs mercredi 3 septembre 14

×