Onglets vs. Contrôle segmenté
Les onglets permettent de passer d'une section de contenu à une autre. Un contrôle segmenté change un petit mode, filtre ou valeur dans la même vue.
Utilisez des onglets pour des sections de contenu séparées. Utilisez un contrôle segmenté pour quelques choix courts qui modifient le même contenu.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Onglets
Les onglets utilisent des étiquettes pour changer le contenu dans un panneau partagé. La tâche principale reste ouverte.
Vue d'ensemble, Activité et Autorisations modifient le panneau ci-dessous tandis que le même projet reste ouvert.
- Utilisez-le lorsque
- Utilisez des onglets pour quelques sections au même niveau lorsque leurs étiquettes doivent rester visibles.
- Ne l'utilisez pas lorsque
- N'utilisez jamais les onglets comme de petits liens vers des pages qui n'ont rien à voir les unes avec les autres.
- Nom utilisé dans le code
role="tablist"
Groupe de bascule
Un groupe étiqueté de boutons à activer ou désactiver. Une ou plusieurs options séparées peuvent rester enfoncées.
Un éditeur de texte laisse le Gras et l'Italique rester activés en même temps. Chaque bouton indique s'il est enfoncé.
- Utilisez-le lorsque
- Utilisez-le pour quelques petits modes réversibles dont les états actuels doivent rester visibles.
- Ne l'utilisez pas lorsque
- Utilisez des boutons radio lorsque exactement un choix peut être soumis. Utilisez des cases à cocher pour les choix normaux du formulaire.
- Nom utilisé dans le code
button[aria-pressed] in a labeled group
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| OngletsTabs | Utilisez des onglets pour quelques sections au même niveau lorsque leurs étiquettes doivent rester visibles. | N'utilisez jamais les onglets comme de petits liens vers des pages qui n'ont rien à voir les unes avec les autres. | role="tablist" |
| Groupe de basculeToggle Group | Utilisez-le pour quelques petits modes réversibles dont les états actuels doivent rester visibles. | Utilisez des boutons radio lorsque exactement un choix peut être soumis. Utilisez des cases à cocher pour les choix normaux du formulaire. | button[aria-pressed] in a labeled group |
Avant d'expédier
- 01
Écrivez ce que la personne doit faire.
- 02
Tester le clavier, la mise au point, le toucher, le zoom, le chargement, les états vides et d'erreur.
- 03
Assurez-vous que les gens peuvent obtenir les mêmes informations sans survol ni mouvement.
- 04
Tester avec du contenu réel sur les petits et grands écrans.
Demande de comparaison que vous pouvez copier
Copiez ceci lorsque votre équipe a besoin d'aide pour choisir entre les modèles.
Choisissez le meilleur modèle parmi Onglets (Tabs), Groupe de bascule (Toggle Group) pour notre flux utilisateur réel. Utilisez cette règle : Les onglets permettent de passer d'une section de contenu à une autre. Un contrôle segmenté change un petit mode, filtre ou valeur dans la même vue. Notez la tâche, la quantité de contenu et le coût d'arrêt du flux. Vérifiez le clavier, le toucher, le chargement, l'erreur et le comportement à mouvement réduit. Expliquez votre choix, puis construisez la plus petite version accessible avec le système de conception du projet.