Ergonomie d'un site web : les principes qui comptent

L’ergonomie d’un site web décide de presque tout ce qui se passe après l’arrivée d’un visiteur. Un site peut être bien référencé, bien écrit et graphiquement soigné : s’il oblige à réfléchir pour trouver un numéro de téléphone ou remplir un formulaire, il perd la majorité des occasions qu’il a mis des mois à créer. Les principes qui suivent ne relèvent ni de la mode ni du goût personnel. Ils s’appuient sur des comportements observés de façon constante, et la plupart se vérifient sans budget, sur un téléphone, en une heure de travail attentif.

Hiérarchie visuelle : dire ce qui compte, une fois

Un visiteur ne lit pas, il balaye. Son regard suit les contrastes, les tailles et les positions avant de s’arrêter sur du texte. La hiérarchie visuelle consiste à faire coïncider ce parcours du regard avec l’ordre d’importance réel des informations. Quand tout est mis en avant, plus rien ne l’est : une page où cinq éléments crient simultanément produit exactement le même effet qu’une page uniformément grise.

La règle pratique tient en une contrainte : un seul message principal par page, une seule action mise en évidence. Les actions secondaires existent, mais sous une forme visuellement plus discrète. Un bouton principal coloré et un lien secondaire en texte simple suffisent à orienter sans hésitation.

Le premier écran mérite une attention particulière. En moins de cinq secondes, le visiteur doit savoir sur quel type de site il se trouve, ce qu’on y propose et où cliquer ensuite. Les grandes images décoratives qui repoussent le contenu utile sous la ligne de flottaison coûtent cher : elles retardent la compréhension au moment où l’attention est maximale.

Lisibilité et contraste : la base négligée

Un texte gris clair sur fond blanc reste l’erreur la plus répandue du web. Elle traduit une confusion entre élégance et lisibilité. Le rapport de contraste entre le texte et son fond se mesure : un texte courant doit atteindre au minimum un rapport de quatre et demi contre un, un texte de grande taille peut descendre à trois contre un. Ces valeurs ne sont pas des recommandations esthétiques mais des seuils issus des référentiels d’accessibilité.

La taille du corps de texte suit la même logique. Seize pixels constituent un plancher raisonnable sur téléphone, dix-huit apportant un confort réel pour un public d’âge varié. La longueur de ligne compte tout autant : au-delà de quatre-vingts caractères, l’œil peine à retrouver le début de la ligne suivante. Une largeur de colonne limitée améliore la lecture bien davantage qu’un choix de police sophistiqué.

L’interlignage et les espacements finissent le travail. Un texte aéré, découpé en paragraphes courts, avec des intertitres tous les trois ou quatre paragraphes, se parcourt sans effort. Les blocs compacts de quinze lignes font fuir, quelle que soit la qualité de leur contenu. Ces vérifications figurent parmi les points de contrôle d’un examen méthodique mené sur un site existant.

Cohérence et navigation prévisible

La cohérence épargne au visiteur un apprentissage à chaque page. Un bouton d’action garde la même forme et la même couleur partout ; un lien reste souligné ou coloré selon une règle unique ; le menu conserve sa position et son ordre. Les sites qui changent de disposition entre rubriques imposent un effort permanent, rarement récompensé.

La navigation gagne à rester prévisible et courte. Cinq à sept entrées de menu constituent une limite raisonnable ; au-delà, un regroupement s’impose. Les libellés se rédigent dans les mots du visiteur, pas dans le vocabulaire interne de l’entreprise : « Nos prestations » se comprend mieux que « Notre offre globale », et « Tarifs » mieux que « Investissement ».

Le fil d’Ariane, la mise en évidence de la page courante et un logo qui ramène toujours à l’accueil complètent le dispositif. Ces conventions paraissent banales, et c’est précisément leur force : le visiteur les connaît déjà, il n’a rien à apprendre.

L’accessibilité prolonge naturellement cette exigence de cohérence. Un site navigable au clavier, dont les images portent un texte alternatif descriptif et dont les champs de formulaire sont correctement étiquetés, sert bien plus de monde qu’on ne l’imagine : personnes malvoyantes, mais aussi visiteurs âgés, utilisateurs en plein soleil, personnes qui consultent d’une seule main dans un bus. Aucun de ces aménagements ne dégrade l’expérience des autres, et la plupart améliorent mécaniquement la compréhension des pages par les moteurs de recherche. Traiter l’accessibilité en fin de projet coûte sensiblement plus cher que de l’avoir intégrée dès les maquettes, pour un résultat toujours inférieur.

