Pourquoi devrais-je utiliser des boutons radio et des cases à cocher?
Je peux créer toutes les fonctionnalités d'une case à cocher et d'un bouton radio avec une sélection/liste déroulante, ce qui se traduit par une interface plus alignée et je me déplace avec des types d'éléments GUI différents.
Alors pourquoi ces éléments devraient-ils être utilisés de toute façon.
Cases à cocher vs sélectionner:
Pour répliquer la fonctionnalité de case à cocher (choose 0 or x out of n), vous devez utiliser un élément multisélection. De nombreuses recherches indiquent que la plupart des utilisateurs ignorent parfaitement comment sélectionner plusieurs éléments dans un élément multisélection .
Boutons radio vs liste déroulante:
Lequel utiliser alors? Cela dépend vraiment de votre scénario.
Scénario 1: "Veuillez sélectionner votre pays dans cette liste de plusieurs centaines"
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
- L'étiquette indique clairement le type d'options disponibles - pas de surprise ici
- Une liste déroulante aura un sens en termes de désencombrement de l'interface/masquage des informations inutiles de l'utilisateur
Scénario 2: "Vous aimez la crème glacée?"
- La liste déroulante cache des informations importantes (l'existence d'une option autre que "Oui" ou "Non") de l'utilisateur.
- La quantité d'espace économisée par une liste déroulante (2 unités verticales) est négligeable.
tl; dr: L'utilisation des boutons radio ou des listes déroulantes dépend vraiment de votre cas d'utilisation. Chaque fois que vous utilisez une multisélection, un chaton mignon meurt.
Boutons radio:
++ Les options sont visibles (Dropdown: a besoin d'un clic pour se révéler)
++ La sélection d'une option ne prend qu'un seul clic (liste déroulante: 2 clics)
Cases à cocher:
++ Les options sont visibles (Dropdown: a besoin d'un clic pour se révéler)
++ Tout le monde sait comment effectuer une sélection multiple (liste déroulante: il faut appuyer sur la touche ctrl/cmd)
Pour un petit nombre de cases à cocher d'options et de radios:
- Montrez immédiatement toutes les options.
- Exigez moins de clics de souris pour interagir avec.
- Sont plus accessibles via le clavier car les listes déroulantes n'ont aucun moyen d'afficher la liste dans certains navigateurs .
Au début, les cases à cocher et les boutons radio rendent les choix visibles et ne nécessitent aucune action supplémentaire pour afficher l'ensemble des choix.
Deuxièmement, leur formulaire affiche sans explication textuelle la possibilité de faire un choix parmi plusieurs ou plusieurs parmi plusieurs - et parce que les cases à cocher et les boutons radio sont reconnaissables, les modèles de base, ces éléments ont une grande accessibilité. Dans les listes déroulantes et les sélections, cela nécessitera des efforts cognitifs supplémentaires pour comprendre la possibilité de choix multiple ou toute étiquette supplémentaire.
Au troisième, les listes déroulantes et les choix ne peuvent pas afficher correctement un seul choix de case à cocher - généralement, il faudra deux choix ("oui"/"non") et beaucoup d'actions au lieu d'un simple clic.
Et quatrièmement, les sélections peuvent être perçues comme des zones de texte, ce qui crée une confusion supplémentaire pour les utilisateurs.
Donc, ce n'est pas si simple, et l'interface alignée faite sous forme visuelle faite de sélections et de listes déroulantes ne montrera pas la différence par essence et sera beaucoup plus difficile à utiliser.
Juste pour lancer mes deux cents, une chose qui me dérange vraiment, c'est quand vous avez un bouton radio avec seulement deux options, telles que "Voulez-vous un chat?" -> "() Oui () Non". Les cases à cocher ont beaucoup plus de sens ici ("[] Je veux un chat").