Ergonomie des interfaces Web s'intéresse à l'amélioration du confort, de la sécurité et de l'efficacité sur un site web pour le plus de visiteurs possible. Cela permet d'optimiser l'interface homme-machine et réduisant les erreurs et en facilitant l'utilisation. Dans le meilleur des cas il faut que tous les visiteurs puissent utiliser un site web sans avoir besoin d'une formation particulière pour comprendre comment il fonctionne. L'ergonomie sur le web s'intéresse à de nombreux points dont la simplicité d'utilisation, l'amélioration de la lecture (améliorer la visibilité), la rapidité d'exécution et aussi à l'accessibilité (penser aux utilisateurs qui possèdent des handicaps).

1. ERGONOMIE DES
INTERFACES
ERGONOMIE WEB
Présenté par : SBAITI Abdelkhalek
Cours Interactions Homme Machine: Pr. RIFFI Said .
6 December 2018
6 December 2018

2. PLAN
I. INTRODUCTION
II. Les règles de l’ ergonomie web
 Le concept de Gestalt
 La loi de Fitts
 La loi de Hick
 Le concept d’Affordance
III. IMPORTANCE DE LA MISE-EN-PAGE
IV. CONCLUSION

3. INTRODUCTION
 Ergonomie vient du grec
 Ergon (travail)
 Nomos (loi, règles).
• Ergonomie est l'ensemble des connaissances scientifiques relatives à l'Homme
nécessaires pour concevoir des outils, des machines et des dispositifs qui
puissent être utilisés avec le maximum de confort, de sécurité et d'efficacité.

4. INTRODUCTION
• Ergonomie web s'intéresse à l'amélioration du confort, de la sécurité et de
l'efficacité sur un site web pour le plus de visiteurs possible. Cela permet
d'optimiser l'interface homme-machine et réduisant les erreurs et en facilitant
l'utilisation. Dans le meilleur des cas il faut que tous les visiteurs puissent utiliser
un site web sans avoir besoin d'une formation particulière pour comprendre
comment il fonctionne.
• L'ergonomie sur le web s'intéresse à de nombreux points dont la simplicité
d'utilisation, l'amélioration de la lecture (améliorer la visibilité), la rapidité
d'exécution et aussi à l'accessibilité (penser aux utilisateurs qui possèdent des
handicaps).

5. INTRODUCTION
• Objectifs de l’ergonomie web
• 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.

6. LE CONCEPT DE GESTALT
• 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.

7. LE CONCEPT DE GESTALT
• 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.

8. LE CONCEPT DE GESTALT
• 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.

9. LE CONCEPT DE GESTALT
• La loi de proximité
• Exemple
Éléments de
navigation éloignés
les uns des autres..

10. LE CONCEPT DE GESTALT
• 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. LE CONCEPT DE GESTALT
• La loi de proximité

12. LE CONCEPT DE GESTALT
• 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. LE CONCEPT DE GESTALT
• 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. LE CONCEPT DE GESTALT
• La loi de proximité
En rajoutant une
marge sous le texte, la
légende et la photo sont
associés.
.

15. LE CONCEPT DE GESTALT
• 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. LE CONCEPT DE GESTALT
• 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. LE CONCEPT DE GESTALT
• La loi de similarité
Ici les blocs carrés et les
ronds n’ont pas la même fonction.

18. LE CONCEPT DE GESTALT
• La loi de similarité
Similarité par la couleur,
plus compréhensible que d’écrire :
noir, gris, violet, etc…
.

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

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

21. LA LOI DE FITTS

22. 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.
• 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.
• 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.

23. LA LOI DE HICK
• Dans les barres de navigations, on évitera de mettre plus de 7 items au grand
maximum 9.

24. LA LOI DE HICK
• Exemple : un menu avec
beaucoup trop d’éléments,
difficile de se repérer.

25. LA LOI DE HICK
• Exemple : Ici impression de
fouillis volontaire, principe du
bazar de la brocante ou l’on va
dénicher des bonnes affaires en
cherchant

26. 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. LE CONCEPT D’AFFORDANCE
• 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

28. LE CONCEPT D’AFFORDANCE
• 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 …

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

31. IMPORTANCE DE LA MISE-EN-PAGE

32. IMPORTANCE DE LA MISE-EN-PAGE

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

34. CONCLUSION
• Lorsque l'ergonomie d'un site web est bien travaillé, cela réduit le taux de rebond
et améliore la satisfaction des utilisateurs.