web-dev-qa-db-fra.com

Quoi de mieux: oui / non radio, ou simple case à cocher?

Dans une très grande forme sur le site Web de mon entreprise, il y a cette tendance à utiliser Yes / No combinaison de boutons radio.

enter image description here

Je peux penser à un argument de ne pas l'utiliser, mais il n'est pas lié à l'UX: nous devons maintenir trois états au lieu de deux: null, true et false pour ces domaines.

Y a-t-il un argument, au niveau UX, pour utiliser la case à cocher à la place?

enter image description here

Edit: Nous n'avons pas besoin de couvrir les 3 cas, le cas null n'est que l'état initial et il est impossible d'aller plus loin dans le formulaire sans sélectionner "Oui" ou "Non", d'où la difficulté de maintenance mention.

103
wscourge

Dépend si la question est obligatoire. Vous avez besoin de boutons radio si vous voulez être sûr qu'un utilisateur a répondu à la question, car avec une case à cocher vide, vous ne saurez jamais si un utilisateur vient d'oublier cette question.

234
denR89

Il n'y a pas de réponse correcte unique mais le contrôle dépend du contexte.

La case à cocher convient pour minimiser l'encombrement mais son utilisation est limitée dans les cas où le choix décrit a également une signification opposée claire (sans qu'il soit nécessaire de le mentionner):

[X] include subdirectories

Les boutons radio conviennent pour rendre quelque chose de plus explicite ou si les choix nécessitent des descriptions distinctes:

Overwrite files when copying (cannot be undone):

(•) Yes, overwrite   ( ) No

Les boutons radio sont également le meilleur contrôle à lancer sans choix.

Le menu déroulant (toujours avec 2 choix) convient au choix que les utilisateurs ne devraient généralement pas changer, etc. Les autres choix ne sont pas visibles et le changement nécessite 2 clics:

Format drive for the following file system:   exFAT32 ▼

