Quelles sont les alternatives à une grande liste déroulante de sélection?
J'ajoute une liste déroulante de sélection unique contenant une liste de tous les pays (environ 200+ articles).
Dans Windows, cela fonctionne bien car il affiche 10 à 15 pays à la fois et la barre de défilement apparaît. Sur le Mac, la liste déroulante affiche tous les éléments à la fois. Les utilisateurs doivent faire défiler tous les éléments pour rechercher l'élément souhaité.
Je n'utilise pas de champ de texte car il peut nécessiter une vérification orthographique.
Quelles sont les alternatives à une grande liste déroulante qui fonctionnera de manière similaire sur tous les ordinateurs?
Je dirais que les listes déroulantes ennuient l'utilisateur et vous devez simplement utiliser une entrée de texte et dire aux utilisateurs qu'ils peuvent taper les champs obligatoires.
MAIS, s'il n'y a pas d'alternative pour un menu déroulant, il y a très peu de choses que nous pouvons faire. c'est ce à quoi seuls les utilisateurs de Safari sont confrontés et y sont déjà habitués, et donc le comportement qu'ils attendent de l'interface utilisateur.
Soit dit en passant, vous pouvez utiliser des scripts qui aideront les utilisateurs à naviguer avec des touches de raccourci comme: cliquez sur A vous prendra le premier nom de pays commençant par "a", et ainsi de suite.
Je recommande d'implémenter une sorte de fonctionnalité de recherche. Les éléments hybrides de recherche déroulante sont très populaires et constituent un bon moyen de résoudre ce problème.
Select2 est une bibliothèque javascript couramment utilisée pour créer de telles listes déroulantes hybrides.
http://harvesthq.github.io/chosen/
Chosen est une solution très élégante pour de grandes quantités de données dans les listes déroulantes. Si vous n'êtes concerné que par les listes déroulantes Pays, détendez-vous, les utilisateurs sont habitués à sélectionner le pays dans une liste, ils utilisent le clavier pour passer rapidement au pays souhaité.
Dans l'un des projets, j'ai remplacé d'énormes listes déroulantes par la boîte de dialogue modale qui a une table et des filtres en haut. appelez-le Table de recherche contextuelle.
Donc, au lieu d'une liste déroulante, je mets une zone de texte en lecture seule, juste à côté de l'entrée de texte ici; un lien qui dit `` sélectionner '', lorsque l'utilisateur clique sur le lien, il ouvre une boîte de dialogue modale avec un tableau et des filtres en haut, l'utilisateur peut recherchez les données de projection et sélectionnez l'une des lignes du tableau et cliquez sur le bouton "sélectionner" dans le pied de page de la boîte de dialogue pour fermer la boîte de dialogue et afficher la valeur sélectionnée en entrée de texte en lecture seule.
Avantage: - Meilleure capacité de rechercher des enregistrements en fonction de divers critères - Meilleure visualisation des données avant la sélection, car le tableau peut montrer beaucoup plus d'attributs de données
mais pourquoi vous utilisez la liste déroulante à la place, vous utilisez la zone de texte et effectuez la recherche comme chaque fois que l'utilisateur tape son pays affiche le nom du pays correspondant au modèle de mot-clé.Après avoir cliqué sur la zone de texte du nom du pays rempli avec ce nom de pays.
Je pense que vous devez implémenter des catégories. Si votre liste déroulante affiche les pays, serait-il préférable de regrouper les pays en catégories? Donc, vous aurez deux listes déroulantes, une sur le continent peut-être, et la seconde sur le pays de ce continent. Vous pouvez également utiliser un texte déroulant, dans lequel vous pouvez également taper votre choix et le menu déroulant le complétera automatiquement en fonction du choix qu'il a dans son menu. Ou vous pouvez également créer votre propre menu déroulant, qui répertorie les pays non seulement vers le bas, mais aussi vers la droite. De cette façon, les utilisateurs peuvent voir plus d'options avant d'être "forcés" de faire défiler vers le bas. Et le défilement vers le bas ne sera pas une liste très longue, car vous avez divisé la liste en plusieurs colonnes dans cette liste déroulante.
Pour le faire fonctionner rapidement, vous devez utiliser la fonctionnalité de suggestion automatique avec la zone de texte. Lorsque l'utilisateur peut appuyer sur certaines touches dont il se souvient, il obtient le mot entier comme suggestion.
Par exemple Dans le cas où l'utilisateur doit sélectionner sa ville. Ainsi, lorsque l'utilisateur tape ny ou new, il doit suggérer le new york dans le résultat, ce qui accélérera le processus pour que l'utilisateur sélectionne l'option souhaitée et se sente plus utilisable
Autre alternative pour aller avec regrouper la liste déroulante en utilisant optgroup
Vous pouvez lire l'ensemble en détail ici - http://www.importux.com/drop-down-menus-common-misuse/
Pour la fonctionnalité de suggestion automatique, voir ceci - http://api.jqueryui.com/autocomplete/#entry-examples
200-300 n'est pas si mal à parcourir. Nous n'obtenons pas trop de nouveaux pays aussi souvent, donc la liste s'allonge relativement lentement.
Vous pouvez utiliser la saisie semi-automatique dans laquelle l'utilisateur doit saisir au moins n (généralement 2) caractères dans un avant d'afficher les premiers résultats m (généralement 10) dans une liste qui apparaîtra, sans barre de défilement.
Je pense qu'une recherche de sous-chaîne fonctionnerait bien - affichez les m premiers pays dans l'ordre alphabétique qui ont la séquence de lettres exacte comme ce qui est dans la zone de texte après chaque pression de touche.
Cet article a une bonne recommandation, en particulier pour les options de pays. La plupart des appareils mobiles et des navigateurs peuvent fournir une géolocalisation aidant à affiner les choix de localisation de l'utilisateur. Si leur emplacement n'est pas là ou qu'ils utilisent un proxy et que l'emplacement n'est pas valide, vous pouvez revenir par défaut à la liste entière. Je parierais avec une recherche google, vous pourriez trouver une API qui aiderait à fournir une liste d'options de sélection en fonction des géo-emplacements.
https://medium.com/@kollinz/dropdown-alternatives-for-better-mobile-forms-53e40d641b5