Les critères d ergonomie : des conseils pour concevoir un site

Transcription

1 Masson Janice Licence professionnelle Webmestre Editorial Les critères d ergonomie : des conseils pour concevoir un site Enseignant : Franck Grimonpont

2 Sommaire Introduction... Page 1 I) L utilisateur : le principal objectif A) Les critères concernent d abord les utilisateurs... Page 2 B) Quatre catégories liées à l utilisateur Page 3 4 C) Les tests utilisateurs, un moyen efficace pour repérer les erreurs.. Page 5 II) Les critères d ergonomie A) La résolution et le temps de chargement Page 6 7 B) Le contenu, un des critères phare de l ergonomie.. Page 8-11 C) Le graphisme, de la liberté aux contraintes existantes... Page Conclusion... Page 14

3 Introduction Tout d abord, le mot ergonomie vient du grec ergon signifiant travail et nomos lois, règles. De ces termes, nous avons pu en ressortir une définition générale qui est l utilisation des connaissances de l humain afin d améliorer son environnement de travail. Pour le web, cette définition est bien plus précise. Un site web ergonomique est un site conçu de façon à ce que l homme puisse naviguer et comprendre facilement ; l information doit être claire et facile d accès. Il y a plusieurs critères pour concevoir un site d une telle envergure. Un site peut être beau et animé mais compliqué dans la navigation. Le beau n est pas le critère principal d un site web, il faut savoir d abord le rendre utilisable. La question que l on peut se poser est quels sont les règles et points essentiels afin de concevoir un site web ergonomique? En premier lieu, nous verrons que le visiteur est le principal objectif dans la conception du site puis en deuxième partie les critères d ergonomie. 1

4 I) L utilisateur : le principal objectif A) Les critères concernent d abord les utilisateurs L ergonomie quand elle est appliquée au Web est de faire en sorte que le maximum d utilisateurs aient accès facilement à l information. Pour cela, il faut créer des outils qui seront faciles de prise en main ; ce qui n est pas une chose aisée. En effet, la difficulté principale est la diversité des profils des visiteurs ; l utilisateur peut être une personne connaissant l environnement Web mais aussi une personne novice dans ce domaine. Il faut donc établir un compromis. Quelques critères sont importants : - Les attentes de l utilisateur sont différentes, chacun ne cherche pas la même information et n ont pas les mêmes exigences en terme de graphisme. - Les habitudes de l utilisateur. - L âge. - Les équipements : une des difficultés majeures. En effet, chaque utilisateur n a pas le même équipement les résolutions sont différentes, la vitesse de navigation aussi. - Le niveau de connaissances : un utilisateur peut être aussi bien novice dans l informatique que confirmé. Il faut donc faire en conséquence pour les novices. Un site Web se construit en tenant compte du mode de lecture de l internaute. En effet, à plusieurs reprises nous avons pu remarquer que l utilisateur lit un site en «Z», c'est-à-dire que son œil se positionne d abord en haut à gauche, puis passe en haut à droite, descend en bas à gauche et termine en bas à droite. C est pourquoi la plupart des sites sont conçus en fonction de ce mode de lecture. Les informations les plus importantes tels que le logo sont en haut à gauche, le menu en haut à droite et le contenu en bas à droite. 2

