Retour au blog

Expérience utilisateur

Ergonomie et lisibilité : pourquoi votre site doit être facile à lire

Maxime Mermoux 6 min de lecture

Un visiteur se fait une première impression d'une page en un vingtième de seconde, et décide en une dizaine de secondes s'il y reste. Ce n'est pas le temps de lire : c'est le temps de repérer. L'ergonomie et la lisibilité d'un site — taille du texte, contraste, hiérarchie, navigation — décident donc si votre contenu sera lu ou ignoré. Voici les règles qui comptent, mesurées et sourcées.

Article révisé le 8 octobre 2026. Il s'appuie désormais sur les critères WCAG 2.2 et les études publiées, cite ses sources en fin d'article, et fait le point sur l'Acte européen sur l'accessibilité.

Ce que les visiteurs font vraiment sur une page

Deux mesures résument l'enjeu :

  • 50 millisecondes. C'est le temps qu'il a fallu aux participants d'une étude de l'université Carleton (2006) pour juger l'attrait visuel d'une page. Ce premier jugement influence ensuite la crédibilité qu'ils lui accordent.
  • 10 secondes. En analysant plus de deux milliards de visites, une étude relayée par le Nielsen Norman Group montre que les visiteurs quittent le plus souvent une page dans ses toutes premières secondes ; passé ce cap, ils restent plus volontiers. Une page doit dire ce qu'elle offre en moins de dix secondes.

Les visiteurs ne lisent pas une page : ils la parcourent à la recherche de repères — titres, mots en gras, boutons. L'ergonomie consiste à placer ces repères là où le regard les cherche, pour que chacun trouve en quelques secondes ce qu'il est venu chercher : un tarif, un horaire, un numéro, un formulaire.

Lisibilité : les règles qui se mesurent

Le contraste entre le texte et le fond

Les règles internationales d'accessibilité (WCAG 2.2) demandent un rapport de contraste d'au moins 4,5 pour 1 pour le texte courant, et 3 pour 1 pour les grands titres. Le gris clair sur fond blanc, très en vogue, échoue souvent à ce test — et devient illisible en plein soleil sur un téléphone, sur une terrasse ou au pied des pistes.

La taille du texte

Les navigateurs affichent par défaut le texte à 16 pixels. Descendre en dessous pour le corps de texte force le lecteur à zoomer. Ce qui compte surtout : que le texte puisse être agrandi sans que la page ne se casse, ce que demandent aussi les WCAG.

La longueur des lignes

Les WCAG recommandent de ne pas dépasser 80 caractères par ligne. Au-delà, l'œil peine à retrouver le début de la ligne suivante. Sur grand écran, un texte qui s'étale sur toute la largeur est l'une des causes de fatigue de lecture les plus courantes.

Les zones à toucher

Les WCAG 2.2 ont ajouté un critère sur la taille des cibles : un bouton ou un lien doit offrir une zone d'au moins 24 × 24 pixels, ou être assez espacé de ses voisins. Sur téléphone, deux liens trop proches, c'est un tap sur deux qui tombe à côté.

L'espace

L'espace vide n'est pas perdu : il sépare les idées et guide le regard. Des paragraphes courts, des intertitres réguliers et des marges généreuses rendent un même texte plus facile à parcourir, sans en retirer un mot.

Hiérarchie visuelle : guider le regard

  • Un seul titre principal (H1) par page, qui dit ce qu'elle propose.
  • Des intertitres (H2, H3) informatifs : un lecteur qui ne lit qu'eux doit comprendre la page.
  • Le gras pour l'essentiel, avec parcimonie : tout mettre en gras revient à ne rien souligner.
  • Des listes pour les énumérations, des tableaux pour les comparaisons.
  • Un bouton principal par écran, d'une couleur que rien d'autre n'utilise.

Navigation : ne jamais perdre le visiteur

  • Un menu court, aux libellés explicites : « Nos tarifs » plutôt que « Découvrir ».
  • La page courante signalée dans le menu, et un fil d'Ariane sur les pages profondes.
  • Des liens reconnaissables comme tels, par la couleur et le soulignement.
  • Le contact toujours à portée : sur téléphone, un numéro qui se compose d'un toucher.
  • Un site utilisable au clavier, avec un repère visible sur l'élément sélectionné.

Le téléphone d'abord, mais pas seulement. En France, un peu moins de la moitié du trafic web se fait sur mobile (StatCounter, 2026) ; pour une recherche locale, la part est bien plus forte. Concevoir d'abord pour le petit écran oblige à hiérarchiser — et l'ordinateur en profite.

La vitesse fait partie de l'ergonomie

Une page qui met du temps à s'afficher est une page mal conçue, quel que soit son design. En 2017, une étude de Google estimait que 53 % des visites sur mobile étaient abandonnées au-delà de trois secondes de chargement. Le chiffre a vieilli, la tendance non : Google mesure aujourd'hui l'expérience réelle avec ses Signaux Web essentiels, dont la stabilité de la page — rien de plus agaçant qu'un bouton qui se dérobe sous le doigt parce qu'une image vient de s'afficher au-dessus.

Accessibilité : ce que dit la loi depuis juin 2025

Depuis le 28 juin 2025, l'Acte européen sur l'accessibilité impose que certains services numériques, dont les sites de commerce en ligne, soient accessibles aux personnes en situation de handicap. Les micro-entreprises de services — moins de 10 salariés et moins de 2 millions d'euros de chiffre d'affaires ou de bilan — en sont exemptées.

Même sans obligation, les règles d'accessibilité restent le meilleur guide de lisibilité qui existe : un site lisible par une personne malvoyante l'est aussi pour un client qui consulte ses horaires en plein soleil, ou pour un robot de Google.

Ce que nous appliquons sur ce site

  1. Une seule couleur pour l'action. L'orange de ce site est réservé à ce qui se clique : il n'apparaît nulle part ailleurs, pour que les boutons se repèrent du premier coup d'œil.
  2. Des pages qui ne bougent pas au chargement. Chaque image déclare ses dimensions, pour que le navigateur lui réserve sa place avant de l'afficher.
  3. Des animations qui savent s'effacer. Elles sont coupées pour les visiteurs qui ont demandé à leur appareil de réduire les animations.
  4. Rien d'invisible si le script échoue. Les effets d'apparition ne masquent le contenu que si le JavaScript fonctionne. Sinon, tout s'affiche normalement.
  5. Des FAQ en HTML natif. Nos questions-réponses s'ouvrent sans script, au clavier comme au doigt, et restent lisibles par les robots.

En résumé : les réflexes à adopter

  1. Contraste — 4,5 pour 1 au minimum pour le texte courant.
  2. Texte — 16 pixels pour le corps, 80 caractères par ligne au maximum.
  3. Hiérarchie — un H1, des intertitres parlants, un bouton principal par écran.
  4. Navigation — menu court, contact toujours accessible, utilisable au clavier.
  5. Stabilité et vitesse — des pages qui s'affichent vite et ne bougent pas sous le doigt.

Vous voulez un site conçu avec ces principes dès le départ ? Découvrez notre offre de création de site, ou demandez-nous un devis gratuit — nous accompagnons les entreprises de Sallanches, Passy, Chamonix et Saint-Gervais.

Sources

À lire aussi

Un site lisible et ergonomique pour votre activité ?

Devis gratuit sous 48h — sans engagement.

Démarrer un projet