Système d'onglets UI

Que fait Système d'onglets UI ?

Objectif

Le Système d'onglets UI fournit une méthodologie pour concevoir et structurer des onglets—des éléments de navigation qui permettent aux utilisateurs de basculer entre des panneaux de contenu connexes dans le même contexte. Les onglets sont un motif clé pour la divulgation progressive, aidant à réduire la charge cognitive en organisant l'information en groupes logiques sans nécessiter un rechargement de page. Une approche systématique garantit que les onglets ont des états actifs clairs, un regroupement logique et s'adaptent gracieusement sur tous les appareils.

Cas d'utilisation

• Pages de détail produit : Organiser les spécifications, avis, détails de livraison et FAQ en sections consultables.
• Paramètres de compte : Regrouper le profil utilisateur, la sécurité, les notifications et les paramètres de facturation.
• Tableaux de bord : Basculer entre différentes vues de données (par exemple, « Aperçu », « Analyses », « Historique »).
• Résultats de recherche : Filtrer les résultats par type (par exemple, « Tout », « Images », « Vidéos », « Actualités »).
• Formulaires complexes : Décomposer les grands formulaires en sections thématiques (si les étapes n'ont pas besoin d'être complétées dans un ordre strict).

Quand ne PAS utiliser

• Étapes séquentielles : Si l'utilisateur doit compléter le contenu dans un ordre spécifique, utilisez plutôt step-progress-system.
• Navigation globale : Les onglets doivent gérer le contenu à l'intérieur d'une page ; utilisez site-navigation-system pour passer d'une page à l'autre.
• Comparaison d'informations : Si un utilisateur doit voir le contenu de deux sections simultanément, n'utilisez pas d'onglets. Envisagez un accordéon ou une disposition côte à côte.
• Trop peu d'éléments : S'il n'y a que deux éléments et que le contenu est court, envisagez d'afficher les deux ou d'utiliser un simple bouton à bascule.
• Trop d'éléments : Si vous avez plus de 6-7 onglets, l'interface devient encombrée. Envisagez une navigation latérale ou un filtre basé sur un menu déroulant.

Entrées

1. Inventaire de contenu : Une liste d'étiquettes et leurs panneaux de contenu correspondants.
2. Contexte d'utilisation : Où les onglets seront situés (par exemple, zone de contenu principale, barre latérale ou dans une modale).
3. Niveau de priorité : Est-ce le focus principal de la page ou un détail secondaire ?
4. Systèmes existants : Espacement fluide, échelles typographiques et définitions d'état interactif.

Sorties

1. Spécification d'anatomie des onglets : Définitions visuelles pour les Déclencheurs (les onglets), la Liste d'onglets (le conteneur) et les Panneaux (le contenu).
2. Matrice d'état : Traitements visuels définis pour les états Défaut, Survol, Actif, Focus et Désactivé.
3. Stratégie réactive : Règles pour gérer le débordement (défilable, enveloppé, ou réduit en accordéon/sélecteur).
4. Plan d'accessibilité : Rôles ARIA, mappage du clavier et règles de gestion du focus.

Workflow

1. Définir la relation de contenu

Assurez-vous que tous les onglets sont au même niveau hiérarchique et se rapportent à la même entité parente. Les étiquettes doivent être courtes (1-3 mots) et utiliser une casse cohérente.

2. Établir l'anatomie visuelle

Appliquez le visual-hierarchy-system pour définir la liste d'onglets :