5 B) Quatre catégories liées à l utilisateur Cependant, le mode de lecture n est pas le facteur le plus important. Le principal objectif est divisé en quatre catégories : l accessibilité, la navigabilité, l utilisabilité et l interactivité. Ces quatre notions sont directement liées à l utilisateur qui prendra la décision de continuer sa navigation ou non. Nous allons définir ces quatre termes. L accessibilité est le fait qu un site doit être consulté universellement, c'est-à-dire que n importe quels utilisateurs doit pouvoir avoir accès au site ; un malvoyant ou non voyant par exemple. Il y a plusieurs règles à respecter pour qu un site soit accessible au plus grand nombre. Grâce à des métas (balises qui contiennent des mots clés), Google peut traduire au malvoyant un site. Ceci n est qu une infime part des règles à respecter. L accessibilité se réfère principalement à la capacité technique des utilisateurs (la performance des machines, la connexion), à l accès au site par des personnes à handicap et enfin aux résolutions des écrans encore beaucoup de visiteurs ont une faible résolution d écran. Le référenceur est là pour réduire les erreurs et s assurer que le site internet sera facile d accès et suffisamment visible par tous. En ce qui concerne la navigabilité, il est nécessaire que le navigateur trouve rapidement l information qu il a recherchée. Une des règles les plus connues est celle des trois clics, en effet dans un site, l utilisateur ne doit pas cliquer plus de trois fois pour naviguer de la page d accueil à l information recherchée. Dépasser ce nombre, peut décourager le navigateur, l agacer et donc se diriger vers un autre site pour rechercher son information. La navigation est essentielle pour l ergonomie, il faut que la navigation soit évidente et donc que le site soit clair. Le site doit aussi, laisser la possibilité à l utilisateur de retourner à la page d accueil quand il le souhaite. En un seul clic il doit pouvoir réaliser ce souhait ; il est donc préférable dans son menu d avoir une rubrique accueil mais aussi de créer une bannière cliquable. Le menu est la structure importante d un site puisqu elle permet la navigation. Un menu doit être présent sur toutes les pages du site afin de naviguer facilement mais il faut savoir aussi qu un menu simple est aussi un menu qui sera identique sur toutes les pages. Dix secondes à tenter de comprendre comment le site fonctionne est déjà trop long car l internaute va certainement se diriger sur autre chose. 3

6 Une notion qui se rapproche de la navigation, «l utilisabilité». Un site ne peut être parfait, cependant, il faut pouvoir se rapprocher de cet objectif. Cette notion est qu il faut permettre à tout type de personne, quelque soit son âge, sa zone géographique ou sa connaissance du web ou non de pouvoir consulter une page web. A tout moment, le navigateur doit savoir où il se trouve dans le site, quelle est l information dans la page et dans le site et comment aller sur la page qui l intéresse le plus rapidement possible. Navigabilité et utilisabilité vont de pairs, ces deux notions sont très proches. Enfin, une dernière notion, l interactivité. Ceci caractérise les interactions possibles entre l utilisateur et le site web. Les liens hypertextes permettent à l utilisateur un choix multiple de navigation. Il est important d insérer plusieurs liens dans les pages du site. Cependant, plusieurs ne veut pas dire énormément car trop de liens peuvent rendre la lecture plus difficile. Afin d attirer l œil de l utilisateur et de lui donner l envie d en savoir plus, il est préconisé de découper l information. Par exemple, un début de texte avec un lien hypertexte pour voir la suite du texte. Ceci permet à l utilisateur de naviguer un peu plus dans le site et de mieux assimiler l information. L échange est aussi une notion importante. Pour faire évoluer son site, cela peut être nécessaire de recueillir les impressions ou les demandes du visiteur. Il est important à l utilisateur de pouvoir contacter une personne facilement, il faut donc à disposition le courriel du «gérant» ou alors un formulaire de contact. 4

