Accordéon vs. Onglets
Un accordéon ouvre des sections dans une page et peut en garder plusieurs ouvertes. Les onglets montrent une section à la fois dans un espace commun.
Utilisez un accordéon pour les questions ou sections que les gens peuvent lire ensemble. Utilisez des onglets pour quelques vues séparées lorsqu'une seule importe à la fois.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Accordéon
Un accordéon empile des sections dont les titres peuvent ouvrir ou fermer leur propre contenu.
Accordéon
Un accordéon empile des sections dont les titres peuvent ouvrir ou fermer leur propre contenu.
Choisissez-le lorsque
Utilisez-le pour des sections optionnelles, chacune ayant un titre clair et distinct.
Une FAQ montre les questions en premier. On peut ouvrir une réponse sans quitter la page.
- Utilisez-le lorsque
- Utilisez-le pour des sections optionnelles, chacune ayant un titre clair et distinct.
- Ne l'utilisez pas lorsque
- Ne cachez jamais des informations courtes et essentielles uniquement pour rendre la page plus propre.
- Nom utilisé dans le code
<details><summary>
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"
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| AccordéonAccordion | Utilisez-le pour des sections optionnelles, chacune ayant un titre clair et distinct. | Ne cachez jamais des informations courtes et essentielles uniquement pour rendre la page plus propre. | <details><summary> |
| 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" |
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 Accordéon (Accordion), Onglets (Tabs) pour notre flux utilisateur réel. Utilisez cette règle : Un accordéon ouvre des sections dans une page et peut en garder plusieurs ouvertes. Les onglets montrent une section à la fois dans un espace commun. 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.