pop up (modal) vs liste déroulante pour afficher le champ sous forme contenant une longue liste
Le problème auquel je suis confronté est - le client choisit le transporteur, puis il/elle doit choisir l'emplacement du lieu de ramassage dans la liste déroulante. La liste déroulante est-elle la meilleure solution pour les utilisateurs mobiles? Les listes d'emplacements contiennent environ 100+ éléments (options).
J'ai lu que le menu déroulant n'est pas une solution conviviale très mobile. Selon ceci:
Est-il plus convivial pour l'utilisateur d'afficher de longues listes (lors du remplissage d'un formulaire) à l'intérieur de la fenêtre contextuelle ( modal/pop-up) ) avec champ de recherche et boutons radio ou pas? Quels sont les principaux inconvénients par rapport à la liste déroulante (existe-t-il des possibilités que les bloqueurs de publicités ne s'affichent pas ou ...)?
Quelqu'un a-t-il fait une recherche d'utilisateurs sur la difficulté d'utiliser la liste déroulante dans les appareils mobiles lors du remplissage des formulaires et existe-t-il des alternatives?
Lorsque l'utilisateur a choisi la valeur dans la boîte contextuelle quelles sont les meilleures pratiques où la valeur choisie doit-elle apparaître (page de paiement)?
Il y a une recommandation générale de Luke Wroblewski à éviter d'utiliser des listes déroulantes dans les interfaces mobiles. En effet, ils ont un coût d'interaction élevé et les options disponibles sont masquées .
Il est préférable de les remplacer par des boutons/groupes radio car ils ont un coût d'interaction beaucoup plus faible que les listes déroulantes: 1 seul clic pour sélectionner une certaine option. Avec les listes déroulantes, vous avez le coût d'interaction suivant:
- 1 robinet pour ouvrir la liste déroulante,
- défilement (recherche de l'objet recherché),
- 1 clic pour sélectionner l'option
- 1 clic pour fermer le menu déroulant (pas toujours)
Cependant, dans le cas où vous avez ~ 100 éléments, la recherche avec le composant déroulant est à mon avis une bonne option.
Solution 1: recherche avec liste déroulante
L'avantage par rapport aux listes déroulantes normales est que l'utilisateur peut filtrer les résultats par mot-clé et sélectionner l'option souhaitée. L'inconvénient de cette approche est que pour entrer un mot-clé, un clavier mobile doit être chargé, ce qui peut prendre du temps et a un coût d'interaction considérable.
Solution 2: regrouper les éléments dans la liste déroulante
Lorsque vous regroupez des options, vous améliorez la recherche visuelle des éléments dans la liste déroulante. Par conséquent, cette approche est une idée meilleure que l'utilisation d'une liste déroulante normale.
Testez si vous le pouvez
La meilleure solution à votre problème est bien sûr de tester ces approches. Nous ne pouvons pas prédire quelle voie serait la meilleure pour votre cas spécifique, c'est pourquoi la meilleure chose à faire est de tester.
Oui, Luke Wroblewski a raison (veuillez lire http://www.lukew.com/ff/entry.asp?195 ). Pas de liste déroulante sur mobile, en particulier pour plus de 100 éléments. Il s'agit d'une longue liste, vous avez donc certainement besoin d'une recherche attachée.
Vous avez plusieurs options ici (pour éviter la liste déroulante sur mobile).
- Ainsi, lorsque vous cliquez sur le champ "choisir l'emplacement de ramassage", vous vous concentrez sur le champ (dans la même page/nouvelle page/animation, etc.) avec l'entrée en haut de l'écran où vous pouvez rechercher - recherche prédictive/saisie semi-automatique - l'emplacement et la liste triés par proximité répertoriés ci-dessous, si vous ne savez pas quoi chercher en premier lieu, etc. Quelque chose comme ceci:
Peut-être aussi mettre une vue de carte, une autre vue de la liste.
- ou obtenez un menu hors toile avec la liste et la recherche ci-dessus ou une vue latérale avec la liste et la recherche ci-dessus https://youtu.be/nmKMz3Fg76M?t=1h3m16s