Alors, quelle est la différence entre une liste déroulante, une sélection multiple, une liste déroulante et une liste déroulante ? Bien que tous ces composants d’interface utilisateur puissent sembler similaires, ils répondent à des objectifs différents. Le choix se résume souvent au nombre d’options disponibles et à leur visibilité. Voyons en quoi ils diffèrent, à quoi ils servent et comment choisir le bon, en évitant les malentendus et les mauvaises attentes en cours de route.
Tous les modèles de liste ne sont pas identiques Tous les composants d’interface utilisateur présentés ci-dessus ont exactement une chose en commun : ils prennent en charge les interactions des utilisateurs avec les listes. Cependant, ils le font légèrement différemment. Jetons un coup d'œil à chacun, un par un :
La liste déroulante → est masquée jusqu'à ce qu'elle soit déclenchée. Combobox → tapez pour filtrer + sélectionnez 1 option. Sélection multiple → tapez pour filtrer + sélectionnez de nombreuses options. Listbox → toutes les options de la liste visibles par défaut (+ défilement). Double listbox → déplacer les éléments entre 2 listbox.
En d'autres termes, Combobox combine un champ de saisie de texte avec une liste déroulante, afin que les utilisateurs puissent taper pour filtrer et sélectionner une seule option. Avec Multiselect, les utilisateurs peuvent sélectionner de nombreuses options (souvent affichées sous forme de pilules ou de chips). Les zones de liste affichent toutes les options de liste visibles par défaut, souvent avec défilement. C’est utile lorsque les utilisateurs ont besoin de voir immédiatement tous les choix disponibles. La double listbox (également appelée liste de transfert) est une variante d'une listbox qui permet aux utilisateurs de déplacer des éléments entre deux listbox (gauche ↔ droite), généralement pour une sélection groupée. Ne cachez jamais les options fréquemment utilisées Comme mentionné ci-dessus, le choix du bon composant d'interface utilisateur dépend de 2 facteurs : le nombre d'options de liste disponibles et si toutes ces options doivent être visibles par défaut. Toutes les listes peuvent également avoir des arborescences, une imbrication et une sélection de groupes.
Il y a un principe que je suis depuis des années pour tout composant de l’interface utilisateur : ne jamais masquer les options fréquemment utilisées. Si les utilisateurs s’appuient fréquemment sur une sélection particulière, il est très peu utile de la leur cacher. Nous pourrions soit le présélectionner, soit (s'il n'y a que 2 à 3 options fréquemment utilisées) les afficher sous forme de puces ou de boutons, puis afficher le reste de la liste sur l'interaction. En général, c'est une bonne idée de toujours afficher les options populaires, même si cela peut encombrer l'interface utilisateur. Comment choisir lequel ? Toutes les listes ne nécessitent pas une méthode de sélection complexe. Pour les listes contenant moins de 5 éléments, de simples boutons radio ou cases à cocher fonctionnent généralement mieux. Mais si les utilisateurs ont besoin de choisir parmi une grande liste d'options (par exemple, plus de 200 éléments), combobox + multiselect sont utiles en raison du filtrage plus rapide (par exemple, sélection de pays).
Les zones de liste sont utiles lorsque les utilisateurs doivent accéder à plusieurs options à la fois, en particulier s'ils doivent également choisir plusieurs options dans cette liste. Ils pourraient être utiles pour les filtres fréquemment utilisés.
La double listbox est souvent négligée et ignorée. Mais cela peut être très utile pour des tâches complexes, par exemple une sélection groupée ou l'attribution de rôles, de tâches ou de responsabilités. It’s the only UI component that allows users to review their full selection list side-by-side with the source list before committing (also called “Transfer list”). En fait, la double listbox est souvent plus rapide, plus précise et plus accessible que le glisser-déposer. Considérations relatives à la convivialité Une remarque importante à garder à l'esprit est que tous les types de listes doivent prendre en charge la navigation au clavier (par exemple, les touches fléchées ↑/↓) pour l'accessibilité. Certaines personnes s'appuieront presque toujours sur le clavier pour sélectionner les options une fois qu'elles auront commencé à taper.
Au-delà de ça :
Pour les listes avec plus de 7 options, envisagez d'ajouter les fonctionnalités « Sélectionner tout » et « Effacer tout » pour rationaliser l'interaction des utilisateurs. Pour les longues listes avec une liste déroulante, exposez toutes les options aux utilisateurs en cliquant/appuyant, sinon elles pourraient ne jamais être vues, Plus important encore, n'affichez pas les éléments non interactifs sous forme de boutons pour éviter toute confusion, et n'affichez pas les éléments interactifs sous forme d'étiquettes statiques.
Conclusion : tout n'est pas une liste déroulante Les noms comptent. Une liste verticale d’options est généralement décrite comme une « liste déroulante », mais elle est souvent un peu trop générique pour être significative. « Dropdown » laisse entendre que la liste est masquée par défaut. « Multiselect » implique une multi-sélection (case à cocher) au sein d'une liste. « Combobox » implique la saisie de texte. Et « Listbox » est simplement une liste d’éléments sélectionnables, visibles à tout moment. Le but n’est pas d’être cohérent avec les définitions ci-dessus pour le plaisir. Mais plutôt pour aligner les intentions : parlez le même langage lors du choix, de la conception, de la construction, puis de l'utilisation de ces composants d'interface utilisateur. Cela devrait fonctionner pourtout le monde – concepteurs, ingénieurs et utilisateurs finaux – à condition que les étiquettes statiques ne ressemblent pas à des boutons interactifs et que les boutons radio n’agissent pas comme des cases à cocher. Découvrez les « Modèles de conception pour les interfaces IA » Découvrez les modèles de conception pour les interfaces AI, le nouveau cours vidéo de Vitaly avec des exemples pratiques de produits réels – avec une formation UX en direct bientôt disponible. Accédez à un aperçu gratuit. Découvrez Design Patterns For AI Interfaces, le cours vidéo de Vitaly sur la conception d’interfaces et l’UX.
Vidéo + Formation UXVidéo uniquementVidéo + Formation UX450,00 $ 799,00 $
Obtenez une vidéo + une formation UX30 leçons vidéo (10h) + une formation UX en direct.Garantie de remboursement de 100 jours.Vidéo uniquement275,00 $ 395,00 $
Bénéficiez du cours vidéo30 leçons vidéo (10h). Mis à jour chaque année. Également disponible sous forme de pack UX avec 3 cours vidéo.
Ressources utiles
Saisie semi-automatique : directives UX, par Vitaly Friedman Combobox, par eBay 👍 Combobox, par Elastic Combobox, par Elisa Combobox, par MongoDB 👍 Combobox, par Visa 👍 Combobox, par Watson (Docplanner) Combobox, par Wikimédia Combobox, par Zendesk Multisélection (MongoDB Combobox Design Docs), par MongoDB 👍 Recherche à sélection multiple, par Wikimedia Combo Box à sélection multiple, par Vaadin Multisélection, par Visa Transfert (exemple Listbox), par Ant Design Zone de liste, par Hopper Zone de liste, par Vaadin Listbox, par Visa Sélecteur de liste double, par Red Hat (PatternFly) Dual Listbox, par Salesforce (Lightning Design System) Liste des transferts, par Mantine Double Listbox, par Dashlite Badges contre pilules contre puces contre étiquettes, par Vitaly Friedman Zones de liste et listes déroulantes, par Anna Kaley (NN/g)