7 C) Les tests utilisateurs : un moyen efficace pour repérer les erreurs Pour être sûr que son site va être facile d accès, un outil existe : c est le test utilisateurs. Mais cet outil est encore trop peu utilisé. Il est centré exclusivement sur l utilisateur, d où le nom de cette démarche. Il existe plusieurs tests mais qui ont le même objectif : observer le comportement des internautes qui visitent le site afin d identifier, éventuellement, les disfonctionnements du site et les difficultés que l internaute rencontre. Grâce à cette méthode, on peut établir des recommandations et donc améliorer le site. Ce système se réalise avec un échantillon de 6 à 10 utilisateurs. Mener des tests sur cinq personnes peut permettre de détecter 80% des problèmes liés à l ergonomie d un site. Les tests les moins coûteux sont au nombre de trois : - Le tri par cartes : cette méthode permet de définir ou valider le rubriquage général d un site. On distribue, aux utilisateurs, des cartes dont il est inscrit les informations fournies par le site et les services ou outils offerts par le site. L utilisateur doit regrouper selon sa logique les cartes. Par la suite, il doit donner un titre à chaque paquet de cartes. Après observation des résultats de chaque utilisateur, on peut constituer les rubriques du site. - Le test scénarisé : l utilisateur doit effectuer une tâche spécifique par exemple trouver une information, acheter en ligne etc Un test réussi est lorsque par exemple 90% des utilisateurs parviennent à trouver l information en un temps défini ou si 80% réussissent à finaliser l achat du premier coup. Lors de ces manipulations l utilisateur peut être filmé afin d observer son comportement, ainsi qu un débriefing peut être organisé après la tâche effectuée. Ces tests sont faits en fonction des résolutions d écrans ainsi que des connexions internet ; par exemple un utilisateur qui possède un écran d une résolution de 640x480 et une connexion de 56Ko effectuera sa tâche avec ces mêmes caractéristiques. - Le test en visite libre : comme son nom l indique, ce test consiste à laisser l utilisateur naviguer sur le site sans aucun conseil. Un ergonome est là pour les inciter à dire ce qui ne va pas ou bien ce qu à première vue ils vont trouver sur les pages correspondantes. Ces tests sont réalisés pendant la conception ou après, afin de voir ce qui va et ce qui ne va pas et repenser son site. 5

8 II) Les critères d ergonomie Nous allons observer trois grands critères d ergonomie ; la résolution et le temps de chargement, le contenu et le graphisme. Les critères d ergonomie ne sont que des conseils, le concepteur de site web est donc libre pour réaliser son site. Il faut, cependant, que le site web ne contienne le moins possible d erreurs et qu il soit facile d accès. C est pourquoi quelques critères doivent être pris en compte. A) La résolution et le temps de chargement Nous allons commencer par définir les critères en rapport avec la résolution. Définir la taille de la page web est important. Chacun ne possède pas la même résolution d écran, il faut donc une taille qui soit visible par tous type d écran. Si la page est trop grande par rapport à l écran de l utilisateur, il faudra utiliser l ascenseur horizontal ; il est connu qu il est très ennuyeux pour quelqu un d utiliser ce système. Une page courte permet de repérer facilement l information et les éléments intéressants. Une page trop longue avec utilisation d ascenseur ne serait pas lue en entier et donc une multitude d informations seraient perdues. Elles seraient, de plus, plus longues à charger. Pour obtenir un affichage optimal visible par la majeure partie des utilisateurs, nous pouvons choisir la plus petite largeur d écran que possède le plus grand nombre d utilisateurs. Grâce à cette méthode, il n y aura pas de problème d affichage ; sachant que la majorité des écrans, aujourd hui est de 1024 x 768 pixels. La résolution est l un des critères les plus importants, il faut être judicieux sur ce point. Un utilisateur peut décider de fermer le site parce qu il est trop large et qu il est obligé d utiliser l ascenseur pour aller d une information à une autre. Il est de même qu une page qui contient beaucoup d information va devenir une page lourde. Le temps de chargement est important, il faut qu une page s affiche le plus rapidement possible afin que l utilisateur ne soit pas découragé et décide de changer de site. La majorité des personnes n attendent pas 15 secondes lors du chargement d une page. Ce temps dépend aussi de la connexion du visiteur, la taille de la page et des images, 6

9 ainsi que des capacités du serveur web. Un chargement de 1 à 2 secondes est très bien toléré. Il convient d optimiser au maximum la taille des images, en choisissant le format le moins lourd avec un nombre de couleurs le plus petit possible. Les images doivent être de taille réelle, sans redimensionnement. Lorsque les contenus restent lourds malgré des efforts pour réduire le poids, il existe différentes méthodes afin que le visiteur ne se décourage pas : - Insérer les objets les moins lourds en haut de page et les plus lourds en dernier. Il faut, cependant, mettre en place un chargement progressif - Prévenir l internaute du poids de la page. Puisqu il est informé, le visiteur sera un peu plus tolèrent - Accompagner les objets lourds d une description textuelle afin de comprendre de quoi on parle Il faut, donc, faire en sorte que le chargement soit le moins long possible et donc prendre en compte ces critères. Cependant, d autres critères sont aussi importants à savoir. 7

