Hiérarchie du contenu dans l'IU

1) Pourquoi une hiérarchie est nécessaire

• répond à trois questions en 3 à 5 secondes : qu'est-ce que c'est ? → qu'est-ce qui compte ? → que faire ?;
• rend l'interface prévisible et facile à scanner ;
• réduit les erreurs et augmente la conversion.

Principes : signaux> bruit, séquence> variété, contexte> règles absolues.

2) Niveaux d'importance et structure

1. Contexte de navigation (marque, section, miettes/miettes de pain).

2. H1 est la cible de l'écran (aussi courte que possible, verbe si nécessaire).

3. Lead/sous-titre (une ligne d'avantages ou de statut).

4. Actions primaires (1-2 CTA clés).

5. Données primaires (principaux KPI, cartes de première ligne).

6. Données secondaires (pièces, filtres, tableaux auxiliaires).

7. Meta/Aide (conseils, notes, texte juridique).

Règle : sur un écran - un H1, pas plus de deux CTA primaires.

3) Typographie et rythme

Échelle de police : H1 28-32, H2 22-24, H3 18-20, body 14-16, micro 12 (px/pt équivalent dans le web).
Intervalles inter-lignes : 1. 3–1. 5 pour le body, 1. 2–1. 3 pour les titres.
Rythme d'indentation : multiple de l'unité de base (4/8 px). Zagolovok↔blok : 16-24 ; paragraphes 8 à 12.
Contraste : minimum WCAG AA ; le titre est toujours plus contrasté que les signatures/meta.
Couleur vs poids : la couleur est un accent, pas une « béquille » au lieu de la taille/graisse.

4) Grille et mise en page

Grille de 12 colonnes (desktop )/4-6 (mobile) avec gatters fixes.
Visually first = first in DOM : aide les lecteurs d'écran et SEO.
Axe de lecture : de gauche à droite (LTR) ou de droite à gauche (RTL) - Miroir de l'ordre des signaux.
« Zones d'attention » : haut gauche/centre - en-tête et en-tête ; « bande d'action » - près/en dessous.

5) Signaux visuels de priorité

La taille et le poids (typographie) sont le signal primaire.
Position (supérieure/gauche = plus importante dans LTR).
Couleur (accent pour CTA, statuts - par palette fixe).
Iconographie (seulement comme support pour le texte).
Retrait/cadre (la carte avec un grand « air » est plus importante).
Dynamique (animation ≤ 200 ms pour attirer l'attention sans irritation).

6) Divulgation progressive

• Above the fold n'est que le contexte, le but et l'action primaire.
• Les partitions accordéons/tabs sont des données secondaires.
• Détail par clic (drill-down) : carte → panneau → modal.
• Des indices inline au lieu de « helps » surchargés.
• Les squelettes/placcholders conservent la structure pendant la durée du chargement.

7) Hiérarchie dans les écrans types

7. 1 Dashboard

H1 + filtre temporel en haut.
La bande KPI (3-5 cartes) est la première ligne.
Graphiques/tableaux - deuxième ligne, trier/filtrer côte à côte.
Anomalies/alertes - colonne/ruban séparé, ne pas mélanger avec KPI.

7. 2 Catalogue/lobby

H1 + filtres/puces rapides.
Trier plus près du titre, CTA « Jouer/Acheter » dans la carte.
Étiquettes (nouveau/haut/jackpot) - visuellement secondaires par rapport au nom.

7. 3 Carte d'entité (jeu/produit)

Zone héros : titre (H1), faits clés (RTP/volatilité/notation), CTA primaire.
Les détails : les feuilles encartées "la Description / les Caractéristiques / les Rappels".
Métadonnées : étiquettes et texte juridique - en bas.

7. 4 Formulaires/Maîtres

Titre de l'étape + bref lead (« 2 minutes, carte non débitée »).
Ordre des champs par fréquence/obligatoire.
CTA droite/bas, actions auxiliaires - liens bas/gauche.
Les erreurs sont près du champ, brèves et sur l'affaire.

8) Hiérarchisation des états

• Normal → Téléchargement → Succès/Vide → Erreur.
• Dans le chargement - garder le squelette (squelettes), CTA ne saute pas.
• Dans l'erreur - H1 change en « ce qui s'est passé », CTA - « répéter/contacter ».

9) Tokens de contenu et système de conception

• `font. heading. xl`, `font. body. md`, `space. 200`, `radius. md`, `elevation. sm`.
• Rôles de texte : 'text. title`, `text. lead`, `text. secondary`, `text. meta`, `text. helper`.
• Rôles de couleur : 'accent/neutre/success/warn/danger' + « niveaux » (100-900).
• Composants : 'KPI. Card/Section. Title/Inline. Help/Meta. Line`.

10) Mesure et qualité

• Scan Time (médiane jusqu'au premier clic/action significatif).
• Focus Order Errors (combien de fois l'utilisateur est « raté » par le regard).
• CTA Visibilité % (combien ont vu CTA vs cliqué).
• INP/CLS (la hiérarchie ne doit pas « sauter » au démarrage).
• A/B : Plus grand que H1 vs plus fort contraste ; filtres à puce en haut vs dans la barre latérale.

• `first_focus_target`, `primary_cta_exposed/clicked`, `section_collapse_toggle`, `help_shown`.

11) Pratiques pour iGaming (exemple)

Lobby Casino : H1 « Lobby », puces « New/Live/Jackpots/Favoris », puis tuiles. Dans chaque carte - le nom, l'icône du fournisseur, CTA « Jouer » ; les étiquettes « nouveau/jackpot » sont secondaires.
Dashboard de l'opérateur : la première ligne est NGR/GGR/DAU/CR, la deuxième est les tendances et les anomalies, la troisième est les tableaux.
Étape de paiement : H1 « Rechargement », lead « Pas de commission, instantanément », liste des méthodes de conversion, minimum de métatexte en haut.

12) Anti-modèles

Dix accents identiques sur l'écran (« cri visuel »).
Titres comme images/icônes sans texte (brise l'accessibilité et la recherche).
« Résultats en petits caractères » et notifications par des bannières géantes.
Liens auxiliaires à côté du CTA primaire du même poids visuel.
Ordre incohérent : aujourd'hui « filtres d'en haut », demain « à gauche ».

13) Chèque de mise en œuvre

1. Définissez la cible de l'écran (H1 + 1-2 de l'action primaire).
2. Marquer les niveaux : primaire/secondaire/meta ; Fixer dans les tokens DS.
3. Assemblez l'échelle de la typographie et le rythme de base des retraits.
4. Déboguer les états (téléchargement/vide/erreur) sans sauts de STA/en-têtes.
5. Faites un « scan test » de 5 min avec 3-5 personnes : ce que vous avez remarqué, où vous avez cliqué.
6. Connectez la télémétrie (exposition CTA, scan time, focus order).
7. Fixez le modèle dans les heidlines avec des exemples « avant/après ».

14) Résultat

La hiérarchie du contenu n'est pas une « grande police pour le maître », mais un système de solutions : typographie, grille, couleur, rythme de retrait, ordre dans les DOM et comportement dans différents états. Lorsque chaque niveau a son rôle et son poids - l'interface devient compréhensible, rapide et prévisible, et les utilisateurs sont sûrs de leurs actions.