Comparaison comportementale
Contrôle segmenté vs Onglets
Différence décisive
Le Contrôle segmenté sélectionne une valeur sans posséder de panneau ; les Onglets choisissent lequel de plusieurs panneaux de contenu est affiché.
Critères de choix, liens et sources
- Contrôle segmentéChoisis Contrôle segmenté si le choix est une valeur, comme un tri ou une unité, qui change la façon d’afficher le même contenu.Ouvrir la fiche Contrôle segmenté
- OngletsChoisis Onglets si chaque option affiche son propre panneau de contenu dans une zone commune.Ouvrir la fiche Onglets
Voir les neuf dimensionsVoir les sources
Changer de vue ou révéler du contenu
Essayer
Faut-il changer de vue, choisir un mode compact ou révéler du contenu dans le flux ?
Contrôle segmenté
Contexte commun aux essais
Un espace projet révèle du contenu associé sur place tout en conservant la position de l'utilisateur dans la page.
Contrôle segmenté
Mission
Contrôle segmenté - Segmented control
Choisir Compact au pointeur, puis Dense avec les flèches et vérifier qu’une seule valeur reste sélectionnée.
- Brief.pdf
- Budget.xlsx
- Notes.txt
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- Une seule densité d’affichage est active. Le segment sélectionné et l’espacement du contenu restent synchronisés.
- Cas limite
- Quand les libellés ne tiennent plus sans être coupés, l’interface emploie un contrôle à valeur unique plus adapté, comme Select.
Onglets
Mission
Onglets - Tabs
Passe le focus d’Aperçu à Fichiers avec les flèches, puis appuie sur Entrée pour afficher son panneau.
Résumé du projet et prochaines échéances.
Étape 1 sur 3
Essayer
Manipule le composant. Le résultat de ton essai apparaît juste au-dessus. Avance à ton rythme.
Comportement et cas limite
- À observer
- Un onglet sélectionné nomme le panneau visible, et les autres panneaux sont masqués de l'interaction.
- Cas limite
- Si un panneau charge sensiblement, l'activation devient manuelle afin que les flèches ne déclenchent pas des attentes répétées.
Ce que cet essai montre
Segmented control sélectionne une valeur ; Tabs sélectionne un panneau de contenu, tandis qu'Accordion développe ou replie des sections.
Lequel convient à ton besoin ?
Contrôle segmenté
Basculer entre quelques modes d'affichage compacts
Onglets
Regrouper quelques vues de même niveau
Différence et sources
Segmented control sélectionne une valeur ; Tabs sélectionne un panneau de contenu, tandis qu'Accordion développe ou replie des sections.
Consulter les sourcesParties du spécimen
Sélectionne un repère numéroté sur le schéma, ou utilise la liste ci-dessous, pour afficher son rôle. Le schéma montre l'état représentatif du concept.
Libellé du groupe
Un nom commun qui explique le choix représenté par le groupe.
Décision
Question de famille
Faut-il changer de vue, choisir un mode compact ou révéler du contenu dans le flux ?
Trois critères pour choisir
- Interactivité
Contrôle segmenté
Un seul segment est actif et la sélection d’un autre met la vue à jour immédiatement.
Onglets
Un onglet et son panneau sont actifs ; l’activation peut être automatique ou manuelle selon le coût de chargement.
- Positionnement
Contrôle segmenté
Une courte ligne d’options adjacentes dans la vue concernée.
Onglets
Une liste d’onglets directement adjacente au panneau contrôlé par l’onglet actif.
- Focus
Contrôle segmenté
Le groupe est un seul arrêt après sélection, avec un focus visible distinct de l'état sélectionné.
Onglets
La liste est un seul arrêt de tabulation ; le panneau visible est atteint dans l'ordre normal s'il contient des contrôles.
Neuf dimensions
- Déclenchement
Contrôle segmenté
Clic ou toucher sur un segment compact.
Onglets
Clic, toucher ou activation clavier d’un onglet ; les flèches circulent dans la liste.
- Modalité
Contrôle segmenté
Contrôle exclusif non modal pour un changement immédiat de vue ou de filtre.
Onglets
Navigation non modale entre des panneaux liés dans le même contexte.
- Positionnement
Contrôle segmenté
Une courte ligne d’options adjacentes dans la vue concernée.
Onglets
Une liste d’onglets directement adjacente au panneau contrôlé par l’onglet actif.
- Interactivité
Contrôle segmenté
Un seul segment est actif et la sélection d’un autre met la vue à jour immédiatement.
Onglets
Un onglet et son panneau sont actifs ; l’activation peut être automatique ou manuelle selon le coût de chargement.
- Focus
Contrôle segmenté
Le groupe est un seul arrêt après sélection, avec un focus visible distinct de l'état sélectionné.
Onglets
La liste est un seul arrêt de tabulation ; le panneau visible est atteint dans l'ordre normal s'il contient des contrôles.
- Fermeture
Contrôle segmenté
Sans objet : choisir un autre segment remplace la valeur sélectionnée.
Onglets
Sans objet : sélectionner un autre onglet remplace le panneau visible sans fermer le composant.
- Rôle accessible
Contrôle segmenté
radiogroup > radio
Onglets
tablist > tab + tabpanel
- Cas d’usage
Contrôle segmenté
Basculer entre quelques modes d'affichage compacts
Onglets
Regrouper quelques vues de même niveau
- Comportement mobile
Contrôle segmenté
Le limiter à quelques options courtes ; passer aux onglets ou au select avant que les libellés débordent.
Onglets
Garder les libellés lisibles dans une liste horizontale défilante ; éviter de répartir les onglets sur des lignes ambiguës.
| Dimension | Contrôle segmentéSegmented control | OngletsTabs |
|---|---|---|
| Déclenchement | Clic ou toucher sur un segment compact. | Clic, toucher ou activation clavier d’un onglet ; les flèches circulent dans la liste. |
| Modalité | Contrôle exclusif non modal pour un changement immédiat de vue ou de filtre. | Navigation non modale entre des panneaux liés dans le même contexte. |
| Positionnement | Une courte ligne d’options adjacentes dans la vue concernée. | Une liste d’onglets directement adjacente au panneau contrôlé par l’onglet actif. |
| Interactivité | Un seul segment est actif et la sélection d’un autre met la vue à jour immédiatement. | Un onglet et son panneau sont actifs ; l’activation peut être automatique ou manuelle selon le coût de chargement. |
| Focus | Le groupe est un seul arrêt après sélection, avec un focus visible distinct de l'état sélectionné. | La liste est un seul arrêt de tabulation ; le panneau visible est atteint dans l'ordre normal s'il contient des contrôles. |
| Fermeture | Sans objet : choisir un autre segment remplace la valeur sélectionnée. | Sans objet : sélectionner un autre onglet remplace le panneau visible sans fermer le composant. |
| Rôle accessible | radiogroup > radio | tablist > tab + tabpanel |
| Cas d’usage | Basculer entre quelques modes d'affichage compacts | Regrouper quelques vues de même niveau |
| Comportement mobile | Le limiter à quelques options courtes ; passer aux onglets ou au select avant que les libellés débordent. | Garder les libellés lisibles dans une liste horizontale défilante ; éviter de répartir les onglets sur des lignes ambiguës. |