Quel est le nombre maximum recommandé d'articles à mettre dans une liste déroulante?
J'introduis des listes déroulantes consultables pour filtrer les données de la grille. Le nombre d'articles dans une liste peut aller de dix à dix mille.
Plus le nombre d'articles est élevé, plus la sensation de la vue est gênante (sans parler de la performance).
Alors, quel est le nombre maximum recommandé d'éléments à mettre dans une liste déroulante (consultable ou non)?
Il n'y a pas recommandé nombre maximum d'éléments à mettre dans une liste déroulante.
Personne ne peut dire que le maximum est 7 ou 12 ou 200 ou 10 000 et dire définitivement que pour tous les scénarios, c'est le maximum que vous devez utiliser.
Il existe un mythe pour les listes déroulantes et les menus que vous ne devriez pas utiliser plus de 7 +/- 2 parce que c'est ainsi que votre mémoire fragmente les choses, mais ce n'est pas vrai en raison de la façon dont les listes sont intrinsèquement scannables - vous n'avez pas à - rappelez-vous tous les éléments d'une liste.
Le facteur suivant est le nombre d'éléments visibles à tout moment dans la liste - disons 10 à 20 éléments. Cela semble raisonnable, mais cela dépend si la liste est large et/ou couvre le contenu en dessous et comment cela affecte la capacité de l'utilisateur à pouvoir choisir un élément lorsque d'autres contenus sont couverts.
Après cela, il y a l'introduction d'une barre de défilement et la difficulté de faire un choix est augmentée car vous n'avez qu'une vue de fenêtre relativement petite pour l'ensemble des options. Le rapport entre le nombre d'options et le nombre visible à tout moment est donc le facteur.
À ce stade, vous commencez également à vous soucier de la façon dont les éléments sont triés, afin de rendre la liste numérisable, et aidez la mémoire de l'endroit où vous avez vu un élément plus tôt ou plus tard dans la liste. Ainsi, un scénario typique consiste à choisir un pays lors de la saisie d'une adresse. Nous sommes tous familiers avec environ 200 éléments dans une telle liste et pouvons gérer cela assez bien la plupart du temps, mais imaginez que cette liste ne soit pas triée - ce serait une tâche horrible.
Malheureusement, cela se produit vraiment à l'état sauvage - voici un exemple absurde des hôtels Hyatt vous demandant de choisir une compagnie aérienne parmi plus de 180 options. Notez la position ridicule dans la liste des "Autres compagnies aériennes (non répertoriées)"
Même ainsi - lorsqu'elles sont triées, toutes les listes ne sont pas égales - certains nombres sont plus faciles à analyser que certains mots, surtout si les nombres sont séquentiels et les mots sont inégalement répartis dans l'ordre alphabétique.
Une fois que vous commencez à dépasser cette barre des 200, les choses se détériorent. Les nombres 1 à 1000 pourraient fonctionner, mais 1000 villes à travers le monde ne seraient pas souhaitables si vous ne pouvez en voir que 10 à la fois et avoir une petite barre de défilement pour le gérer.
À ce stade, vous ne voulez plus que les utilisateurs interagissent en faisant défiler - l'option de recherche entre en jeu de manière beaucoup plus dominante. Il y a un changement radical dans la façon dont l'utilisateur --- attend interagit à ce stade - la liste déroulante n'est plus une liste statique, mais une liste dynamique montrant les résultats d'une recherche.
Si vous traitez la liste déroulante comme liste de résultats plutôt que comme une liste de tous les éléments possibles, alors le ciel est vos limites - tout votre inventaire est à portée de main. Cependant, vous devez le présenter comme un champ de recherche (pas une liste statique), premièrement parce que des problèmes de performances surviennent comme vous le signalez, et deuxièmement parce que vous obtiendrez toujours certains les utilisateurs qui décident de faire défiler cette immense liste. Une telle liste dynamique devrait apparaître comme vide quand aucun terme de recherche n'est entré plutôt que contenir tous les éléments.
Pour résumer - cela dépend. Cela dépend de la relation visuelle entre le contenu d'écran sous-jacent et le contenu déroulant; cela dépend de la possibilité de numérisation des données de la liste; cela dépend de l'état trié des articles et de la distribution dans la plage de clés de tri; et vous devez vous demander si un contenu de liste statique est même souhaitable en premier lieu.
Enfin - parce que chaque situation est différente (et parce que vous venez devrait) vous devez tester A/B quelques options avec les utilisateurs afin de vérifier ces hypothèses, afin de pouvoir vous faire des arguments fondés sur des preuves et d'autres que oui, c'était la meilleure façon de le faire.
Il peut être utile de réfléchir à ce que vous pourriez faire dans un monde idéal, puis de revenir sur la liste déroulante et de voir à quel point la liste déroulante est inappropriée ou archaïque. Si c'est comme ça, alors vous avez réalisé que la liste déroulante n'est pas la meilleure façon de le faire. Si vous continuez à utiliser le menu déroulant (par exemple, en raison de contraintes de temps/de coût/de boîte à outils), vous venez de prendre une décision basée sur certaines règles métier plutôt que sur la fourniture d'une bonne UX, et vous devez vivre avec cela.
En fin de compte, le meilleur UX n'est pas gratuit. Cela coûte de l'argent - surmontez-le.
Je suis en train de créer une application Web pour remplacer un monstre hideux écrit il y a environ 10 ans et j'ai rencontré un problème similaire, avec des listes déroulantes dans la version existante ayant plus de 1000 entrées.
Bien que je ne puisse pas offrir de conseils UX spécifiques comme ci-dessus, j'ai réussi à réduire le problème de l'utilisateur dans une certaine mesure en lui permettant de filtrer le contenu de la sélection en fonction de la saisie de texte - jetez un œil à jQuery Plugin choisi (même si je ne l'ai pas utilisé à la fin).
L'utilisation d'une sélection sur plusieurs lignes aide également (je suis allé pour un arbitraire 10 dans mon cas) car elle permet à l'utilisateur de numériser visuellement le contenu sans avoir à faire trop de frappe - il a également une hauteur fixe et n'obscurcit pas les choses au dessous de.
Cependant, cela ne résoudra peut-être pas votre problème si vos utilisateurs ne savent pas vraiment quoi chercher, mais dans mon cas (une application intranet), les utilisateurs connaissent déjà les données, donc cela fonctionne très bien pour eux. Pour étayer cela, nous avons eu des commentaires très positifs sur l'ampleur de l'amélioration du groupe de travail utilisateur concerné.
J'ai envisagé quelques autres options pour que ma version fonctionne correctement, y compris des choses comme une sortie de style Miller Column , mais je n'avais pas de hiérarchie pour en justifier une et n'allais pas en imposer une pour pour le plaisir. Au final, un jQuery fn personnalisé a effectué le filtrage et fonctionne très bien dans ma version avec environ 1000 lignes (mon application est testée pour IE8 et il n'y a pas de décalage notable avec beaucoup de données).
Généralement, si la liste déroulante nécessite que l'utilisateur fasse un travail supplémentaire et analyse une liste importante (comme avoir besoin de faire défiler), une liste déroulante peut présenter problèmes d'utilisation .
Toutefois!
La seule chose que les listes déroulantes ont pour eux est que tout le monde les utilise ... afin que les utilisateurs sachent comment les utiliser. Ainsi, même s'il ne fournit pas la meilleure expérience possible, les utilisateurs sauront probablement quoi faire lorsqu'ils le rencontreront.
Je pense généralement que les listes déroulantes sont trop utilisées.
La plupart des listes déroulantes de pays auront plus de 300 entrées, la sélection de votre année de naissance comportera probablement plus de 100 entrées (vous ne voulez pas exclure ces Centenaires ). Mais ce sont des options bien connues. Le problème survient lorsque les gens ne savent pas ce qu'ils recherchent, par exemple même dans les listes de pays, il peut être difficile de rechercher le Royaume-Uni dans les listes de pays car certaines personnes sont le Royaume-Uni, certaines comme la Grande-Bretagne, certaines comme la Grande-Bretagne, certaines comme l'Angleterre/Écosse/Pays de Galles, certaines le placent près du sommet, etc.
Donc, la liste doit être triée numériquement ou alphabétiquement, mais alors les listes de 100 devraient être correctes. Au-delà, vous pouvez commencer à utiliser les concepts ' Typeahead ':
Pour le bureau (en gardant uniquement à l'esprit la commodité de l'utilisateur)
Si votre liste est dynamique, optez pour une suggestion automatique.
Si votre liste est statique et petite (jusqu'à 10 éléments), optez pour une simple liste déroulante
Si votre liste est statique mais volumineuse, elle est basée sur la taille du texte
--- pour une plus petite longueur (jusqu'à 20-25 caractères), choisissez un menu déroulant déroulant
--- pour une plus grande longueur (plus de 25-30 caractères), choisissez une suggestion automatique
Pour mobile
Choisissez quelque chose d'aussi léger que la suggestion automatique. Selon mon expérience, les listes déroulantes sont un peu trop lourdes pour être utilisées sur un appareil mobile.
Si la liste est aussi petite que 3-4 éléments, optez pour les boutons radio