Quand dois-je utiliser une case de sélection au lieu de boutons radio?
Je sais qu'une boîte de sélection prend moins de place et convient à de nombreuses options. Mais devrait-il y avoir des influences plus profondes dans mon choix que l'espace? Y a-t-il des études qui montrent que les utilisateurs préfèrent l'un ou l'autre?
Il y a aussi le problème des cases à cocher multi-sélection vs en html, qui peut également être discuté ici, car la réponse sera probablement la même.
J'utilise sélectionner lorsque l'utilisateur n'a pas besoin de connaître tous les choix alternatifs disponibles. La suggestion automatique est utile pour une longue liste. Généralement, ils savent ce qu'ils veulent et choisissent d'économiser de l'espace. Exemple: choisissez un "État" comme la Californie ou New York. Vous n'utiliseriez jamais de boutons radio.
J'utilise boutons radio lorsque les alternatives comptent. Quand je veux que l'utilisateur voie ce qu'il ne choisit PAS. Les boutons radio vous permettent d'élargir la sélection et même d'utiliser du texte plus long.
Règle générale: S'il s'agit d'une longue liste ou si les alternatives ne sont pas si importantes, utilisez une sélection.
Les directives d'interface utilisateur comme celles de MS, Apple, Gnome, etc. donnent généralement des suggestions assez claires à ce sujet:
Boutons radio: moins de 5 choix
Boîte de sélection: 6 à 10 options
- Liste déroulante: 11 options ou plus ou
- Besoin de prendre en charge le glisser-déposer dans la liste
- le nombre d'éléments varie
De plus, vous pouvez utiliser la zone de sélection lorsque vous devez économiser de l'espace ou que les choix par défaut sont généralement assez bons, de sorte que les utilisateurs doivent rarement examiner leurs choix.
Troisièmement, il peut être utilisé pendant des jours de la semaine, des mois, etc. C'est des choses où vous savez quels choix vous avez sans qu'on les montre tous. Si je vois "février" dans une case de sélection, je peux à peu près deviner quelles seront les autres options.
Justification de l'utilisation d'un élément d'interface graphique sur un autre
En général boutons radio sont généralement préférés car les utilisateurs peuvent voir tous leurs choix immédiatement. Cependant, afficher tous les choix peut prendre beaucoup d'espace précieux dans l'interface utilisateur. C'est pourquoi la plupart des directives suggèrent d'utiliser d'autres méthodes de sélection lorsqu'il y a beaucoup de choix.
Par exemple. a liste déroulante peut afficher un nombre arbitraire de choix sans prendre beaucoup de place. L'inconvénient est que vous ne pouvez pas voir tous les choix.
Un case de sélection est différent en ce que nous l'utilisons pour montrer à l'utilisateur que tous les choix ne sont pas si importants. Par exemple. lorsque l'utilisateur peut deviner les choix ou aura très rarement besoin de modifier les paramètres par défaut. La case de sélection est principalement là pour montrer à l'utilisateur quel est le paramètre. Cependant, quand il y a beaucoup de choix, une case de sélection peut être difficile à naviguer et donc une liste déroulante serait préférable.
À part l'espace et le nombre d'options, il n'y a vraiment pas de grande différence. Une chose que j'aime avec les boutons radio, c'est que vous pouvez les styliser pour ressembler à de gros boutons, ce qui peut être utile pour les interfaces tactiles. Si vous n'avez que quelques options, il serait beaucoup plus facile d'appuyer sur un gros bouton que d'appuyer sur la petite liste déroulante et d'appuyer sur la petite option.
En ce qui concerne les sélections multiples par rapport aux cases à cocher, je préfère vraiment ne pas utiliser les sélections multiples. Tout simplement parce que vous devez utiliser une combinaison de touches avec votre clic de souris. De nombreux utilisateurs ne savent pas comment fonctionnent les raccourcis et ne pourraient pas sélectionner plusieurs options.
Une autre différence entre les deux entrées qui est souvent négligée: si un bouton radio n'est pas sélectionné, il n'est pas transmis sur le formulaire soumis. Ou pour voir les choses autrement, les boutons radio offrent la possibilité de ne sélectionner aucune option.
Avec une liste déroulante (case à cocher), vous pouvez avoir une option sans valeur (vide, "") et en faire la valeur par défaut, mais si un utilisateur laisse cette option intacte, il dit effectivement "ma réponse est vide", car le le formulaire transmet "my_input_name: ''". En ayant un bouton radio, vous pouvez offrir une option comme "N/A" ou "Aucune des réponses ci-dessus" qu'un utilisateur peut choisir explicitement et donc distinguer entre l'utilisateur sélectionnant "-blank-" et un utilisateur qui saute la question/optant de ne pas répondre (cette distinction devient un véritable cornichon dans la logique DB de niveau inférieur lors de la distinction entre un champ stocké avec une valeur NULL et une valeur vide (vide)).
Le revers de cette fonctionnalité des boutons radio est quelque chose d'autre qui est souvent oublié sur les boutons radio: vous ne pouvez pas répondre à la question. Si vous possédez un kit radio comme:
Genre Homme Femme ()
un utilisateur peut ignorer la question et le champ n'est même pas transmis comme vide. Mais si un utilisateur choisit un homme, eh bien maintenant, il est bloqué. Ils peuvent soit changer la réponse en femelle, soit la laisser en masculin. (Pour les formulaires HTML, ils peuvent également en apprendre un peu plus sur l'utilisation de leur console de navigateur, mais cela ne relève pas de la conception UI/UX et de la programmation et de la sécurité).
Donc, avec cette fonction "pas de reprise" des boutons radio, vous vous retrouvez avec quelques options qu'une liste déroulante ne fournirait pas:
- Possibilité de distinguer "n'a pas répondu" de "ma réponse est vide"
Possibilité de présenter toutes les options sans forcer une option vide ou par défaut. Avec les listes déroulantes, vous devez soit rendre une option vierge, puis traiter cette option qui n'est pas réellement un choix utilisateur valide, ou présélectionner une option pour l'utilisateur (comme la première option de la liste), ce qui risque d'être soumis involontairement si l'utilisateur néglige de faire une sélection (peut-être qu'il voulait y revenir, peut-être qu'il ne l'a pas vu), ou s'il n'est pas sélectionné intentionnellement en raison de l'absence d'une option vide. Dans les deux cas, les données ont désormais moins de valeur car l'option "par défaut" peut ou non être la vraie réponse (si vous ne me croyez pas, interrogez vos données pour obtenir un rapport de lignes avec l'option par défaut pour le champ par rapport à lignes avec une autre option. Vous serez étonné de voir combien de personnes vivent apparemment en Alabama quand c'est l'option par défaut).
Meilleur contrôle sur la gestion de la validation des formulaires, en particulier les champs "obligatoires". Le champ déroulant requis n'existe pas. Il n'y a que des champs déroulants où l'option vide n'est pas valide. Évidemment, il serait préférable de fournir une liste déroulante d'états avec une option vide et de traiter le blanc comme ne sélectionnant pas un état, plutôt que de remplir votre formulaire pour éviter une option vide, mais pour les questions qui ont au plus 4-5 réponses, c'est préférable de fournir la liste complète des options plutôt que d'utiliser une liste déroulante avec une option vide qui n'est pas vraiment une option, puis de faire la distinction entre le blanc et le non sélectionné.
Opinion bonus:
De la même manière que les idées ci-dessus, il est également vraiment stupide d'utiliser des listes déroulantes au lieu de cases à cocher. Une liste déroulante avec les options "Oui/Non" ou "Vrai/Faux" me fait rouler les yeux à chaque fois. La raison niquement d'utiliser une liste déroulante est que vous fournissez une troisième option vierge et qu'elle est considérée comme une sélection valide. Et même alors, un bouton radio serait probablement le meilleur choix.
Je réfléchissais à cela moi-même pour une interaction, et je pense qu'un autre avantage des boutons radio est qu'ils peuvent fournir un peu d'espace supplémentaire pour le texte de support ou l'explication des choix possibles.
J'utilise cases à cocher (case à cocher) pour activer la sélection de plusieurs options ou tout en faisant un choix binaire.
Meilleure pratique Pour l'utilisation des boîtes de sélection:
- Pensez à définir une valeur par défaut pour l'option que les utilisateurs sélectionnent 80% ou plus du temps.
- Évitez les opt-ins par défaut, comme l'inscription au marketing par e-mail.
J'utilise boutons radio pour activer un élément parmi deux ou plusieurs options mutuellement exclusives.
Meilleure pratique Pour utiliser les boutons radio:
- N'utilisez pas de boutons radio pour lancer des actions.
- Utilisez toujours deux boutons radio ou plus
Les boutons radio sont généralement préférables jusqu'à ce que vous ayez plus de deux options. Ils ne nécessitent qu'un seul clic par rapport à deux. Les boutons radio sont également meilleurs pour l'imbrication des sous-options.
Si seulement quelques choix, les boutons radio gagnent pour la facilité d'utilisation et la sélection rapide. l'utilisation d'une liste déroulante empêche l'utilisateur de voir tous les choix jusqu'à ce qu'il atteigne ce champ.
Cette question pourrait également s'appliquer aux cases à cocher par rapport aux sélections multiples.