Concevoir une hiérarchie de page responsive qui facilite le repérage et la compréhension

Une hiérarchie responsive fonctionne si la personne peut reconnaître rapidement le but de la page, trouver les preuves utiles, comprendre les choix et identifier la prochaine action, quelle que soit la présentation. Il faut donc décider les priorités du contenu, ses relations et sa séquence significative avant de composer l’écran. Les titres, la typographie, les espacements, les alignements, les regroupements et l’accent placé sur les actions rendent ensuite ce contrat perceptible. Lors de la redistribution, le sens doit survivre: empiler les modules d’une maquette large ne suffit pas si les preuves se détachent des affirmations ou si l’action principale disparaît dans la longueur.

Que doit permettre de comprendre une hiérarchie responsive?

Elle doit permettre d’identifier le but de la page, les preuves pertinentes, les choix disponibles et la prochaine étape sans dépendre d’une composition particulière. Ces quatre questions forment une synthèse éditoriale, et non un cadre officiel du W3C, de Nielsen Norman Group ou de GOV.UK. La recommandation complémentaire du W3C sur l’accessibilité cognitive souligne néanmoins qu’un titre clair aide à comprendre où l’on se trouve et à quoi sert la page; elle ne constitue pas un critère de succès WCAG.

Prenons une page B2B qui présente trois formules d’assistance. Sur ordinateur, son introduction, ses références, les résumés des formules, les conditions de qualification et tous les boutons reçoivent presque le même poids. La finition paraît soignée, mais l’acheteur ne sait pas par où commencer. En vue étroite ou zoomée, les modules deviennent une longue colonne et la logique supposée de la composition s’efface. Le problème touche alors l’orientation, la comparaison et la progression, pas seulement l’esthétique.

• Le but doit être reconnaissable avant les détails d’évaluation.
• La preuve doit rester associée à l’affirmation qu’elle étaye.
• Les trois formules doivent pouvoir être comparées selon une logique commune.
• La demande d’évaluation doit apparaître comme l’étape principale de la page.

Les schémas en F, en Z ou en «couches» ne doivent pas devenir des gabarits automatiques. Le balayage varie avec la tâche, la langue, le contenu, la familiarité et la mise en page. Nielsen Norman Group a observé qu’une succession de sous-titres visibles et fidèles à leurs sections peut soutenir un balayage efficace. La bonne décision consiste donc à rendre les repères prévisibles, puis à vérifier leur efficacité dans la situation réelle, plutôt qu’à forcer chaque page dans une trajectoire oculaire supposée.

Que faut-il décider avant de styliser la page?

L’équipe doit formaliser un contrat de hiérarchie qui précise la priorité, les relations et au moins une séquence de lecture correcte lorsque l’ordre influence le sens. Pour notre page, le contrat est simple: aider l’acheteur à sélectionner une formule appropriée, placer chaque preuve de qualification avec l’affirmation concernée, rendre les trois offres comparables et faire de la demande d’évaluation l’action principale. Ce contrat reste stable même lorsque la largeur, le zoom ou le mode de lecture changent.

Trois décisions souvent confondues doivent être séparées. La priorité éditoriale indique ce qui mérite d’être compris d’abord. La structure programmatique exprime les titres, groupes, libellés et relations sans dépendre de la vue. Enfin, les signaux visuels rendent ces choix perceptibles. Selon le W3C, les titres et libellés doivent décrire leur sujet ou leur fonction; les structures importantes montrées visuellement doivent aussi être déterminables par programmation ou disponibles dans le texte. Un encadré coloré ne remplace donc pas une relation sémantique.

1. Orientez d’abord la personne vers le but de la page.
2. Présentez ensuite les preuves dans le contexte de ce qu’elles qualifient.
3. Gardez les attributs de chaque formule dans une séquence compréhensible.
4. Placez chaque action avec les informations nécessaires pour en prévoir l’effet.

L’ordre source doit rester cohérent lorsque les colonnes et les positions disparaissent. Si une qualification modifie la lecture d’une formule, elle ne devrait pas arriver après un bouton qui engage déjà la personne. Lorsque l’ordre affecte le sens, WCAG exige qu’au moins une séquence correcte soit déterminable par programmation. Cela n’impose pas un ordre rigide à toutes les régions: deux blocs réellement indépendants peuvent conserver plusieurs positions relatives valables, pour autant que leur contexte demeure intact.

