2. Ergonomie web
Pourquoi s’intéresser à l’ergonomie ?
Pour faire un site bien construit, plaisant à naviguer, où l’on trouve facilement ce
que l’on cherche, qui se charge rapidement.
Savoir pourquoi un site est efficace, comment remédier aux problèmes de
compréhension de notre site par nos visiteurs. Savoir apporter un regard critique
et argumenté sur une maquette, un site web existant. Il existe des règles à
appliquer afin de tendre vers cet objectif.
4 règles
Le concept de Gestalt
La loi de Fitts
La loi de Hick
Le concept d’Affordance
3. Le concept de Gestalt ou psychologie de la forme
C’est une théorie selon laquelle les processus de la perception et de la
représentation mentale traitent spontanément les phénomènes comme des
ensembles structurés (les formes) et non comme une simple addition ou
juxtaposition d'éléments.
Le tout est différent de la somme des parties.
Une page web est un ensemble d’éléments, de formes imbriquées les unes dans
les autres qui forment un tout.
Ergonomie web
5. Ergonomie web
2 éléments associés forment un tout.
Le concept de Gestalt ou psychologie de la forme
6. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
La loi de proximité
Le cerveau humain regroupe les éléments, 2 éléments proches se verront
associés, on leur trouvera plus facilement des points communs que 2 éléments
éloignés.
Un paquet d’étoiles sans ordre.
Ici c’est deux lignes composés d’étoiles,
les étoiles passent au second plan devant
la notion de ligne.
7. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
La loi de proximité
Cette déduction de notre cerveau se fait naturellement, c’est une logique de
proximité, d’éloignement et d’ordre des éléments.
C’est fondamentale pour la conception de pages web. Il faut rapprocher les
éléments qui ont une relation forte et éloigner les autres.
Exemple :
Éléments de navigation éloignés les uns des autres..
9. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
La loi de proximité
Dans l’exemple suivant, le contenu est réparti dans 3 colonnes de taille égales
avec des marges égales.
• La première colonne à gauche contient le texte principale de ma page
• La colonne centrale contient le texte qui illustre ce texte
• La colonne de droite contient des liens vers des projets similaires.
La largeur des blancs entre les trois colonnes sont identique, les trois colonnes
ne sont pas associés. Les photos ne sont pas plus associés au texte qu’à la
colonne de droite.
11. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
La loi de proximité
En décalant la colonne centrale vers la gauche, j’associe les photos au texte, et
dissocie les photos de la colonne de droite, auquel j’adjoint un titre qui donne
une explication sur sont rôle.
13. Ergonomie web
Le concept de Gestalt
ou psychologie de la
forme
La loi de proximité
Dans cet exemple les légendes
des photos sont à égale
distance des photos placées
au-dessus et en-dessous. On
ne comprend pas à quelle
photo la légende est associée.
14. Ergonomie web
Le concept de Gestalt
ou psychologie de la
forme
La loi de proximité
En rajoutant une marge sous le
texte, la légende et la photo
sont associés.
15. Ergonomie web
Le concept de Gestalt
ou psychologie de la
forme
La loi de similarité
Les formes qui se ressemblent
sont regroupés par notre
cerveau (taille, forme couleur).
Par la taille : petits carrés et
grands carrés, on a donc
tendances à leur chercher des
similitudes.
16. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
La loi de similarité
Dans l’exemple suivant on va associer les blocs par leur proximité mais aussi par
leur taille différente, on comprend qu’il s’agit d’infos de nature différente.
17. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
La loi de similarité
Par la forme, similarité par la forme.
Ici les blocs carrés et les ronds n’ont pas la même fonction.
18. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
La loi de similarité
Similarité par la couleur, plus compréhensible que d’écrire : noir, gris, violet, etc…
19. Ergonomie web
Le concept de Gestalt ou psychologie de la forme
Gestalt
Proximité des objets
Similitudes de formes, de couleurs, de tailles
= Association
Éloignement des objets
Différences de formes, de tailles et de couleurs
= Dissociation
20. Ergonomie web
La loi de Fitts
Dans le domaine de l'Interaction Homme-Machine (IHM), la loi de Fitts permet
de prédire le temps requis à un humain pour pointer une zone. Appliqué au
web, cette loi permet de savoir en combien de temps la souris va atteindre un
élément sur une page web. Cela permet d'optimiser les interfaces web.
La loi stipule que le temps nécessaire pour atteindre un élément est
proportionnel à la distance de l'élément et la taille de l'élément.
Billetterie
21. Ergonomie web
La loi de Fitts
Plus la souris est éloignée d'un élément et plus le temps pour atteindre cet
élément sera long.
Plus l'élément de destination est gros et moins la souris nécessitera de temps
pour l’atteindre.
De ce fait, pour atteindre rapidement une zone de l'écran, il faut que celle-ci
soit grande et proche de la souris.
On parle de Fittsizing : Le Fittsizing est le principe de compensation de la
distance pour aller à un point par l’augmentation de sa taille; il permet un gain
de temps non négligeable pour l’internaute.
Des études montrent qu’un site de e-commerce qui augmente la taille des
boutons « Ajouter au panier » trop petit, augmentera aussi ses ventes.
23. Ergonomie web
La loi de Hick
La loi de Hick décrit le temps qu'il faut à un utilisateur pour prendre une
décision en fonction du nombre de choix à sa disposition.
De mémoire un homme peut retenir entre 5 et 9 objets, en moyenne 7.
Au delà, notre mémoire de travail, mémoire transitoire et instantanée nous
joue des tours. Au delà de 7 grandes zones le messages risques d’être brouillé
et mal compris.
Dans les barres de navigations, on évitera de mettre plus de 7 items au
grand maximum 9.
24. Ergonomie web
La loi de Hick
Exemple : un menu avec
beaucoup trop d’éléments,
difficile de se repérer.
25. Ergonomie web
La loi de Hick
Ici impression de
fouillis volontaire,
principe du bazar de la
brocante ou l’on va
dénicher des bonnes
affaires en cherchant….
26. Ergonomie web
Le concept
d’affordance
L'affordance est la
capacité d’un système ou
d'un produit à suggérer sa
propre utilisation.
Une porte nous indique
qu’on doit la pousser ou la
tirer par la présence des
gonds, d’une poignée.
27. Important sur le web de faire des liens qui ressemblent à des liens ou qui soit
simplement différents du reste. Et si possible que cette différence soit
omniprésente sur l’ensemble des pages.
Par l’usage de la couleur du texte cliquable:
d’un surlignage
L’usage d’un pictogramme symbolisant la notion de lien
Pour les images
Je dois différencier les images cliquables des images non-cliquable par une distinction qui peu
prendre la forme d’un contour de couleur, d’un pictogramme …
Ergonomie web
Le concept d’affordance
28. La règle des trois clics, certains sites bien fait s’affranchissent de cette règle
et sont parfaitement ergonomique et inversement.
Incompatible avec un bon design, un bon designer web doit connaitre ces
règles et savoir composer avec.
Le scroll, les visiteurs d’un site savent scroller et le font quasiment
automatiquement. Le scroll horizontal est déconseillé car peu utilisé, et
parfois difficile à utiliser, pas de molette de souris horizontale.
Lecture en F ou en Z, c’est faux, c’est la composition de la page qui va diriger
l’œil du visiteur, la page est perçue dans sa globalité, dans sa composition.
Ergonomie web
Idées préconçues
29. Ergonomie web
Les textes
Pour rendre un texte agréable à lire sur un écran il est préférable de :
• Scinder l'article en plusieurs paragraphes
• Rédiger des intertitres
• Faire des sauts de lignes dans les paragraphes
• Ne pas justifier le texte
• Prévoir un interlignage suffisant
• Utiliser des listes à puces (si c'est possible)
• L'illustrer avec quelques images
• Indenter les textes par rapport aux titres
30. Ergonomie web
Importance de la mise-en-page
33 laboratoires grenoblois, regroupés au sein d’un réseau, ont pour
objectifs de : Comprendre les propriétés de la matière à l’échelle du
milliardième de mètre, fabriquer des objets minuscules de quelques
nanomètres, simuler leurs propriétés, découvrir de nouveaux
phénomènes et développer leurs applications… Une méthode pour
préparer le futur : développer un large socle de connaissances
fondamentales et faire émerger de futures applications. Domaine
d’application privilégiés comme la nanoélectronique qui prendra le
relais de la microélectronique avec plus de miniaturisation, plus de
puissance de calcul et plus de mémoire de stockage. Ces
recherches contribueront à valoriser les compétences en recherche
technologique et en industries de haut niveau du site grenoblois ; Le
vivant : les Nanosciences permettront de créer de nouveaux outils
de diagnostic et de nouvelles approches de soin ; mais aussi
l’énergie et l’environnement.
32. Ergonomie web
Importance de la mise-en-page
Utiliseravecmodérationlesdifférentespolicesdecaractère
et autres enrichissements typographiques.
Au delà de 3 polices de caractère, la lecture peut s'en trouver perturbée.
La lecture d’un texte peu contrasté est fatigante et n’invite pas à sa lecture.
33. Ergonomie web
Importance de la mise-en-page
Ne pas utiliser de terme trop technique de jargon professionnel voire
poétique et peu explicite. Utilisez le language de vos visiteurs.