10 B) Le contenu, un des critères phare de l ergonomie Le critère en rapport avec le contenu comporte plusieurs conseils que ce soit en rapport avec le texte ou les images. Avant toutes choses, il faut utiliser les conventions pour réaliser un site. Par exemple, le logo cliquable est l une de ces conventions. Ces critères sont certes trop généraux mais ils ont trois avantages : ils sont faciles à appliquer, peu coûteux et peuvent être mis en œuvre dès le début de la conception du produit. Il faut cependant faire un compromis, utiliser ces conventions pour éviter des erreurs tout en étant le plus créatif possible. Voici quelques conventions : - Placer le logo en haut à gauche. Ce logo doit être cliquable afin de revenir sur la page d accueil. - Le menu en haut, avec les sous menu sur la gauche - Les liens doit être les plus visibles possibles De même, il faut que les formats utilisés doivent être transparents, c'est-à-dire qu il soit en mode texte. C est pourquoi il est préférable d utilisé du HTML au flash (avec Firefox, pour lire le flash il faut installer un plugin). Les illustrations graphiques comme le flash par exemple doivent donc être en complément des informations textuelles pour ne pas provoquer une gêne pour les non-voyants. De plus, à toute image doit être mis une légende ou texte de remplacement, afin que les non-voyants puissent comprendre l image. Cette légende se fait grâce à l attribut alt. Le contenu est très important, mais il est différent de celui d un écrit papier. Les visiteurs reviennent sur un site plus pour son contenu que son design. Un site avec un contenu intéressant, mais dont le design est simple, est bien plus intéressant qu un site qui dispose du contraire. Cependant, un internaute n est pas prêt à lire une grande quantité d informations dans un site web, un site n est pas un journal, l information doit être simplifiée. Un texte en ligne devrait représenter la moitié d un texte papier. Contrairement aux autres types d écrits, il faut réduire les informations inutiles et ne donner que ce qu il y a d important. Il faut prendre en compte que les informations écrites sur un écran sont plus difficiles à lire (25% de lecture en plus). Il est judicieux, alors d aérer le texte et de le 8

11 structurer avec des titres, des paragraphes (une idée par paragraphe) pour une lecture plus facile. Il existe certaines règles de base en matière d organisation du contenu, la règle de la pyramide inversée fournir des informations du général au particulier : - Placer les informations les plus importantes, le message principal en haut de la page, au centre, au début du texte. - On peut réaliser cette pyramide sur plusieurs pages, cependant, il faut limiter le nombre de clics pour atteindre une information. Ce qui peut être envisagé est de donner les informations principales sur une page et de mettre le détail sur une autre page. - Penser à la règle de cinq «w» : Who, What, When, Where, Why. Il s agit de répondre chronologiquement à ces questions. - Beaucoup de personnes n aiment pas lire sur un écran, il est donc préférable de réaliser une version imprimable d un texte. La mise en forme du texte joue beaucoup sur l ergonomie afin d augmenter la lisibilité. Voici quelques préconisations : - Il est important de contraster le fond et le texte afin de pouvoir lire le texte facilement. Le texte en noir sur fond blanc est une référence, mais il est parfois trop agressif l utilisation du gris peut être une solution. Aussi, il faut éviter le bruit visuel qui peut perturber la lecture. Le bruit visuel est tout élément graphique qui ne transmet pas d information et surcharge la présentation. Pour cela il faut éviter les images de fond derrière du texte, les effets de relief qui sont inutiles et de mauvais goût et d insérer des lignes trop foncées et trop nombreuses pour réaliser un tableau. - Utiliser une taille de caractère assez grande. La taille du texte est très importante pour la lisibilité. Il faut pouvoir obtenir une taille de texte qui convienne à tout type d yeux. Au lieu d utiliser des points ou des pixels pour la taille, il est préférable d utiliser des % ou em : ces unités sont relatives à la taille d affichage spécifiée par le navigateur. L utilisateur pourra, alors, agrandir ou rétrécir la taille du texte comme il le souhaite. Pour être lu sans difficulté, il est conseillé de choisir une taille entre 75% et 80%. 9

