Le Journal d'UX
L'actualité UX,
au-dessus de la ligne de flottaison.
Wiki UX Onglets (*Tabs*)

Onglets (*Tabs*)

Composant
Définition

Composant de navigation qui organise le contenu en panneaux mutuellement exclusifs, accessibles via des labels alignés horizontalement. Un seul panneau est visible à la fois. L'onglet actif se distingue visuellement des autres par un indicateur (bordure, fond, couleur). Les onglets permettent de structurer une quantité importante d'information dans un espace restreint. Ils conviennent aux contenus de même niveau hiérarchique et de même nature.

En pratique

Le nombre d'onglets ne doit pas dépasser six ou sept pour rester lisible. Les labels doivent être courts (un ou deux mots) et suffisamment distincts pour que l'utilisateur sache où trouver ce qu'il cherche. La navigation clavier requiert les flèches gauche/droite entre les onglets et Tab pour entrer dans le panneau. Les onglets ne doivent pas servir de navigation entre pages différentes. Sur mobile, les onglets débordant de l'écran deviennent scrollables horizontalement.

Exemple

Google Maps utilise des onglets sur les fiches de lieux : Vue d'ensemble, Avis, À propos. Chaque onglet charge son contenu sans rechargement de page, avec un indicateur animé sous l'onglet actif.

Voir aussi
Architecture de l'information (*Information Architecture*)
Charge cognitive (*Cognitive Load*)
Loi de Miller (*Miller's Law*)
Accordéon (*Accordion*)
Sources
Tabs - Nielsen Norman Group
Tabs Pattern - WAI-ARIA
Le Journal d'UX est un média indépendant sur l'expérience utilisateur. Liens curatés, wiki UX en français, communauté.