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

1. UX : User Experience
Quelques règles d’ergonomie...
mercredi 3 septembre 14

2. mercredi 3 septembre 14

3. Introduction et
généralités d’usage
mercredi 3 septembre 14

4. mercredi 3 septembre 14

5. Différents objets que l’on peut améliorer
d’un point de vue ergonomique
mercredi 3 septembre 14

6. Un site web
ergonomique est un
site utile et utilisable
mercredi 3 septembre 14

7. mercredi 3 septembre 14

8. Règle n°1
mercredi 3 septembre 14

9. Se méfier des règles !
mercredi 3 septembre 14

10. La règle des 3 clics ?
mercredi 3 septembre 14

11. On oublie...
mercredi 3 septembre 14

12. On retient :
mercredi 3 septembre 14

13. À chaque clic, je
progresse...
mercredi 3 septembre 14

14. On soigne :
mercredi 3 septembre 14

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. Exemple
mercredi 3 septembre 14

17. 7 clics pour une
information
mercredi 3 septembre 14

18. La loi de MILLER
mercredi 3 septembre 14

19. Kézako?
mercredi 3 septembre 14

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. «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. 5 entrées par site au
minimum + 2 au
maximum
mercredi 3 septembre 14

23. Règle n°2
mercredi 3 septembre 14

24. Les internautes ne sont
pas...
mercredi 3 septembre 14

25. mercredi 3 septembre 14

26. Des débiles...
mercredi 3 septembre 14

27. IL ne faut ni...
mercredi 3 septembre 14

28. Le sous-estimer
ni
Le sur-estimer
mercredi 3 septembre 14

29. Les personas
mercredi 3 septembre 14

30. Une personne donnée,
dans un contexte précis
mercredi 3 septembre 14

31. mercredi 3 septembre 14

32. Règle n°3
mercredi 3 septembre 14

33. La lecture en F, Z ou E ?
mercredi 3 septembre 14

34. C’est l’apparence du
site qui influe sur le
parcours visuel de
l’internaute
mercredi 3 septembre 14

35. Règle n°4
mercredi 3 septembre 14

36. Les internautes ne
scrollent pas
mercredi 3 septembre 14

37. FAUX
mercredi 3 septembre 14

38. On pratique
le cut-off design
mercredi 3 septembre 14

39. On organise sa page
mercredi 3 septembre 14

40. La théorie de la Gestalt
mercredi 3 septembre 14

41. WTF ?
mercredi 3 septembre 14

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. ‣ Notre cerveau regroupe les choses qui sont
proches physiquement.
proximité visuelle = proximité conceptuelle
mercredi 3 septembre 14

44. Il faut donc...
mercredi 3 septembre 14

45. ‣ Rapprocher les objets qui entretiennent un
rapport fonctionnel
‣ Eloigner ceux qui n’ont rien en commun
mercredi 3 septembre 14

46. mercredi 3 septembre 14

47. 1.Bien organiser la page
web
mercredi 3 septembre 14

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. Bien organiser la page web
Les 3 résolutions majoritaires
mercredi 3 septembre 14

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. Espace écran exploitable
mercredi 3 septembre 14

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. Mais aussi dans le
détail...
mercredi 3 septembre 14

54. mercredi 3 septembre 14

55. C’est la loi de
proximité
mercredi 3 septembre 14

56. Mais aussi...
mercredi 3 septembre 14

57. La loi de FITTS
mercredi 3 septembre 14

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. Les éléments cliquables
doivent être gros
mercredi 3 septembre 14

60. Augmentez la surface
des éléments cliquables
mercredi 3 septembre 14

61. Découvrez et appliquez
le concept d’affordance
mercredi 3 septembre 14

62. Les affordances sont les
possibilités d’actions
suggérées par les
caractéristiques d’un
objet
mercredi 3 septembre 14

63. mercredi 3 septembre 14

64. Optimiser l’affordance :
Vous pouvez me cliquer
mercredi 3 septembre 14

65. Optimiser l’affordance :
Vous pouvez interagir
avec moi
mercredi 3 septembre 14

66. Attention aux fausses
affordances
mercredi 3 septembre 14

67. mercredi 3 septembre 14

68. 2. Des textes lisibles et
clairs
mercredi 3 septembre 14

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. 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. ☞ 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. ☞ 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. 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. 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. ☞ 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. 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. 2. Liens hypertextes :
les clés d’une navigation
réussie
mercredi 3 septembre 14

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. 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. 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. 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. 3.Des formulaires
simples et efficaces
mercredi 3 septembre 14

83. Des éléments de formulaire adaptés à la
tâche
mercredi 3 septembre 14

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. 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. 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. 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. 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. Faciliter la tâche de renseignement
‣ Faire ressortir la ou les actions principales
du formulaire
mercredi 3 septembre 14

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. 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. 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. 4.Organiser ses listes et
ses tableaux
mercredi 3 septembre 14

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. Organiser ses listes et ses tableaux
mercredi 3 septembre 14

96. 5.Bannières publicitaires :
oui, mais...
mercredi 3 septembre 14

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. 6. Des messages
d’information pour
accompagner votre
internaute
mercredi 3 septembre 14

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. 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. 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. 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. Pour conclure
mercredi 3 septembre 14

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. Pour vérifier...
Les tests
utilisateurs
mercredi 3 septembre 14