12 - Utiliser une police sans serif. Il existe deux types de police de caractères qui sont avec ou sans serif. Une police avec serif a des empattements au bout des caractères tandis que sans serif n en a pas. Voici un exemple : Les polices sans serif seraient plus adaptées à l écran. Il est aussi plus préférable de prendre une police de caractère conçue pour l écran Georgia est une police serif conçue pour l écran. Ce genre de police existe aussi bien avec serif que sans serif. Il est aussi important de mettre dans une feuille de style une police générique. Elles sont assurées d être affichées par le navigateur. Pour écrire des titres avec une police non générique, on peut contourner cette limitation en créant des images transparentes comportant le texte. En police sans serif on a : Verdana, Geneva, Arial, Helvetica, sans-serif. En police avec serif, il y a : Georgia, "Bookman Old Style", serif. - Ne pas utiliser plus de deux voire trois polices de caractères différentes. Les polices stylisées doivent être utilisées avec parcimonie (pour un titre par exemple) et pour le reste de la page, il faut utiliser une police classique. - Restreindre le texte en majuscule effet d agression utiliser à la place des petites majuscules (en petite quantité cependant), ou le texte en italique qui fait référence à une citation et qui est de plus moins lisible. - Eviter le soulignement qui sera confondu avec les liens. Pour les liens, il faut utiliser visuellement ce qui est cliquable. Ceci facilite la navigation. Par défaut, le lien hypertexte est bleu souligné. Ceci est devenu courant, et chaque personne l assimile à un lien. Il est quand même possible de modifier légèrement pour que cela s accorde avec l ensemble de la page. Toutefois il y a quelques recommandations : Pour signaler un lien, choisir une couleur différente. Il faut les mettre en évidence pour les distinguer du contenu. Sans lire la page, il faut pouvoir distinguer où sont les liens. 10

13 Il est plus prudent de souligner les liens. Il ne faut donc pas souligner autre chose qu un lien. Eviter les effets liens barrés, changement de taille au survol etc C est lourd et d un mauvais goût. - Utiliser des verbes significatifs pour les actions. On peut le voir souvent sur le web ou sur les logiciels des boutons d actions «OK» ou «Valider». Ceci n est pas vraiment explicite. Afin de limiter le risque d incompréhension, il est recommandé de choisir des verbes significatifs pour que l utilisateur sache quelle action il va effectuer en cliquant. Pour un formulaire de commande, par exemple, à la fin, au lieu de mettre un bouton «Envoyer», il est conseillé de remplacer par «Commander». - Pour ne pas compliquer la lecture, il faut s assurer d avoir une interligne suffisante. Comme le reste, l interligne peut être spécifiée dans la feuille de style. - La longueur des lignes est aussi un facteur de lisibilité un texte dont la ligne est trop longue est difficile à lire, on ne trouve pas facilement la ligne suivante. Il ne faudrait pas dépasser 100 caractères par ligne. L alignement du texte est d autant plus important à choisir. La justification crée des espacements entre les mots, quand la ligne est courte, qui ne sont parfois pas jolis. Il est préférable de choisir un alignement à gauche. Ces recommandations sont nécessaires pour faciliter la lecture à l écran et la recherche d informations sur le web. Malgré tout, la lecture papier reste le moyen le plus agréable. Si toutefois, le texte est long, un format imprimable est largement conseillé. 11