• L'onglet actif : Doit être le plus proéminent. Utilisez une combinaison de couleur, de poids de police et d'un indicateur visuel (comme une bordure inférieure ou un remplissage d'arrière-plan).
• L'onglet inactif : Doit sembler interactif mais secondaire.
• Le panneau de contenu : Partage généralement un conteneur visuel ou un alignement avec l'onglet actif pour créer une sensation de « connexion ».

3. Définir la logique d'interaction

• Basculement immédiat : Le contenu doit changer instantanément lors de l'interaction.
• Survol vs. Clic : Les onglets ne doivent jamais basculer au survol ; ils nécessitent un clic ou un tap explicite.
• État par défaut : Le premier onglet est généralement actif par défaut, sauf si l'utilisateur revient à un état spécifique.

4. Optimiser pour l'espacement et le toucher

Appliquez fluid-spacing-system et interactive-state-system :

• Cibles tactiles : Chaque déclencheur d'onglet doit respecter la WCAG 2.2 SC 2.5.8 (minimum 24x24px) ; préférez 44x44px pour les interfaces à onglets principaux.
• Écarts internes : Utilisez un espacement cohérent entre les onglets (généralement --space-s ou --space-m).
• Indicateur actif : Assurez-vous que la ligne ou l'arrière-plan « Actif » est suffisamment épais pour être vu clairement.

5. Planifier la réactivité

Déterminez comment la liste d'onglets gère les fenêtres étroites :

• Défilement horizontal : Le motif mobile le plus courant. Permettez à la liste d'onglets de déborder horizontalement avec un léger fondu ou une flèche pour indiquer plus de contenu.
• Transformation en accordéon : Pour un contenu long, transformez les onglets en une mise en page accordéon sur mobile.
• Menu de sélection : Pour les onglets à forte utilité, remplacez la liste d'onglets par un élément <select> sur mobile.

Règles de décision

• La règle des « étiquettes » : Si les étiquettes varient considérablement en longueur, utilisez des onglets alignés à gauche. Si elles sont cohérentes et peu nombreuses, utilisez des onglets centrés ou justifiés.
• Horizontal vs. Vertical :
  • Horizontal : Standard pour l'organisation en haut du contenu.
  • Vertical : Meilleur pour les listes profondes (paramètres) ou lorsque l'espace horizontal est limité mais que l'espace vertical est abondant.
• La règle des « Sept » : Limitez les onglets horizontaux à 7 éléments. Si vous en avez besoin de plus, réévaluez votre architecture d'information ou utilisez une disposition verticale.
• Indicateur actif : Utilisez toujours plus que la simple couleur pour indiquer l'état actif (par exemple, un soulignement de 2 à 3 pixels ou un changement de poids de police en gras).

Contraintes

• Accessibilité : Suivez le modèle ARIA APG Tabs — role="tablist" sur le conteneur, role="tab" avec aria-selected et aria-controls sur chaque déclencheur, et role="tabpanel" avec aria-labelledby pointant vers son onglet. Seul l'onglet actif a tabindex="0" ; les onglets inactifs utilisent tabindex="-1" (tabindex circulant).
• Modèle d'activation : Préférez l'activation automatique (les touches fléchées déplacent le focus et changent le contenu du panneau immédiatement) pour des panneaux rapides et légers. Utilisez l'activation manuelle (les touches fléchées déplacent uniquement le focus ; Entrée/Espace confirme) si le basculement déclenche une requête réseau coûteuse.
• Navigation au clavier : Les flèches gauche/droite (ou haut/bas pour les onglets verticaux) se déplacent entre les onglets ; Début/Fin sautent au premier/dernier onglet ; Tab déplace le focus hors de la liste d'onglets vers le panneau actif.
• Contraste : Les états Actif et Inactif doivent respecter WCAG AA (4,5:1 pour le texte).
• Réactivité : Les onglets ne doivent jamais provoquer de défilement horizontal de la page ; la liste d'onglets elle-même doit gérer le débordement.

Schémas d'échec courants

• État actif caché : Utilisation d'un changement de couleur subtil difficile à voir, laissant les utilisateurs incertains de la section qu'ils consultent.
• Saut de contenu : Panneaux d'onglets dont la hauteur varie considérablement, provoquant le saut du pied de page vers le haut et vers le bas lorsque les utilisateurs changent d'onglet.
• Utilisation abusive pour la navigation : Utilisation d'onglets pour créer des liens vers des pages séparées, ce qui brise les attentes des utilisateurs pour un changement de contenu instantané.
• Troncature mobile : Coupure des étiquettes d'onglets sur mobile sans offrir de moyen de voir le reste.
• États de focus manquants : Oubli de concevoir un anneau de focus visible pour les utilisateurs de clavier.

Critères de validation

• Tous les onglets sont liés au même contexte.
• L'état actif est visuellement distinct (plus que la simple couleur).
• Chaque déclencheur d'onglet respecte au moins le minimum de 24x24 pixels pour les cibles tactiles de la WCAG 2.2 (44x44 pixels préféré).
• Les rôles ARIA (tablist, tab, tabpanel) sont correctement attribués, avec aria-selected et tabindex circulant implémentés.
• La navigation au clavier (touches fléchées, Début/Fin) est prise en charge conformément au modèle ARIA APG Tabs.
• Le comportement réactif (défilement, accordéon, ou sélecteur) est défini.
• Les panneaux de contenu maintiennent une relation visuelle cohérente avec les onglets.