Réflexions sur les comportements différents pour le même composant
Nous avons une liste déroulante avec plus de 2000 articles (devrait-il même être une liste déroulante?) Avec la possibilité de rechercher. Et c'est une liste déroulante de sélection d'arbre.
Le problème se pose lorsque l'on veut éditer, c'est-à-dire qu'une valeur a déjà été sélectionnée et qu'il faut maintenant la modifier. Idéalement, en cliquant sur le menu déroulant, il devrait défiler jusqu'à la section avec la valeur sélectionnée. Étant donné qu'il y a plus de 2000 éléments dans une structure arborescente, nous paginons les données. Nous avons deux options à ce stade
Chargez d'abord toutes les données et faites défiler jusqu'à la section sélectionnée avant d'activer la liste déroulante (elle est dans l'état de chargement), ce qui prendrait environ 15 secondes, puis faites défiler jusqu'à la section sélectionnée
Chargez le composant déroulant rapidement mais il ne s'ouvre pas avec la section affichant la valeur sélectionnée mais plutôt en haut de la liste déroulante
Nous avons introduit une solution intermédiaire: Nous remplissons la recherche avec la valeur sélectionnée et affichons les résultats. De cette façon, il y a plus de chances que l'utilisateur voit la valeur sélectionnée sans attendre le chargement du composant (cas 1). Cela fonctionne dans une certaine mesure avec l'hypothèse que l'utilisateur ne voudrait modifier la valeur de la liste déroulante que dans les cas où il a sélectionné la mauvaise valeur par erreur et même la première sélection qu'il aurait effectuée aurait été via la recherche.
Avec la solution intermédiaire, nous avons un nouveau problème - nous avons d'autres listes déroulantes avec beaucoup moins de données ainsi que la pré-population de recherche n'a pas de sens car ils veulent fondamentalement sélectionner un complètement différent option.
Quelle est la meilleure façon d'aller de l'avant avec cela? Quelqu'un a-t-il déjà rencontré un problème similaire?
Avec autant d'articles! Le menu déroulant est définitivement pas le widget correct à utiliser. Lorsque vous avez autant d'enregistrements, l'utilisateur ne veut probablement pas faire défiler ce lot.
Envisagez une conception alternative à votre problème. Je vous recommande d'utiliser un modèle de recherche et de navigation, qui est plus aligné sur l'objectif de votre utilisateur - pour trouver et sélectionner l'élément correct, aussi rapidement que possible.
Si cette liste de 2000+ contient un regroupement évident (aka facettes), vous pouvez utiliser le modèle de navigation à facettes - c'est ce qu'Amazon utilise très bien. Amazon mélange la recherche et la navigation et garantit que l'utilisateur peut toujours accéder rapidement à ce qu'il veut.
S'il n'y a pas de regroupement évident dans cette liste 2000+, votre objectif est de fournir un mécanisme qui réduit progressivement ce nombre à quelque chose de beaucoup plus gérable. Vous pouvez donc utiliser un contrôle de navette, qui contient deux zones de liste.
- La zone de liste à gauche répertorie les 2000+ éléments. Il devrait y avoir un champ de recherche sur cette zone de liste
- La zone de liste à droite répertorie tous les éléments sélectionnés
- Entre les deux zones de liste se trouvent des boutons Ajouter et supprimer
Une fois que l'utilisateur a trouvé un élément dans la zone de liste de gauche, il clique sur le bouton Ajouter pour le déplacer dans la zone de liste de droite.