Ergonomie
2 j'aime692 vues
L'ergonomie web se concentre sur la création de sites faciles à naviguer, utilisant des principes tels que la loi de Fitts, la loi de Hick et le concept d'affordance pour améliorer l'expérience utilisateur. Ces règles soulignent l'importance de la perception, de la proximité, de la similarité et de l'accessibilité visuelle pour optimiser le design et la fonctionnalité des pages. Une attention particulière est requise sur la mise en page, la typographie et la clarté des contenus pour favoriser une lecture confortable et agréable.
Ergonomie
- 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
- 4. Ergonomie web Le concept de Gestalt ou psychologie de la forme
- 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.
- 10. Ergonomie web
- 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.
- 12. Ergonomie web
- 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.
- 22. Ergonomie web La loi de Fitts
- 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.
- 31. Ergonomie web Importance de la mise-en-page
- 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.