La vitesse ressentie relève elle aussi de l’ergonomie. Un contenu qui se stabilise pendant que l’utilisateur commence à lire, des images dont l’emplacement est réservé avant leur chargement, des polices qui ne provoquent pas de saut de texte : ces détails suppriment l’impression de désordre qui pousse à quitter une page avant même de l’avoir consultée. Réserver les dimensions de chaque image dans le code règle à lui seul une bonne part du problème.

Retour d’information et zones tactiles

Chaque action doit produire un signe. Un bouton pressé change d’aspect, un envoi de formulaire affiche un message explicite, une opération longue montre un indicateur d’attente. Sans ce retour d’information, le visiteur clique une deuxième fois, s’agace, ou quitte la page en pensant qu’elle est cassée. Les doubles envois de formulaires ont presque toujours cette origine.

Les messages d’erreur méritent un soin particulier. « Erreur de saisie » n’aide personne ; « Le numéro de téléphone doit comporter dix chiffres » permet de corriger immédiatement. L’erreur s’affiche à côté du champ concerné, en conservant les données déjà saisies. Vider un formulaire après une erreur est la façon la plus sûre de perdre un contact.

Sur mobile, la question des zones tactiles devient déterminante. Une cible confortable mesure au moins quarante-quatre pixels de côté, avec un espacement suffisant pour éviter les erreurs de frappe. Les éléments placés en haut de l’écran restent difficiles à atteindre au pouce sur les grands appareils : les actions fréquentes gagnent à descendre. Le numéro de téléphone doit être appelable d’un simple appui, et l’adresse ouvrir directement une application de navigation.

Formulaires : moins de champs, plus de contacts

Chaque champ ajouté fait perdre des réponses. Un formulaire de contact efficace demande le nom, le moyen de rappel et le message ; tout le reste peut être obtenu lors de l’échange qui suivra. Les champs obligatoires se réduisent au strict minimum, et les champs facultatifs se signalent clairement.

Le format des saisies doit être tolérant. Un numéro de téléphone saisi avec des espaces, des points ou un indicatif doit être accepté ; c’est au programme de normaliser, pas à l’utilisateur de deviner. Les listes déroulantes de plus de dix entrées se remplacent avantageusement par un champ de recherche, et les menus de sélection de date par une saisie libre quand la précision n’est pas critique.

La confirmation d’envoi mérite une page ou un message explicite indiquant ce qui va se passer, sous quel délai et par quel canal. Un simple « Merci » laisse le visiteur dans le doute. Cette confirmation explicite réduit sensiblement les relances et les doublons.

Tester sans budget

Trois méthodes légères donnent des résultats étonnamment fiables. Le test des cinq secondes en premier : montrer une page à quelqu’un qui ne connaît pas l’activité, la masquer après cinq secondes, puis demander de quoi il s’agit et ce que l’on peut y faire. Les réponses floues signalent un problème de hiérarchie, pas un problème de goût.

Le test utilisateur maison ensuite. Quatre ou cinq personnes suffisent à révéler la grande majorité des difficultés d’usage. Le principe consiste à donner une tâche concrète, « trouve les horaires du samedi » ou « demande un rendez-vous », puis à se taire et observer. Ne jamais aider, ne jamais expliquer : chaque hésitation constitue une donnée. Les participants n’ont pas besoin d’être des clients, seulement d’ignorer le site.

Le test des cinq personnes se complète par une lecture à froid, quelques jours après avoir travaillé sur les pages, de préférence sur un appareil différent et en conditions réelles de connexion. Les défauts sautent alors aux yeux. Ces contrôles s’intègrent naturellement au travail décrit dans le métier de webdesigner, mais rien n’empêche un responsable d’activité de les mener lui-même.

Une dernière vérification vaut pour tous les sites : parcourir l’intégralité du parcours de contact depuis un téléphone, en dehors du réseau du bureau, comme le ferait un visiteur pressé. La plupart des défauts sérieux se révèlent dans cette configuration, y compris sur un site vitrine de taille modeste que l’on croyait irréprochable.