Menu déroulant vs. Sélecteur vs. Combobox
Un menu déroulant lance des actions. Un select permet de choisir dans une liste fixe. Un combobox te laisse aussi écrire ou chercher.
Utilisez un menu pour les actions. Utilisez une sélection pour une courte liste fixe. Utilisez une boîte combinée pour une liste longue ou consultable.
Voir ce que fait chaque modèle
Essayez chaque exemple. Puis lisez sur le travail pour lequel il a été conçu.
Menu déroulant & Menu contextuel — Pack d'apprentissage
Ce module d'apprentissage compare les menus selon la façon dont ils s'ouvrent. Un menu déroulant s'ouvre depuis un contrôle. Un menu contextuel appartient à un objet et s'ouvre souvent à l'emplacement du pointeur. Le module n'est pas un terme unique de menu.
DropdownMenu / ContextMenuLe bouton Plus ouvre des actions générales. Un clic droit sur un fichier ouvre des actions uniquement pour ce fichier.
- Utilisez-le lorsque
- Choisissez un menu dont le déclencheur et l'objet correspondent à la tâche. Ensuite, construisez le comportement de son clavier.
- Ne l'utilisez pas lorsque
- Ne mettez jamais de champs de formulaire ou la navigation principale du site dans un menu de commandes.
- Nom utilisé dans le code
DropdownMenu / ContextMenu
Sélectionner
Une liste déroulante ouvre une liste fixe et laisse l'utilisateur choisir une seule valeur.
Un champ de pays affiche une liste fixe et rejette les valeurs qui n'y sont pas.
- Utilisez-le lorsque
- Utilisez-le lorsque la liste est fixe, pas trop longue et que la page dispose de peu d'espace.
- Ne l'utilisez pas lorsque
- N'utilisez-le jamais pour une longue liste que les gens doivent chercher. Utilisez à la place une boîte combinée.
- Nom utilisé dans le code
<select> / role="listbox"
Combobox modifiable
Une liste déroulante modifiable est un champ texte relié à une liste qui se filtre au fur et à mesure de la frappe.
Tapez « Tai » pour afficher Taipei et Tainan. Puis utilisez les touches fléchées pour choisir.
- Utilisez-le lorsque
- Utilisez-le pour de longues listes consultables, l'autocomplétion, ou des choix permettant une réponse personnalisée.
- Ne l'utilisez pas lorsque
- Ne qualifiez jamais un menu simple ou un sélecteur natif de combobox simplement parce qu'ils fonctionnent différemment.
- Nom utilisé dans le code
role="combobox" + aria-controls
Comparaison rapide
| Modèle UI | Meilleur pour | Pas pour | Nom utilisé dans le code |
|---|---|---|---|
| Menu déroulant & Menu contextuel — Pack d'apprentissageDropdown & Context Menu — Learning Bundle | Choisissez un menu dont le déclencheur et l'objet correspondent à la tâche. Ensuite, construisez le comportement de son clavier. | Ne mettez jamais de champs de formulaire ou la navigation principale du site dans un menu de commandes. | DropdownMenu / ContextMenu |
| SélectionnerSelect | Utilisez-le lorsque la liste est fixe, pas trop longue et que la page dispose de peu d'espace. | N'utilisez-le jamais pour une longue liste que les gens doivent chercher. Utilisez à la place une boîte combinée. | <select> / role="listbox" |
| Combobox modifiableEditable Combobox | Utilisez-le pour de longues listes consultables, l'autocomplétion, ou des choix permettant une réponse personnalisée. | Ne qualifiez jamais un menu simple ou un sélecteur natif de combobox simplement parce qu'ils fonctionnent différemment. | role="combobox" + aria-controls |
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 Menu déroulant & Menu contextuel — Pack d'apprentissage (Dropdown & Context Menu — Learning Bundle), Sélectionner (Select), Combobox modifiable (Editable Combobox) pour notre flux utilisateur réel. Utilisez cette règle : Un menu déroulant lance des actions. Un select permet de choisir dans une liste fixe. Un combobox te laisse aussi écrire ou chercher. 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.