Meilleures pratiques de mise en œuvre de la liste déroulante de sélection multiple
De nombreux sites Web n'utilisent plus de listes déroulantes à sélection multiple, et la raison souvent citée par les praticiens UX est que cet élément d'interface utilisateur ne "teste pas bien" avec les utilisateurs. Un exemple de ce à quoi je fais référence est montré ici:
Ceci est remplacé par quelque chose de similaire à la façon dont les balises sont ajoutées dans UX StackExchange.
La première question est de savoir s'il existe de bonnes études de recherche qui peuvent ajouter un peu de poids à cela, car beaucoup de ces types d'observations sont difficiles à valider avec précision.
La deuxième question est de savoir si sa mauvaise utilisation perçue est due au fait que cet élément d'interface utilisateur est chargé avec trop d'interaction/d'informations, ou s'il n'est tout simplement pas utilisé de manière optimale.
Les problèmes que je peux voir avec la mise en œuvre sont:
- quantité d'espace disponible : afin de minimiser la quantité d'informations dont l'utilisateur doit se souvenir (c'est-à-dire ce qu'il a sélectionné), il est idéal d'afficher une zone séparée les sélections qu'ils ont faites, ce qui leur permet également de supprimer facilement la sélection. Cependant, il n'y a pas toujours beaucoup d'espace disponible comme dans le cas d'une application mobile.
- cohérence de l'interaction : un autre problème avec l'affichage de la liste sélectionnée dans une zone différente est que cette zone est souvent utilisée uniquement pour supprimer les éléments sélectionnés, ce qui signifie que vous séparez l'action d'ajout de l'action de suppression. Cela peut entraîner une incohérence dans l'interaction si, dans d'autres sections, les actions d'ajout et de suppression se produisent sur le même élément d'interface utilisateur.
- nombre d'éléments dans la liste déroulante : pour les longues listes déroulantes, il est beaucoup plus difficile de faire défiler vers le haut et vers le bas pour trouver les éléments de la liste qui ont déjà été sélectionnés ou que l'utilisateur souhaite sélectionner. Dans ce cas, un champ de recherche intelligent semble être beaucoup plus pratique, mais l'utilisateur peut ne pas être familier avec tous les éléments de la liste pour pouvoir le parcourir efficacement.
Mais peut-être y a-t-il encore des cas où il est pratique et plus approprié d'utiliser une liste déroulante ou une liste à sélection multiple?
Une question similaire a été posée il y a environ 1 an ( Composant de sélection multiple le plus intuitif pour le Web ) mais je ne pense pas qu'il y ait de solutions de conception d'interface utilisateur exceptionnelles (et j'espère que quelqu'un pourrait mettre en place une récompense pour cela) alors j'espère qu'il pourrait y avoir de nouvelles idées maintenant.
Réflexions sur les listes déroulantes:
Je pense que toutes les listes déroulantes, y compris les listes à sélection multiple, ont probablement atteint la fin de la ligne. Leur polyvalence s'est également avérée être leur talon d'Achille:
Les menus déroulants posent souvent plus de problèmes qu'ils n'en valent et peuvent être déroutants car les concepteurs Web les utilisent à différentes fins. De plus, les menus déroulants réduisent la convivialité lorsqu'ils empêchent les utilisateurs de voir toutes leurs options en un seul coup d'œil.
Il existe de nombreuses autres façons de permettre aux utilisateurs d'obtenir les mêmes résultats. une comparaison rapide ci-dessous suggère que la différenciation des contrôles où et quand cela est pertinent est essentielle pour réduire le besoin de listes déroulantes, gracieuseté de Luke Wroblewski.
Listes déroulantes à sélection multiple sur le bureau
Pour les listes déroulantes à sélection multiple sur le bureau, le premier modèle qui vient à l'esprit est la double liste qui offre non seulement un mécanisme de sélection mais aussi une visibilité constante de ce qui a été sélectionné. Une variante de ce modèle est une double liste hybride qui intègre un filtre pour éviter le défilement.
Alternative aux listes déroulantes à sélection multiple sur mobile
Les alternatives pour les listes déroulantes à sélection multiple sur mobile pourraient utiliser une simple liste de contrôle déroulante tout en s'assurant que la mise en page est réactive ou, dans le cas d'applications mobiles, utiliser des éléments natifs.
Bien que ce qui précède résout le problème des sélections multiples sur mobile, il existe certains inconvénients, comme dans l'exemple de gauche, où l'utilisation de l'espace d'écran n'est pas optimale, mais cela pourrait être contré par une certaine innovation et un meilleur style.
Dans les mêmes applications du monde réel, vous utilisez une implémentation de liste déroulante à sélection multiple car:
-comme vous l'avez dit "il n'y a pas toujours beaucoup d'espace disponible" -L'utilisateur ne connaît pas les éléments de la liste ...
À ce sujet, je vais vous montrer un exemple:
Ici, l'utilisateur a une liste de types de fichiers inconnus provenant du serveur de manière dynamique, il n'y a donc pas d'option pour utiliser le champ de recherche intelligente ...
En utilisant le même exemple - lié à ce que dit Okavango à propos des curseurs -:
J'ai essayé d'utiliser des curseurs pour sélectionner une plage (sur la taille du fichier), mais parce que la plage était si large (d'octets à Etabytes), il était alors impossible de sélectionner de petites plages (par exemple 20 Mo à 37 Mo).
Donc, si votre plage est trop grande, je pense qu'il vaut mieux éviter les curseurs
Nielsen Norman Group a écrit un excellent article sur les méga menus - Je ne sais pas si cela répond à vos besoins particuliers ou non, mais ils disent que les menus déroulants sont conviviaux, tant qu'ils sont multi -dimensionnel et robuste, au lieu d'un simple bloc de texte. Ils mentionnent également l'utilisation de balises et de nuages de balises dans cet article, donc j'espère que cela est pertinent pour votre problème!
Cela dit, je pense que le principal obstacle dans cette itération particulière de la conception est que les balises semblent vraiment déroutantes. Peut-être pourriez-vous trouver une façon intelligente de les nommer sans avoir à mettre une description aussi longue expliquant ce qu'ils font en bas?
Vous posez des questions sur la liste déroulante de sélection multiple mais imaginez une liste de sélection multiple
Vous citez comme une raison pour laquelle vous n'avez pas pu trouver la liste déroulante de sélection multiple
Vous ne trouvez pas la liste déroulante à sélection multiple, car dans un état réduit, une liste déroulante ne représente pas plusieurs sélections. Une liste déroulante est une mauvaise interface utilisateur pour la sélection multiple pour cette raison.
En ce qui concerne la liste par rapport à une sélection comme SO la différence est que si les termes ont besoin d'une description. S'il s'agit de termes connus comme les États des États-Unis, alors aucune raison pour une description.
Si vous autorisez les utilisateurs à ajouter des termes de manière dynamique, vous devez presque autoriser la description afin qu'ils puissent s'expliquer mutuellement ce qu'ils signifient. Une liste est toujours en vigueur pour la vitesse de sélection et l'immobilier pour les termes connus (définis). Je pense que vous voyez plus SO comme dynamique avec description car les sites utilisent du contenu dynamique basé sur l'utilisateur. Il y a 20 ans, vous n'aviez tout simplement pas de sites collaboratifs comme SO.