Comment les signaux visuels doivent-ils révéler la hiérarchie?

Les signaux visuels doivent se renforcer mutuellement tout en exprimant les mêmes relations que les mots et la structure programmatique. Commencez par remplacer les titres génériques tels que «Informations» ou «Détails» par des formulations qui prédisent le contenu, par exemple «Choisir un niveau d’assistance» ou «Vérifier les conditions de qualification». Un sous-titre utile permet de décider si la section mérite une lecture attentive; une différence de taille sans promesse éditoriale claire ne produit qu’un contraste décoratif.

Adoptez ensuite une échelle typographique sobre, avec des rôles distincts plutôt qu’une accumulation de tailles. GOV.UK montre qu’il est possible d’adapter les dimensions sur petit écran tout en conservant les rôles nommés et un rythme vertical cohérent. Ses valeurs ne sont toutefois pas universelles. La police réelle, le français utilisé en Suisse, les autres langues et écritures du produit, la largeur disponible et les besoins observés doivent guider les essais. Un titre qui se fragmente maladroitement peut perdre son avantage malgré une échelle théoriquement régulière.

• Resserrez l’espace entre un titre et le contenu qui lui appartient.
• Augmentez la séparation entre deux groupes dont les fonctions diffèrent.
• Alignez les attributs comparables pour exposer les ressemblances et les écarts.
• Utilisez contenant et fond pour renforcer une relation déjà exprimée autrement.

Le W3C cite notamment la taille, la graisse, les espaces, l’indentation, les libellés, l’organisation tabulaire et les fonds parmi les indices visuels courants. Nielsen Norman Group ajoute l’échelle, la couleur, le placement et le contraste comme moyens de guider l’attention. Aucun de ces moyens ne détermine seul la bonne priorité métier. Le système d’espacement de GOV.UK illustre aussi une option utile: garder stables les petits écarts qui signalent la proximité, tout en réduisant certains grands écarts sur écran étroit, sans transformer ses valeurs en norme générale.

Comment distinguer les preuves, les choix et la prochaine action?

La page doit placer les preuves près de ce qu’elles étayent, organiser les choix selon une structure comparable et réserver l’accent principal à l’action de niveau page. Dans la vue large corrigée, le but de la sélection occupe l’ouverture. Les éléments de qualification se trouvent à côté de l’affirmation concernée. Les trois formules forment une seule région nommée, et leurs attributs apparaissent dans le même ordre. L’acheteur compare ainsi des éléments équivalents sans devoir reconstruire mentalement le modèle de chaque offre.

Cette cohérence ne justifie pas d’inventer une formule «recommandée» sans preuve issue de la tâche. Les actions propres aux offres peuvent avoir un poids comparable lorsqu’elles représentent de véritables alternatives. Elles doivent néanmoins se distinguer des liens vers des informations complémentaires et de l’action globale «Demander une évaluation». Les recommandations de GOV.UK demandent des libellés qui décrivent l’action et mettent en garde contre plusieurs actions principales également saillantes. Le principe utile est la clarté des rôles, pas une règle absolue imposant un seul bouton.

• Nommez l’action par son résultat attendu, plutôt que par «Continuer» ou «En savoir plus».
• Conservez les mêmes attributs et le même ordre pour les trois formules.
• Rattachez chaque référence ou condition à l’affirmation qu’elle qualifie.
• Gardez les liens complémentaires visibles sans leur donner le poids de la demande d’évaluation.

Une preuve secondaire est moins prioritaire, mais elle n’est pas dispensable. Elle peut être condensée ou placée dans un dévoilement progressif si la personne peut toujours la trouver, comprendre à quelle formule elle se rapporte et utiliser le mécanisme d’ouverture. Vérifiez aussi la page en vues étroite, zoomée et linéarisée. Si un encart de preuve se retrouve loin de son offre, si les en-têtes de comparaison disparaissent ou si chaque bouton semble principal, la redistribution a rompu le contrat malgré une présentation techniquement ordonnée.

Quelles opérations responsives préservent le sens?

