Choisir et tester des onglets dans une interface web

Vérifier que les panneaux appartiennent au même objet

Nommez l’objet commun : une fiche produit, un dossier ou un résultat. Les intitulés décrivent ensuite des vues distinctes de cet objet. Si les titres deviennent une liste de services sans lien entre eux, il s’agit probablement davantage de navigation que d’onglets.

Décidez comment partager une vue, revenir après un rechargement et imprimer les données. Une présentation compacte ne doit pas rendre une information introuvable depuis un lien externe. Pour des offres à comparer, vérifiez que masquer les autres panneaux ne force pas à mémoriser des caractéristiques nombreuses.

Choisir une activation adaptée au chargement

Le modèle d’onglets W3C distingue le déplacement entre onglets et leur activation. L’activation automatique convient lorsque le panneau apparaît sans délai perceptible ; une activation manuelle évite de lancer un chargement à chaque déplacement. L’état sélectionné doit rester distinct du simple focus.

Précisez le comportement quand une requête échoue. Le titre du panneau, une information d’attente et une possibilité de reprise permettent de comprendre l’état. N’affichez pas les anciennes données sous un nouvel intitulé sans signaler qu’elles ne correspondent pas encore à la vue demandée.

Préserver les champs et la position de lecture

Un changement de panneau ne doit pas supprimer des données saisies sans explication. Définissez ce qui reste enregistré localement dans le formulaire et ce qui a réellement été sauvegardé. Si l’utilisateur doit abandonner un changement, une décision explicite vaut mieux qu’une perte silencieuse.

Sur mobile, les intitulés doivent rester accessibles sans que l’utilisateur confonde défilement et changement de vue. Essayez une traduction longue, un zoom et une liste de cinq onglets. Si cette présentation devient difficile, une page avec sections et sommaire peut rester plus simple à maintenir.

Exemple : consulter puis modifier une fiche

Exemple pédagogique : « Résumé », « Historique » et « Documents » concernent le même dossier. Consulter l’historique ne modifie pas le dossier. Un formulaire dans le résumé conserve ses valeurs lorsqu’on ouvre les documents ; une commande distincte enregistre les changements. Le test sépare sélection du panneau, données provisoires et confirmation de sauvegarde.