(après ouverture, l'autre choix est NTFS).

Bien sûr, ce ne sont pas les seuls critères. Si vous avez déjà un cluster de contrôles similaires en vigueur, vous en ajoutez un autre pour les faire correspondre. Ou parfois, c'est la mise en page qui règle le type de contrôle principal à utiliser, par exemple certaines options semblent plus gibles si elles sont alignées dans le tableau. Et parfois, vous devez ajouter des étiquettes ou des icônes sur plusieurs lignes aux choix, ce qui implique le contrôle à utiliser.

Donc, le choix est sur vous, l'objectif est de simplifier l'interface utilisateur, mais de rendre les choix importants explicites et certains autres se démarquent de l'utilisateur.

81
miroxlav

J'utiliserais la case à cocher, car:

  • il est visuellement concis (par rapport aux radioboxes prenant plus d'espace sur l'écran)
  • c'est le strict minimum nécessaire pour faire le travail
  • c'est un widget d'interface utilisateur classique et les gens le connaissent (bien que cela s'applique également aux boîtiers radio)
  • une version papier du formulaire peut avoir la même apparence (bien que certaines enquêtes papier utilisent des radioboxes)

Les radioboxes seraient un meilleur choix si vous aviez plus de 2 états. Par exemple, dans une enquête, vous pourriez avoir besoin de {yes, no, I don't know, prefer not to say} afin de différencier les nuances de toute option autre que yes.

Il serait utile que vous demandiez à la génération précédente de personnes qui ont créé cette interface la justification de l'utilisation des radioboxes. Il y a peut-être une bonne raison à cela, mais cela n'a pas été documenté.

22
ralien

Si vous avez vraiment besoin de couvrir tous les cas d'utilisation:

  • La coche ne fonctionnera pas car elle ne peut couvrir que deux cas.
  • Les boutons radio devraient le couvrir, mais il vous manque la troisième option. Quelque chose dans la ligne de "je préfère ne pas dire." Parce que la configuration actuelle se briserait si vous sélectionniez accidentellement quelque chose (mais à en juger par ce que vous soutenez probablement en décochant le bouton radio?), Ce qui, à mon avis, n'est pas une bonne pratique.

Vous pouvez lire cet article intéressant sur les boutons radio par Norman Group si vous avez besoin de plus d'informations.

14
rojcyk

La case à cocher est utilisée pour sélectionner ou confirmer un choix. La question "Avez-vous ...?" n'offre pas de choix, donc une case à cocher ne s'applique pas à la question. Il semble même sélectionner la question seule.

Il faut donc proposer un choix - oui ou non. Utilisez ensuite la case à cocher pour la sélection des choix.

6
Rob

Le commentaire de @hsan sur la question est important: si vous devez être sûr que l'utilisateur a vraiment voulu 'Non' comme réponse, vous avez besoin d'eux pour faire une sélection active, donc le formulaire n'est pas soumis tant qu'il ne l'a pas fait .

Pour cela, un contrôle de sélection avec une première option désactivée de 'veuillez sélectionner' fonctionne bien: https://codepen.io/anon/pen/LaZzzP

<label for="mandatory-yes-no">Do you need the thing?</label>
<select id="mandatory-yes-no">
  <option disabled selected> Please select</option>
  <option> Yes </option>
  <option> No </option>
</select>

En faisant de l'état par défaut un "choix" valide, vous risquez que l'utilisateur l'ignore ou ne le considère pas. Que ce risque soit acceptable ou souhaitable dépend de la situation.

4
Beejamin

Pour votre cas particulier, il semble que vous ayez besoin d'ajouter une troisième option "N/A" qui est sélectionnée par défaut.

En ce qui concerne l'utilisation des cases à cocher par rapport aux radios oui/non, je pense que les cases à cocher fonctionnent mieux dans les situations où les champs ont tendance à rester "tels qu'ils étaient" lorsque l'utilisateur a entré le formulaire pour la première fois.

Par exemple:

sample of multiple check boxes grouped together

Avec un regroupement approprié par le concepteur UX, cela permet aux utilisateurs de sauter rapidement les zones du formulaire qui ne sont pas pertinentes.

Le bouton radio, dans la façon dont vous montrez qu'il est utilisé, souligne qu'un choix est nécessaire, mieux qu'une case à cocher qui pourrait être laissée vierge.

4
mpr

Comme beaucoup d'autres réponses l'ont dit, cela dépend du contexte

Je voudrais ajouter cependant que cela dépend non seulement de la question que vous posez, mais aussi de la façon dont vous voulez que l'utilisateur réfléchisse à la question et à sa réponse. Une boîte radio nécessite une action pour se déplacer tandis qu'une case à cocher peut être survolée.

Comme le dit DenR89, vous ne pouvez jamais être sûr si une case à cocher a reçu une réponse négative ou ignorée. Parfois, ça va. Parfois, vous devez être certain que l'utilisateur a compris la question et fourni une réponse honnête. Par exemple, sur une proposition d'assurance automobile, vous pouvez utiliser une boîte radio pour:

Do you own the car?
( ) Yes ( ) No

Comme il pourrait y avoir des implications juridiques pour supposer cela incorrectement. Cependant, vous pouvez utiliser une case à cocher dans le même formulaire pour:

[ ] Include breakdown cover

Lorsque la valeur par défaut (pas de couverture de panne) est correcte pour la plupart des gens et n'affectera pas la validité d'une police d'assurance si elle est manquée.

Très grandes formes

Les gens s'ennuient/sont frustrés par de très grandes formes. Pour ces cas, je suggère des boutons radio car cela oblige les gens à lire la question et à faire un choix, empêchant la paresse de laisser les gens parcourir les cases à cocher.

Cela ne s'applique vraiment que lorsque nous parlons d'une case radio oui/non/nulle vs une seule case à cocher. Si la boîte radio est initialement dans un état "non", c'est essentiellement la même chose qu'une case à cocher. Si vous pouvez remplacer les plusieurs questions par:

Do you have:
[ ] Thing 1
[ ] Thing 2
[ ] Thing 3
...

Alors c'est une question complètement différente.

3
Kichi

A mon humble avis

Boutons radio

  1. L'utilisateur ne doit pouvoir sélectionner qu'une seule option

    (o) Canard () Oie () Vengeur Condor de la mort

  2. AUCUNE réponse n'est une réponse. Une fois que vous avez sélectionné (cliquez sur un bouton radio) l'une des 3 options de l'exemple précédent, vous ne pouvez que modifier votre sélection, pas la désélectionner.

Cases à cocher

  1. L'utilisateur peut sélectionner plusieurs options

Garnitures: [] Fromage suisse [x] Fromage étrange [] Viande mystère [x] Vert soya

  1. AUCUNE réponse n'est une réponse valide. c'est-à-dire que dans l'exemple précédent, vous pouvez décider que vous ne voulez pas de garnitures.
2
raubvogel

Aucun des deux n'est correct.

Les radios et les cases à cocher sont toutes deux conçues pour les listes . Par conséquent, ils seraient utilisés dans un cas comme celui-ci où il y a plusieurs options d'adjectif (nombres/quantités) ou de nom (objet 1, 2, 3) demandées (au moins deux éléments).

Which of the following do you have?
- Whatever 1
- Whatever 2
- Whatever 3

La différence est que les radios limitent votre sélection à une seule option tandis que les listes de contrôle vous permettent de sélectionner plusieurs options (c.-à-d. Quelle est votre couleur préférée? (Radio) vs quelle (s) couleur (s) aimez-vous? (Liste de contrôle)).

Ce que vous essayez d'accomplir ne nécessite ni radios ni cases à cocher car il ne s'agit pas d'une liste mais plutôt d'une telle ou telle déclaration. Cela nécessite à la place des boutons. Cela se produit généralement sur les logiciels à la suite de questions telles que "Êtes-vous sûr de vouloir supprimer cela?" ou "Voulez-vous installer ce logiciel?"

enter image description here

Comme il s'agit d'un formulaire Web, il est probable qu'il utilise des boutons radio HTML. Je voudrais modifier le code comme ceci pour masquer les cercles radio car vous ne montrez que les options oui ou non.

2
Davbog