14 C) Le graphisme, de la liberté aux contraintes existantes Si le contenu est important, il reste toutefois, un critère qui est le graphisme. Chacun est libre dans la réalisation de son site, surtout au niveau graphisme. Mais il faut, cependant, faire attention à certaines règles. Le site ne doit pas être que beau, il faut qu il soit avant tout utilisable. Deux points sont à développer : les animations et les couleurs. En ce qui concerne ce dernier, nous avons quelques recommandations. Le contraste est très important ; le niveau de contraste entre l arrière plan et le texte doit être suffisant afin que les malvoyants mais aussi les daltoniens puissent lire correctement l information. De plus, il est conseillé de ne pas utiliser plus de trois couleurs différentes sur un site internet afin qu il reste le plus sobre possible. Les couleurs devront correspondre aux couleurs du logo s il y en a un, et exprimer une ambiance particulière à l image que l on souhaite transmettre. Quel que soit le choix, il faut une couleur prédominante, représentant la majeure partie de la page, ainsi qu une ou deux couleurs secondaires plus vives moins présentes sur la page. Les couleurs possèdent une symbolique, il est donc important d être rigoureux dans son choix couleurs froides, couleurs chaudes. Des éléments de couleurs chaudes paraîtront plus grands que des éléments de couleurs froides. De plus, elles influent sur le comportement des individus : - Physiquement : sommeil par exemple - émotionnellement : sentiment de peur, de sécurité, de joie - psychologiquement : dynamisme, concentration Il existe deux façons de choisir des couleurs harmonieuses : - en choisissant des nuances d une même couleur, soit de même teinte - en mêlant des couleurs complémentaires sur une roue chromatique se seront les couleurs qui sont opposées. Un autre aspect à développer, l insertion d un nombre important d animations au format flash. Il faut savoir, que beaucoup de personnes ne pourront pas voir l animation. En effet, pour lire un document flash, il faut télécharger «adobe flash player», et les novices ne le feront pas par peur du téléchargement. D autres, qui pourront les lire, croiront à des publicités et ne feront donc pas attention aux animations. Une animation capte toujours l attention mais elle peut perturber la lecture. Il est déconseillé d insérer une animation à 12

15 côté d un contenu textuel. Cependant, on peut mettre une animation pour la détente, ou pour un but pédagogique lorsqu il n y a pas d autre contenu. Plusieurs animations sur une page peut entraîner une fatigue visuelle, et donneront une impression d agitation, le message sera plutôt vague. Le temps de chargement est un élément qui peut décourager l utilisateur. La tolérance aux chargements est de plus en plus faible, puisqu avec le haut débit, chacun pense que toute chose doit aller le plus rapidement possible. Pour finir, les animations sont loin d être nécessaire ; les utilisateurs naviguent sur un site plus pour la qualité des informations et l esthétisme général que pour les animations (sauf si le site est ludique). Aujourd hui, il est préférable de programmer avec du JavaScript plutôt qu avec du flash.. 13

16 Conclusion Les critères d ergonomie ne sont que des conseils. Il faut en prendre et en laisser. Avant tout, il faut pouvoir réfléchir à qui l on parle, et faire en conséquence pour le public visé. Un bon site est un site où l information est présente au bon moment, au bon endroit et le plus visible possible. Pour ce qui est du graphisme, il n y a pas de recommandations, le beau est relatif ; le plus important est d être lisible et donc de choisir des couleurs qui n empêcheront pas la lecture. Lorsque le site est fini, il faut absolument le relire, et corriger les erreurs. Pour l HTML il existe la norme W3C, grâce à ceci, on peut voir ses erreurs de syntaxe dans les balises. Pour le reste, il faut s aider des règles d ergonomie et pourquoi pas demander à un novice de naviguer sur le site. Ceci est la meilleure solution pour savoir si le site est facile d accès ou non. Aujourd hui, l ergonomie n est pas efficace à 100%. L accessibilité est encore un point essentiel qui n est pas pris en compte par tous et qui n est pas encore totalement fiable. Au niveau du web, encore beaucoup de problèmes subsistent. Il n y aura jamais un site parfait. On trouvera toujours une erreur, une information placée au mauvais endroit, quelque chose qui ne conviendra pas à quelqu un. Il faut se tendre vers le parfait mais cet objectif ne sera jamais atteint jusqu au bout. 14

17 Réseaugraphie Partie 1 A propos des critères concernant les utilisateurs (A) A propos des critères d ergonomie liés à l utilisateur (B) ac0654eca20098aae4f1837e4afed A propos des tests utilisateurs - Partie 2 A propos de la résolution et temps de chargement (A) A propos du contenu (B) A propos du graphisme (C)