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

1. Lien

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

4. Introduction et
généralités d’usage

6. La souris dans tous ses états : vers plus d’ergonomie

7. Un site web
ergonomique est un site
utile et utilisable

9. Pour réaliser un site ou
une application utile
ET utilisable, il faudra
respecter quelques
règles simples.

10. 1. L’arborescence

11. 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.

13. Soigner son
arborescence pour
optimiser le
référencement naturel
du site.

15. Réaliser
l’arborescence de
son site web en 5
étapes.

16. 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 !

20. 2. La navigation

21. A. Il faut guider le
visiteur

22. « À chaque clic, je
progresse… »

23. On soigne donc :

24. Le fil d’Ariane

25. ‣ 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

26. Bon ou pas bon ?

27. Bon ou pas bon ?

28. Bon ou pas ?

29. B.Aller à l’essentiel

30. Pour tester les sites on fait des
scénarii utilisateur.

31. 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.

32. On retient

33. De manière générale..

34. 7 clics maximum pour
1 information

35. 4 entrées par site en
général + 2 au
maximum*
* Sauf exceptions exceptionnelles

36. Bon ou pas bon ?

37. L’overlay indispensable en cas de grandes quantités de contenus

38. La barre de recherche

39. Le menu hamburger

40. Le menu 100% mobile friendly

41. 3.Les utilisateurs

42. Les internautes ne sont
pas...

43. Des débiles...

44. IL ne faut ni...

45. Le sous-estimer
ni
Le sur-estimer

46. Pour bien cibler son
visiteur, on crée des
personas

47. Qu’est ce que c’est ?

48. 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.

49. Exemple

52. Un outil ?

53. Créez le persona du coeur de cible d’un de ces sites TP#01
1

54. TP#01

55. 4. L’organisation
du contenu

56. A. La lecture en F, Z ou
E ?

57. La lecture en F, Z ou E ?

58. C’est l’apparence du
site qui influe sur le
parcours visuel de
l’internaute.

59. Les internautes ne
scrollent pas

60. B.Inciter l’internaute
à scroller

61. On pratique
le cut-off design

62. 1366px
768 px

64. 5.la théorie de la
Gestalt

65. WTF ?

71. Qu’est ce qui se passe ?

72. ‣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.

73. ‣ Notre cerveau regroupe les choses qui sont
proches physiquement.
proximité visuelle = proximité conceptuelle

74. A.C’est la loi de
proximité

75. Dans une page Web, il
faut donc...

76. ‣ Rapprocher les objets qui entretiennent
un rapport fonctionnel
‣ Eloigner ceux qui n’ont rien en commun

77. Bien.

78. Pas bien.

79. B. L’émergence

82. 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.

84. C. La réification

89. Réification : Le cerveau
peut reconnaître une
forme même si des
é l é m e n t s s o n t
manquants

92. D. La multistabilité

95. Si un objet a plus de deux
interprétations, on en identifiera
une à la fois mais jamais les
deux en en même temps.

97. E. La similitude

99. Pour résumer

101. 7 points à ne pas
négliger pour la
conception d’une
interface.

102. 1.L’organisation de la
page

103. ‣ 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

104. Les résolutions cibles
Source : designersinteractifs.org_2017

105. 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

106. Espace d’écran exploitable

107. 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

108. Inspiration

109. 2.L’affordance.

110. Ce qui veut dire ?

111. Les affordances sont les
possibilités d’actions suggérées
par les caractéristiques d’un
objet

113. Et donc ? Quel rapport
avec le web ?

114. Optimisez l’affordance :
« Vous pouvez me cliquer »

115. Les éléments
« cliquables » doivent
être gros

116. Augmentez la surface des
éléments « cliquables »

117. Optimisez l’affordance :
Vous pouvez interagir
avec moi

119. Attention aux fausses
affordances !

121. 3. Des textes lisibles et
clairs

122. 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

123. 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

128. ☞ 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

131. ☞ 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

132. ‣ 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

134. 4. Des liens hypertextes

135. 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.

136. 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

137. 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

138. 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

139. 5.Des formulaires
simples et efficaces

141. Des éléments de formulaire adaptés à la
tâche

142. 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

143. 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

144. 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

145. 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

146. 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

147. Faciliter la tâche de renseignement
‣ Faire ressortir la ou les actions principales
du formulaire

148. 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

149. 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

150. 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

151. 6.Des listes et des
tableaux organisés

152. 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

153. Organiser ses listes et ses tableaux

154. 7.Accompagnement du
visiteur

155. 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

156. 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

157. 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

158. 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

165. Pour conclure

166. 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

167. 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