5-6 choix: bouton radio ou menu déroulant?
Je suis en train de repenser un PMS (Property Management System) et ceci est un écran de la configuration d'un hôtel. Il y a maintenant des boutons radio dans toutes les catégories/onglets. Je sais qu'il existe une "règle" selon laquelle si les choix sont inférieurs à 6, il est préférable d'utiliser le bouton radio et d'afficher tous les choix au lieu d'un bouton déroulant. Bien qu'il y ait plus de 5 catégories/onglets dont vous avez besoin pour choisir un choix et je ne sais pas quelle est la meilleure solution pour mon problème. Pensez-vous que je devrais rester avec les boutons radio ou un bouton déroulant? As-tu d'autres idées?
Lignes directrices
Les Apple OSX Human Interface Guidelines (2012) recommandent une liste déroulante si vous avez plus de 5 options, tandis que les Microsoft Windows 10 User Experience Guidelines recommandent une liste déroulante si vous avez plus de 8 options. Donc, prenez la moyenne et restez avec les boutons radio si vous avez moins de 6,5 options (haussement d'épaules). Vous êtes près de la frontière (au moins pour un livre de directives) dans tous les cas, donc cela ne fait probablement pas beaucoup de différence dans ce que vous faites.
Considérations dans le compromis
Si vous voulez être plus précis (et compliqué), considérez le principal compromis entre les boutons radio et les menus déroulants tels qu'ils s'appliquent dans votre cas.
Les boutons radio ont l'avantage de sélectionner une option en un clic (contre deux clics pour sélectionner dans une liste déroulante). Ils sauvent l'utilisateur un clic.
Les listes déroulantes ont l'avantage de lire les valeurs en un coup d'œil (l'utilisateur n'a qu'à regarder au même endroit pour voir ce qui est actuellement sélectionné, plutôt que de parcourir une liste).
Ainsi, le compromis dépend de la fréquence à laquelle les utilisateurs modifient la valeur de l'article par rapport à la simple lecture et à la laisser seule.
Si la tâche implique très souvent de ne vérifier que la valeur (par exemple, pour savoir comment définir autre chose), alors une liste déroulante peut être meilleure même avec moins de 5 options.
Si l'utilisateur prend presque toujours la valeur par défaut, une liste déroulante peut être meilleure avec moins de 5 options.
D'un autre côté, si l'utilisateur a presque toujours besoin de changer la valeur (la valeur par défaut est rarement correcte), alors vous voudrez peut-être des boutons radio même s'il y a plus de 8 options.
La différence entre Apple et les directives de Microsoft reflète probablement différentes hypothèses sur la fréquence à laquelle les utilisateurs doivent modifier une valeur.
Obtenir des mathématiques
Si vous voulez être vraiment précis, supposez chaque clic dure environ 2 secondes et chaque coup d'œil prend environ 0,1 seconde et calculez le temps pour effectuer la tâche avec les boutons radio par rapport à une goutte vers le bas pour la proportion de vos utilisateurs que vous attendez changera la valeur. Choisissez la plus rapide pour votre nombre d'options.
Si vous voulez être vraiment très précis, faites un test d'utilisabilité des boutons radio par rapport à la liste déroulante de votre prototype et comparez les temps moyens.
Autres considérations
Voici d'autres éléments à considérer ou à inclure mathématiquement, en plus de la proportion d'utilisateurs qui modifient une valeur:
Options de tri par fréquence d'utilisation. Vous pouvez préférer les boutons radio avec plus de 5 options si les options sont triées par fréquence d'utilisation, et les cinq premières options sont presque toujours les bonnes, = et les utilisateurs en savent assez sur les options qu'ils arrêtent de chercher une fois qu'ils ont trouvé la bonne. Dans ce cas, il n'y aura pas beaucoup de numérisation de la liste complète très souvent - vous avez fonctionnellement 5 options.
Attentes du choix actuel. Vous voudrez peut-être privilégier les boutons radio avec plus de 5 options si les utilisateurs peuvent anticiper la valeur actuelle probable, et savoir à peu près où la valeur est sur la liste (par exemple, ils 'ai vu la liste à plusieurs reprises et/ou elle est triée de manière raisonnable). Le temps de scan dans ce cas varie avec le journal du nombre d'éléments ( loi de Hick-Hyman ) plutôt que linéairement avec le nombre d'éléments, vous pouvez donc doubler le nombre d'éléments (par exemple, passer de 5 à 10) et n'augmente que progressivement le temps de numérisation.
Utilité de voir d'autres options. Vous voudrez peut-être privilégier les boutons radio lorsque les utilisateurs ne connaissent pas très bien les options, ou les options peuvent être ambiguës, donc les utilisateurs doivent les voir tous pour choisir avec précision lequel choisir. C'est plus facile à faire avec les boutons radio car les utilisateurs n'ont pas à ouvrir le menu déroulant d'abord pour voir quelles sont les options (puis finir par conserver la valeur par défaut dans certains cas). Avec une liste déroulante, les utilisateurs peuvent même ne pas prendre la peine de regarder toutes les options, ce qui dans ce cas serait une mauvaise chose.
Limitations d'espace. D'un autre côté, vous voudrez peut-être privilégier une liste déroulante si votre espace est si limité sur la page que l'utilisation des boutons radio forcera la plupart des utilisateurs à faire défiler pour accéder à d'autres éléments . Si les utilisateurs doivent faire défiler, cela ajoute au moins un clic, ce qui efface le principal avantage des boutons radio. Ne sous-estimez pas non plus les effets d'encombrement - même si les utilisateurs n'ont pas à faire défiler, tous ces boutons radio peuvent les distraire des autres éléments de la page. Habituellement, les éléments non sélectionnés ne sont pas aussi importants que les autres champs ou contrôles d'une page.
Couvercles de sécurité. Vous pouvez également utiliser une liste déroulante plutôt que des boutons radio (ou une case à cocher) si la modification de la valeur peut avoir des implications dangereuses (par exemple, changer un niveau de sécurité). La commodité même du changement en un seul clic rend les boutons radio et les cases à cocher susceptibles d'être modifiés accidentellement et sans le savoir par un mauvais clic pendant que l'utilisateur est distrait. Utiliser une liste déroulante à la place, c'est comme avoir un couvercle de sécurité sur un interrupteur à bascule physique, réduisant le risque d'entrée accidentelle. C'est moins perturbateur qu'une boîte d'avertissement lorsque l'utilisateur modifie délibérément la valeur.
Ni l'un ni l'autre: la zone de liste
Une alternative souvent oubliée aux listes déroulantes et aux boutons radio est la zone de liste, qui peut être un bon compromis entre les boutons radio et les listes déroulantes:
Il a une sélection en un clic comme les boutons radio, mais prend généralement moins d'espace.
La sélection actuelle est mise en surbrillance, ce qui peut être plus facile à repérer qu'un petit bouton radio rempli.
Une zone de liste peut défiler lorsqu'il y a un grand nombre d'éléments, vous pouvez donc afficher les éléments à forte utilisation pour une sélection en un clic et placer les éléments à faible utilisation "sous le pli" afin d'équilibrer l'espace avec importance.
Comme une liste déroulante, une zone de liste peut être facilement remplie avec des options d'une table de base de données (quelque chose de difficile à faire avec les boutons radio sur de nombreuses plates-formes).
Une zone de liste doit être considérée sur les boutons radio chaque fois qu'il y a plus de 5 options.
Selon Cases à cocher vs boutons radio (Nielsen, 2004) :
Si possible, utilisez des boutons radio plutôt que des menus déroulants. Les boutons radio ont une réduction charge cognitive car ils rendent toutes les options visibles en permanence afin que les utilisateurs puissent facilement les comparer. Les boutons radio sont également plus faciles à utiliser pour les utilisateurs qui ont du mal à effectuer des mouvements précis de la souris. (L'espace limité peut parfois vous forcer à violer cette directive, mais essayez de garder les choix visibles dans la mesure du possible.)
C'est-à-dire ne liste déroulante est un choix intelligent pour économiser de l'espace sans supprimer aucune option. Mais cela supprime la possibilité pour l'utilisateur de connaître toutes les options à l'avance, et cela augmente le nombre de clics par tâche * (en cliquant sur le menu déroulant, éventuellement en faisant défiler la liste, et enfin en choisissant votre option par rapport à celle cliquez pour la radio).
J'ai vu d'autres possibilités proposées dans ce même forum. @LarsTech a proposé le mélange suivant entre widgets pour économiser de l'espace tout en conservant les options les plus susceptibles d'être sélectionnées dans un bouton Radio. Si l'espace est un problème mais que vous reconnaissez toujours l'utilité d'un bouton radio, cela peut valoir la peine d'être considéré.
Dans quelle mesure attendez-vous que vos utilisateurs modifient le choix par défaut?
- Si la plupart de vos utilisateurs choisissent l'option par défaut et que vous ne vous attendez pas à ce qu'ils la changent beaucoup, je choisirais Dropdown et je sélectionnerais l'option par défaut.
- Si, cependant, il y a beaucoup de variabilité dans les choix des utilisateurs, et qu'il vaut mieux pour eux de voir toutes les options tout de suite, alors j'irais avec boutons radio.
Les autres commentateurs ont fait de bonnes suggestions. Vous voudrez peut-être envisager des variantes ou d'autres options plutôt que des radios ou une liste déroulante. Si vous avez le choix entre des options qui bénéficieraient d'une identification visuelle, vous pourriez envisager une variante des boutons radio dans laquelle vous montrez les éléments et laissez l'utilisateur les sélectionner directement. Si vos options sont le long d'un spectre avec une plage fixe, peut-être qu'un curseur serait une option décente.
Alors qu'une liste déroulante offre une mise en page plus compacte verticalement, être en mesure de voir toutes les options permet un peu moins de travail de la part de l'utilisateur. Quelle que soit votre décision, vous pouvez faire encore moins de travail pour les utilisateurs en leur fournissant valeurs par défaut intelligentes - si vous pouvez anticiper ce que 80% de vos utilisateurs sont susceptibles de sélectionner, faites cette option présélectionné.
Si vous concevez ensemble pour mobile et Web, les listes déroulantes sont beaucoup plus agréables à utiliser. Il y a généralement une gestion intégrée sur de nombreux téléphones, offrant un environnement familier à l'utilisateur (à moins qu'ils changent fréquemment d'appareil. Plus probablement, ils changent de site fréquemment).
Sur mon téléphone, il me faut généralement trois à sept fois pour cliquer sur un bouton radio, à moins qu'il ne soit agrandi. Cela pourrait être corrigé si tout le texte se trouvait à l'intérieur du bouton radio afin que vous puissiez cliquer sur le texte, pas seulement le petit cercle, mais les gens oublient de le faire. Une liste déroulante a le rectangle entier comme c'est hitbox et puis j'obtiens une zone de sélection plein écran.