La définition classique de l’ergonomie regroupe les aspects de confort, de sécurité et d’efficacité, tous à prendre en compte lors de la création d’un site web.
Les critères d’efficacité et de confort de navigation étant développés dans la rubrique consacrée à l’utilisabilité d’un site web, la présente rubrique traitera essentiellement du confort de lecture des visiteurs.
- Pourquoi l’ergonomie d’un site web est-elle importante ?
- Comment améliorer le confort des visiteurs d’un site web ?
- Comment créer un site web ergonomique ?
Le respect des habitudes : ergonomie élémentaire
S’il n’y a pas de véritables normes ergonomiques à respecter lors de la création d’un site web, avec l’usage, des standards d’ergonomie se sont peu à peu mis en place en matière d’occupation de l’espace, de répartition de l’espace, de typographie et d’agencement des textes.
Les internautes s’étant habitués à certains schémas, il est préférable, lors de la création d’un site web, de respecter ces pratiques afin de ne pas perturber vos visiteurs, sans que cela ne doive nuire à la créativité.
L’occupation de l’espace : ergonomie de la mise en écran
La largeur d’un site web doit tenir compte des différentes résolutions d’écran qu’utilisent les internautes afin que les informations principales soient toujours apparentes.
Le choix de la configuration utilisée doit être établi avant la création du site web car la conception de ses éléments en dépendra. Il existe cinq types de configuration d’un site web : fixe, fermé, élastique, fluide, responsive et one-page.
Le site fixe : la préhistoire
Le site web avait une largeur fixe, généralement de 950 pixels afin d’être compatible avec ce qui était alors la majorité des résolutions d’écran.
Il pouvait être collé à gauche de la fenêtre du navigateur, ou plus rarement, à sa droite.
Le site fermé : heureusement en voie de disparition
En plus d’une largeur fixe, ce type de site web avait une hauteur fixe. Les pages dont le volume de contenu dépassait l’espace réservé nécessitaient par conséquent une fenêtre déroulante, procédé à proscrire tant sont rares les internautes s’apercevant de cette possibilité et se donnant ensuite la peine d’y faire défiler le contenu.
Cette configuration fort peu ergonomique tend heureusement à disparaître, ayant surtout été utilisée par les sites web entièrement créés avec Flash, d’autre part peu compatible avec un bon référencement.
Le site élastique : une illusion d’optique, obsolète
Il s’agit également d’un site web de largeur fixe, le plus souvent d’environ 950 pixels, mais centré par rapport au navigateur, lui donnant ainsi un aspect plus élastique dû à son déplacement automatique pour rester constamment au centre de la fenêtre du navigateur quelle que soit sa largeur et ainsi donner l’illusion qu’il s’étire sur toute la largeur disponible.
Il s’agissait de la solution la plus utilisée, il y encore quelques années, bien qu’elle fut déjà dépassée d’un point de vue ergonomique. Plus facile à mettre en oeuvre, tous les composants graphiques du site web sont de taille fixe.
Le site web élastique conservera toujours le même aspect, quelle que soit la largeur de la fenêtre :
- Si on élargit la fenêtre sur un écran permettant une résolution supérieure à 1024 pixels, seul le fond s’élargira, laissant apparaître un espace vide de chaque côté.
- Si on réduit la fenêtre, la partie droite du site sera tout simplement tronquée.
- Sur un support mobile de résolution inférieure, le résultat sera, en fonction du niveau de zoom, soit un site complet mais illisible de part sa taille, soit un site tronqué.
Le site fluide : adaptation à tous les formats d’écran
La largeur du site web de type fluide, ou liquide, s’adapte parfaitement à celle de la fenêtre du navigateur, quelle que soit la résolution utilisée, donnant au site web une impression de fluidité, agréable à l’oeil. Il est cependant possible et recommandé, afin d’éviter des colonnes trop étroites ou trop larges qui pourraient nuire à la lisibilité, de leur donner des limites inférieures et supérieures.
Ce type de configuration est moins utilisé et plus difficile à mettre en oeuvre car il demande une meilleure connaissance de la codification, plus de rigueur dans le développement, et plus de tests.
C’est la configuration la plus ergonomique car c’est le site web qui s’adapte à l’utilisateur et non l’inverse. La résolution des écrans des appareils fixes ayant tendance à augmenter, le site fluide permet à l’internaute de réellement utiliser toute la largeur de son écran et d’y afficher ainsi plus d’informations sans avoir recours au déroulement vertical.
La responsive web design (conception réactive) : le design standard
La création d’un site fluide s’accompagne depuis plusieurs années d’une conception réactive (ou adaptive), communément appelée responsive web design. En s’adaptant également aux résolutions inférieures et moyennant l’utilisation de quelques techniques supplémentaires, cette conception permet au design de rester compatible avec les appareils dotés d’écrans plus petits, tels que les tablettes et les smartphones. Il évite donc de devoir créer un site spécifique pour les supports mobiles et ne nécessite que quelques adaptations de la feuille de style pour, par exemple, déplacer ou supprimer l’affichage de certains éléments.
En savoir plus sur le Responsive web design
Le site « one page » : tendance, mais à éviter le plus souvent
Le seul intérêt d’un site d’une page est de ne pas devoir cliquer pour le parcourir complètement. Le déroulement permet de voir la totalité du contenu. C’est bien s’il y a très peu de contenu. En fait c’est le véritable avantage de ce type de site : masquer la pauvreté de son contenu tout en utilisant un design hors du commmun.
Les inconvénients sont multiples :
- Limitation du contenu
- Contenus non organisés, donc pas adaptés à la plupart des sites
- Temps de chargement plus long
- Référencement naturel médiocre lorsqu’il y a plus d’une expression clé à optimiser
La répartition de l’espace : ergonomie de la mise en page
Tous les sites web ne sont heureusement pas créés sur le même modèle. Si la créativité évite la monotonie, il convient cependant de respecter certaines règles de bon sens – c’est cela aussi l’ergonomie – afin de ne pas perdre les visiteurs.
La page d’un site web, comme tout document, est normalement constituée d’une entête, d’un corps et d’un pied de page.
L’entête
D’une hauteur inférieure au tiers de l’écran, elle comprend généralement plusieurs parties pouvant être agencées de nombreuses manières :
- la navigation principale
- l’identité du site web : logo, nom, sous-titre, slogan…
- liens vers les réseaux sociaux
- choix de la langue
- un diaporama sur la page d’accueil
- un bandeau sur les autres pages
- la zone de connexion
- le fil d’Ariane : page en cours et arborescence ascendante
Le corps
C’est la partie qui offre la plus grande liberté. Elle est généralement divisée en colonnes, idéalement au nombre de deux, pour une meilleure lisibilité.
Le contenu principal :
C’est la seule partie dont la présentation peut différer selon le type de page.
La colonne de droite :
Réservée aux éléments les moins importants – donc surtout pas la navigation – car ils sont susceptibles de ne pas être affichés dans une fenêtre réduite ou un écran de petite taille, elle peut contenir par exemple des textes courts dotés d’un lien vers la page concernée : zone de recherche, informations récentes, actualités, dernières réalisations, questions fréquemment posées, témoignages, publicités, partenaires…
Le pied de page
Il peut inclure une liste de liens rapides (navigation secondaire présentant les principaux éléments), les coordonnées, un rappel de l’activité, les mentions de copyright, les liens vers les mentions légales, les concepteurs du site web, la zone de connexion.
L’agencement des textes : ergonomie du contenu
La lisibilité, la vitesse de lecture, le confort de l’internaute et donc, son envie de lire, sont également influencés par la manière dont le contenu est présenté :
- la largeur du texte
- l’espacement interligne
- l’utilisation de titres, de plusieurs niveaux de sous-titres
- la longueur des paragraphes
- l’utilisation de listes à puces
- l’utilisation d’enrichissements typographiques : gras, italique, couleurs
- l’identification des liens hypertextes : groupe de mots sur lequel un clic envoie à une autre rubrique
La typographie : ergonomie du texte
La lisibilité, la vitesse de lecture et la fatigue de l’internaute, bases d’une bonne ergonomie, sont influencées par les choix typographiques :
- les polices de caractère : types et nombre
- la taille des caractères
- la couleur des caractères
- la couleur de fond et son contraste avec celle des caractères
Dans un souci de performance et d’indépendance vis-à-vis des navigateurs et des systèmes d’exploitation, le choix de la police devrait se limiter à celles les plus utilisées et livrées avec les systèmes d’exploitation de base, telles que : Arial, Comic sans MS, Georgia, Tahoma, Times New Roman, Trebuchet MS, Verdana…
De plus, les résultats de tests de lisibilité poussent à privilégier les typographies sans sérif telles que Verdana, Arial, Trebuchet MS, Tahoma, Comic sans MS.
L’accessibilité : ergonomie pour tous
Il ne suffit pas que le site et toutes ses informations soient accessibles aux robots des moteurs de recherche et à tous les internautes quels que soient leur matériel et leur navigateur.
Les informations doivent également être accessibles aux personnes ayant des déficiences visuelles : non-voyants et malvoyants.
Quelques techniques ergonomiques doivent être mise en place afin de ne pas priver une partie du public des informations contenues dans le site :
- texte alternatif sur toutes les images importantes
- reproduction dans le texte des informations contenues dans les images et les fichiers multimédias
- choix de couleurs et contraste permettant à tous de lire aisément les textes y compris malvoyants et daltoniens
- choix d’une typographie lisible