La hiérarchie visuelle d’un site web, c’est l’ordre dans lequel l’œil lit une page : ce qu’il voit d’abord, ensuite, en dernier. Sur le site d’un hôtel, cet ordre doit mener au bouton qui permet de réserver ou de contacter. Cet article donne la méthode, cinq leviers et une échelle typographique, puis l’applique à trois accueils de nos réalisations.
Ce que l’œil voit en trois secondes
Un visiteur arrive sur l’accueil avec trois questions : où suis-je, ce lieu me plaît-il, comment réserver ? Faites l’essai sur votre site : ouvrez l’accueil, comptez trois secondes, fermez l’onglet. Avez-vous retenu le nom du lieu, sa situation et l’action à faire ? Si l’un des trois manque, la hiérarchie est à revoir.
Les « trois secondes » sont un repère de bon sens, pas le résultat d’une étude. Les mesures publiées vont dans le même sens : le Nielsen Norman Group (NN/g), cabinet de recherche sur l’expérience utilisateur, rapporte que les visiteurs quittent souvent une page en 10 à 20 secondes, et conseille d’énoncer l’intérêt de la page dès les dix premières (étude de Microsoft Research sur 205 873 pages).
Le visiteur ne lit pas : il balaie. Le motif en F a été mis en évidence en 2006 par le NN/g auprès de 232 internautes ; selon son analyse de 2019, il se forme quand la page n’a ni intertitres ni listes. Sur une page structurée, le regard saute de titre en titre puis lit sous celui qui l’intéresse : le NN/g appelle ce motif « en couches » et le juge le plus efficace des motifs qu’il décrit. On ne dessine donc pas une page pour « suivre un F » : on lui donne des titres explicites, des listes et quelques mots en gras.
Le test du plissement d’yeux
Pour voir la hiérarchie réelle d’une page, floutez-la ou plissez les yeux : le NN/g décrit ce « squint test » (plisser les yeux ou appliquer un léger flou au visuel). Ce qui reste visible, le visiteur le voit en premier.
Comment utiliser la hiérarchie visuelle dans le design web : les cinq leviers
Cinq leviers règlent l’ordre de lecture. Un seul suffit rarement ; deux ou trois bien choisis font l’essentiel du travail.
| Levier | Principe | Réflexe sur la page d’un hôtel |
|---|---|---|
| Taille | Ce qui est grand se voit d’abord. | Le nom du lieu ou la promesse en plus grand. Le NN/g conseille au plus trois tailles de texte et deux éléments très grands. |
| Contraste | Une différence de valeur (clair, foncé), de couleur ou de graisse isole un élément. | Une couleur d’accent, réservée à l’action de réservation. Si tout est contrasté, rien ne ressort. |
| Position | Le haut de la page et le début des lignes sont lus les premiers. | Nom, promesse et action dans le premier écran, sans défiler. |
| Espace | Un élément entouré d’espace se détache ; ce qui est proche paraît lié. | Dates, voyageurs et bouton dans un même bloc ; un vide net entre deux sections. |
| Répétition | Un même style répété dit « même rôle ». | Tous les boutons d’action sur un modèle, tous les titres de section sur un modèle. |
Ces leviers se combinent : un bouton de réservation sera le seul aplat de couleur vive de l’écran (contraste), assez large (taille), placé dans l’en-tête puis près des dates (position), entouré d’espace et identique sur toutes les pages (répétition). La grille, qui aligne les blocs et rend l’ordre prévisible, fait l’objet de l’article sur les grilles, sections et colonnes.
Une échelle typographique cohérente pour le web
Comment garder une typographie et des espacements cohérents ? En fixant les valeurs une fois, puis en ne choisissant que dans cette liste. Une échelle typographique, ou échelle modulaire, est une suite de tailles liées par un rapport fixe : on multiplie la taille de base par ce rapport pour monter d’un niveau, on la divise pour descendre (Tim Brown, A List Apart, 2011).
| Niveau | Usage | Taille | Calcul |
|---|---|---|---|
| 0 | Texte courant | 16 px | base |
| 1 | Chapô, texte important | 20 px | 16 × 1,25 |
| 2 | Titre de paragraphe | 25 px | 20 × 1,25 |
| 3 | Titre de section | 31 px | 25 × 1,25 |
| 4 | Titre de page | 39 px | 31 × 1,25 |
Ces chiffres sont des valeurs d’exemple : un rapport plus grand creuse les écarts. Cinq niveaux suffisent pour un site ; sur un même écran, le NN/g conseille de s’en tenir à trois tailles de texte. Les espacements suivent la même logique : une unité de base, par exemple 8 px, et ses multiples (16, 24, 32, 48, 64). L’espace entre deux groupes doit toujours dépasser l’espace à l’intérieur d’un groupe, sans quoi la proximité brouille les blocs.
- Une famille, plusieurs graisses. Une police variable, par exemple une famille sans empattement, peut réunir de nombreuses variantes dans un seul fichier, et le CSS accepte alors toute valeur de graisse de 1 à 1 000, dans la plage que couvre la police (guide MDN). Texte à 400, intertitres à 600 : la graisse règle la hiérarchie sans charger un fichier par style.
- Des lignes courtes et aérées. Le critère 1.4.8 de WCAG (niveau AAA) donne comme valeurs de référence 80 caractères au plus par ligne, un interligne d’au moins 1,5 et un texte non justifié.
- Des tailles en rem. Sur écran étroit, la fonction CSS clamp() réduit les gros titres ; avec un maximum d’au moins le double du minimum, le texte reste agrandissable à 200 %.
Analyse d’une page d’hôtel : trois accueils commentés
Trois accueils de nos réalisations, lus en trois secondes. Ce n’est pas une mesure de suivi du regard, mais une lecture commentée de la capture du premier écran, relevée en octobre 2026 à 1 440 px de large ; les tailles de texte sont celles lues dans le navigateur. D’autres sites sont commentés dans notre sélection d’exemples de sites d’hôtels.
Les Jardins de la Livrée
Maison d’hôtes avec restaurant à Villeneuve-lès-Avignon
Le titre de la maison d’hôtes, en gras de 45 px, est posé sur une carte claire qui l’isole de la photo du jardin : le rapport de contraste mesuré est d’environ 12,3:1. Dessous, trois mentions en capitales (le centre ancien, la piscine et le grand jardin, Avignon à cinq minutes), puis un seul bouton, « Découvrir la maison », blanc sur un vert très foncé (environ 13,7:1). Le menu reste en retrait, en capitales de 13 px.
Au test du plissement d’yeux, l’ordre est le même qu’à la lecture : la carte, le titre, le bouton.
À retenir
- Une carte claire sous le titre : le texte reste lisible quelle que soit la photo.
- Un seul bouton d’action dans le premier écran, foncé, qui ressort sur la carte claire.
- Type
- Maison d’hôtes avec restaurant
- Lieu
- Villeneuve-lès-Avignon (Gard)
- Réservation
- eviivo
- Langues
- français, anglais
Aire Naturelle La Folie
Camping à la ferme · Lagnes, Luberon
Le nom du lieu, en 78 px et en blanc sur la photo de la ferme, occupe le centre de l’écran. Le sous-titre « Camping – Gîtes – Maraîchage » fait 25 px : plus de trois fois moins. Le menu, en 17 px, tient dans une bande claire au-dessus de la photo, et le bouton « Réservation » est son seul bouton plein (contraste d’environ 5,3:1).
En bas de l’écran, la barre de réservation (dates, adultes, enfants, bouton « Chercher ») chevauche le bord de la photo : le visiteur peut agir sans défiler.
À retenir
- Le nom du lieu domine l’écran : plus de trois fois la taille du sous-titre.
- La barre de réservation chevauche la photo : l’action est visible sans défiler.
- Type
- Camping à la ferme : belle tente, emplacement, studio et cabane nature
- Lieu
- Lagnes (Vaucluse)
- Réservation
- Booky
- Langues
- français, anglais
Le Flocon d’Argent
Hôtel de montagne · Les Gets
Le nom de l’hôtel, en grandes capitales blanches avec le dessin de la montagne, occupe le centre de l’écran sur la photo enneigée : l’image mesure 495 × 412 px. En bas à gauche, une fenêtre annonce que les chambres de l’hiver 2026-2027 sont réservables ; ses deux étiquettes blanches portent des capitales noires de 34 et 26 px, contre 17 px pour le texte de la fenêtre, ce qui la place en deuxième lecture. À droite, trois boutons ronds en colonne (réserver, écrire, voir les offres) restent à portée sans concurrencer le titre.
Plus bas, le texte d’accueil est en noir sur blanc, à 17 px (contraste de 21:1).
À retenir
- Un grand sujet au centre : le nom de l’hôtel, en capitales blanches sur la photo.
- Une information d’actualité dans une fenêtre à part ; les actions en colonne à droite.
- Type
- Hôtel 3 étoiles de 9 chambres avec restaurant
- Lieu
- Les Gets (Haute-Savoie)
- Réservation
- Thaïs
- Langues
- Français, anglais
Point commun : un seul sujet par écran. Le visiteur sait où il est avant d’avoir fini de lire, et l’action reste visible sans prendre la place du lieu. Les autres réalisations sont réunies dans le portfolio.
Les erreurs qui diluent l’attention
- Tout mettre en avant. Trois bandeaux, deux fenêtres, quatre boutons de même poids : l’œil ne sait plus où aller. Pour réduire, voir simplicité et minimalisme dans la conception web.
- Plusieurs actions principales. « Réserver », « Appeler » et « Demander un devis » au même niveau, dans la même couleur. Un bouton principal par écran ; les autres en style secondaire.
- La couleur d’accent partout. Liens, pastilles et icônes dans la teinte du bouton : celui-ci se noie.
- Du texte sur une photo sans fond. Lisible sur la maquette, il ne l’est plus quand la photo change. Une carte unie, comme sur La Livrée, limite le problème.
- Des cartes toutes identiques. Si aucune ne ressort, le visiteur ne sait pas laquelle choisir : mettez en avant celle que vous voulez vendre.
- Le mur de texte. Selon le NN/g, la plupart des lecteurs lisent très peu d’un mur de texte : découpez avec des intertitres, des listes et des mots clés en gras.
Pour une page dont le seul but est de convertir, la conception de pages d’atterrissage pousse cette logique plus loin.
Contraste et accessibilité : ce que demande WCAG 2.2
Les règles d’accessibilité du W3C (WCAG 2.2) fixent des seuils précis. Ils servent la hiérarchie : un texte ou un bouton trop pâle sort de la hiérarchie pour tout le monde, surtout sur un téléphone en plein soleil.
| Critère | Ce qu’il demande |
|---|---|
| 1.4.3 Contraste minimum | Rapport de contraste d’au moins 4,5:1 pour le texte, 3:1 pour le grand texte (18 points, soit 24 px, ou 14 points en gras, soit environ 18,5 px). Le seuil n’est pas arrondi : 4,499 ne passe pas. |
| 1.4.11 Contraste des éléments non textuels | 3:1 au moins pour ce qui sert à repérer un composant (bord d’un champ, icône seule) et pour ses états, comme le focus clavier. |
| 2.5.8 Taille de cible (minimum) | Cibles d’au moins 24 × 24 pixels CSS, avec des exceptions (espacement suffisant, lien dans une phrase). Critère ajouté dans WCAG 2.2. |
| 1.4.4 Redimensionnement du texte | Texte agrandissable jusqu’à 200 % sans perte de contenu ni de fonction : la hiérarchie doit survivre au zoom. |
Le ratio se calcule avec une formule publiée par le W3C ; il va de 1:1 (aucun contraste) à 21:1 (noir sur blanc). Sur Les Jardins de la Livrée, le bouton est blanc sur un vert très foncé : un rapport supérieur à 13:1, bien au-delà du seuil. Un texte posé directement sur une photo n’a pas de ratio fixe : vérifiez-le à l’endroit le plus clair de l’image, ou posez une carte ou un voile.
Appliquer la hiérarchie visuelle à votre site
- Écrivez l’action attendue en une phrase. Réserver, demander les disponibilités, appeler : ce sera le bouton principal.
- Choisissez trois tailles pour l’écran d’accueil. Nom ou promesse, précision, navigation.
- Réservez une couleur d’accent à l’action. Le reste en neutres.
- Passez le test. Floutez la page, comptez trois secondes, contrôlez les contrastes avec le tableau ci-dessus.
Les étapes de la conception d’un site d’hôtel sont détaillées dans notre guide de conception d’un site d’hôtel. Pour un site qui se lit dans cet ordre, voir notre site vitrine et notre site de réservation.
Sources consultées en octobre 2026
Nielsen Norman Group : hiérarchie visuelle (Kelley Gordon, 2021), motifs de balayage du texte (Kara Pernice, 2019), durée de visite d’une page (Jakob Nielsen, 2011) et motif de lecture en F (2006). W3C : critères 1.4.3, 1.4.11, 2.5.8, 1.4.4 et 1.4.8. Typographie : Tim Brown, A List Apart et la documentation MDN sur les polices variables et clamp().
Questions fréquentes sur la hiérarchie visuelle d’un site web
Qu’est-ce que la hiérarchie visuelle sur un site web ?
C’est l’ordre dans lequel l’œil lit une page. Il se construit avec la taille, le contraste, la position, l’espace et la répétition des éléments : le plus important se voit en premier, le reste vient ensuite. Sur un site d’hôtel, cet ordre doit mener du nom du lieu à l’action de réserver ou de contacter.
Comment utiliser la hiérarchie visuelle dans le design web ?
Écrivez d’abord l’action attendue du visiteur en une phrase, puis donnez-lui le niveau le plus fort de l’écran : le plus grand contraste, une couleur d’accent réservée, une place dans le premier écran et de l’espace autour. Réglez ensuite les autres éléments en retrait, en répétant les mêmes styles pour les mêmes rôles. Floutez la page pour vérifier l’ordre obtenu.
Comment garder une typographie et des espacements cohérents ?
Fixez les valeurs une fois, puis ne choisissez que dans cette liste : une échelle de tailles liées par un rapport constant (par exemple 16, 20, 25, 31 et 39 px pour une base de 16 px et un rapport de 1,25) et une unité d’espacement avec ses multiples (8, 16, 24, 32 px). Une même famille de caractères en plusieurs graisses suffit en général pour marquer les niveaux.
Quel contraste minimum faut-il pour le texte d’un site ?
WCAG 2.2 (niveau AA) demande un rapport de contraste d’au moins 4,5:1 pour le texte courant et 3:1 pour le grand texte (18 points, soit 24 px, ou 14 points en gras). Le texte doit aussi rester utilisable agrandi à 200 %. Voir le critère 1.4.3 du W3C.
Comment tester la hiérarchie visuelle d’une page d’hôtel ?
Deux essais suffisent : ouvrez l’accueil trois secondes puis dites ce que vous avez retenu (nom, situation, action), et floutez la page ou plissez les yeux pour voir ce qui reste visible. Vérifiez ensuite les contrastes du texte et des boutons avec un outil de calcul du rapport de contraste.