Les opérations utiles sont conserver, empiler, déplacer, condenser et dévoiler, chacune sous condition de préserver l’information, la fonctionnalité, les relations et la priorité de la tâche. Partez d’une base étroite en une colonne, puis ajoutez une disposition plus large seulement si elle améliore la comparaison des formules ou l’association des preuves. Le Design System de GOV.UK applique cette approche et limite aussi la largeur du texte sur ordinateur; sa grille et ses mesures restent toutefois des exemples propres à ce système.

• Conservez une région si son contenu, ses relations et son rôle survivent tels quels.
• Empilez des régions indépendantes ou correctement séquencées lorsqu’elles restent compréhensibles sur un axe.
• Déplacez une région uniquement si sa séquence, ses libellés, ses valeurs et ses actions gardent leur contexte.
• Condensez une présentation répétitive sans retirer une information ou une fonctionnalité essentielle.
• Dévoilez progressivement un détail lorsque le déclencheur, le contenu associé et leur utilisation restent clairs.

WCAG demande, dans les conditions de son critère de redistribution, que l’information et la fonctionnalité restent disponibles sans défilement bidimensionnel évitable. De nombreuses pages de lecture peuvent donc empiler leurs régions sur une colonne, à condition que chacune reste compréhensible et utilisable. Les composants complexes peuvent exiger une transformation fonctionnelle plutôt qu’un empilement naïf. Une table dont les deux dimensions sont essentielles à la comparaison mérite, par exemple, un traitement adapté; la réduire mécaniquement en cartes peut masquer les correspondances qu’elle devait précisément rendre visibles.

Ne laissez pas la position gauche-droite de la maquette large dicter automatiquement la pile. Si le sens dépend de l’ordre, le repositionnement doit préserver au moins une séquence correcte déterminable par programmation. Examinez également ce qui précède chaque action après le déplacement: un bouton peut rester présent tout en perdant le prix, la condition ou la preuve nécessaire à sa compréhension. La bonne opération est celle qui conserve le raisonnement de la personne, non celle qui produit le moins de travail dans le système de composants.

La hiérarchie responsive n’est pas l’ordre dans lequel les boîtes se replient, mais celui dans lequel le sens survit.

Comment auditer et gouverner la hiérarchie?

L’audit doit reprendre les quatre questions dans les vues large, étroite, zoomée et linéarisée, puis vérifier le résultat avec des tâches représentatives. Commencez sur la page large sans expliquer l’intention du design. Demandez à la personne chargée de la revue d’indiquer le but de la page, la preuve de qualification pertinente, les trois formules et l’action de demande d’évaluation. Une réponse hésitante signale déjà un écart entre la composition et le contrat, même si chaque module paraît correctement réalisé.

Répétez ensuite l’exercice dans les autres présentations. Cherchez une perte de contenu ou de fonctionnalité, un défilement sur deux axes, une preuve séparée de son sujet, une comparaison brisée, des actions concurrentes ou une prochaine étape enfouie. Examinez la séquence déterminable par programmation indépendamment de l’apparence. Les titres décrivent-ils leurs sections? Les libellés, valeurs, preuves et actions conservent-ils leur contexte? La revue doit cibler les ordres qui modifient le sens, car des régions indépendantes peuvent admettre plusieurs séquences relatives.

1. Observer si des acheteurs représentatifs comprennent rapidement le but de la page.
2. Vérifier s’ils trouvent la preuve correspondant à leur situation.
3. Noter comment ils comparent les attributs nécessaires des trois formules.
4. Constater s’ils atteignent la demande d’évaluation sans confusion évitable.
5. Enregistrer chaque échec contre une clause précise du contrat de hiérarchie.

Transformez les échecs récurrents en règles de modèle de contenu, de gabarit, de composant, de revue et de mise en production. La conformité WCAG demeure une exigence d’accessibilité lorsqu’elle s’applique, mais elle ne prouve pas à elle seule que les personnes comprennent la page ou accomplissent la tâche métier. La règle de gouvernance peut tenir en une phrase: toute décision de hiérarchie doit pouvoir être défendue par le contrat, une tâche représentative et un résultat observé, jamais par le goût seul. Faites intervenir des spécialistes de l’accessibilité ou de la recherche lorsque l’équipe ne sait pas évaluer une relation ou un comportement responsive avec suffisamment de confiance.