La hiérarchie visuelle (taille, contraste, espacement) guide l'œil et structure la lecture des écrans. F-pattern, zones chaudes et ordre d'attention appliqués au design system.
Les utilisateurs scannent les pages selon des patterns (F, Z). La taille (titres > sous-titres > corps) et le contraste (couleur, graisse) créent les niveaux. L'espacement groupe les blocs et aère. Pour les interfaces et les design systems, une hiérarchie claire améliore la compréhension et la conversion. Les principes Nielsen (visibilité, feedback) et les recommandations WCAG (contraste) complètent le cadre. En Figma et en code (tokens, typo), la hiérarchie doit être cohérente sur tout le produit.
Conseil : définir une échelle typographique et des couleurs sémantiques (primary, secondary, muted).
Points forts / Points faibles
Points forts
- Lecture et compréhension améliorées
- Alignement avec les recherches UX (Nielsen)
- Applicable en design et en code
- Impact sur la conversion et la clarté
Points faibles
- Dépend du contexte (culture, public)
- À combiner avec l'accessibilité (contraste)
- Tests utilisateur pour valider