Cases à cocher ou boutons radio: un seul ou zéro choix
Je crée une application Web de type quiz dans laquelle l'utilisateur doit répondre à une série de questions à choix multiples. Je dois décider d'utiliser des boutons radio ou des cases à cocher.
Je connais les conventions standard pour les boutons radio et les cases à cocher:
boutons radio sont utilisés lorsqu'il existe une liste de deux options ou plus qui s'excluent mutuellement et que l'utilisateur doit sélectionner exactement un choix. En d'autres termes, cliquer sur un bouton radio non sélectionné désélectionnera tout autre bouton précédemment sélectionné dans la liste.
cases à cocher sont utilisées lorsqu'il existe des listes d'options et que l'utilisateur peut sélectionner n'importe quel nombre de choix, y compris zéro, une ou plusieurs. En d'autres termes, chaque case à cocher est indépendante de toutes les autres cases à cocher de la liste, donc cocher une case ne décoche pas les autres.
Cependant, dans mon application particulière - l'utilisateur ne peut choisir qu'une seule option, ou ne faire aucun choix (c'est-à-dire qu'il ne peut en choisir plus d'une). En d'autres termes - il est parfaitement acceptable pour les utilisateurs de ignorer toute question qui, selon elle, n'est pas pertinente.
Un détail pertinent - TOUTES les questions sont visibles à la fois sur une seule page défilante (c'est-à-dire qu'il n'y a pas de boutons "Suivant" ou "Ignorer". L'utilisateur va faire défiler vers le bas, répondre aux questions qui la concernent et sauter celles-ci. qui ne sont pas.
Donc - je peux penser à trois options:
Utilisez les boutons radio et incluez un choix supplémentaire pour chaque question intitulée "Pas de choix", "Sans objet" ou quelque chose du genre.
Utilisez les cases à cocher et JavaScript pour vous assurer que, s'ils choisissent une deuxième case à cocher, elle désélectionne la première.
Utilisez les boutons radio et JavaScript pour leur permettre de désélectionner une sélection (par exemple, en cliquant à nouveau dessus. SurveyMonkey.com le fait)
Le gros problème de l'option # 1 est qu'elle ajoute beaucoup d'encombrement et de corruption inutile, et rend la liste moins lisible (c'est-à-dire qu'il est plus difficile de voir à quelles questions vous n'avez pas répondu). Cela donne également l'impression de sauter complètement la question n'est pas OK, même si c'est le cas.
Le gros problème avec l'option n ° 2 est qu'elle suggère à tort que vous pouvez choisir plus d'une option.
Le gros problème avec l'option # 3 est qu'elle implique un comportement caché (par exemple, en cliquant sur un bouton radio sélectionné pour le désélectionner).
Cela doit être une exigence assez courante, alors je me demande quelle est la meilleure pratique.
Ni l'un ni l'autre.
- Les boutons radio classiques sont destinés aux sélections uniques obligatoires. Je n'aime pas vraiment les boutons radio car ils sont difficiles à cliquer et il n'est pas évident (ou cohérent) de cliquer sur les étiquettes.
- Les cases à cocher classiques sont destinées aux sélections marche/arrêt uniques.
Les groupes de boutons sont parfois utilisés dans des situations où il y a un ou zéro choix:
![button group]()
Mais dans votre cas ...
- Vous avez beaucoup de questions sur une page, donc les limites d'un groupe de boutons sont difficiles à gérer visuellement (encombrement).
- Les boutons radio classiques ne sont pas une bonne option car les utilisateurs doivent pouvoir désélectionner une réponse. L'ajout d'un choix "sans réponse" crée probablement une charge cognitive inutile.
- Les cases à cocher peuvent fonctionner, mais il doit être clair comment elles sont liées (c'est-à-dire que cliquer sur l'une en désélectionne une autre).
Une approche à cela ...
Est d'utiliser des hybrides. Voici deux exemples de contrôles qui sont:
- Grand/facile à utiliser.
- Délibérément conçu pour ne pas trop ressembler aux boutons radio ou aux cases à cocher classiques afin que l'utilisateur soit (a) plus susceptible de comprendre qu'il peut cliquer à nouveau pour désélectionner une option; et (b) moins susceptibles d'être surpris lorsque cliquer sur une réponse en désélectionne une autre.
- Regroupés (police différente, en retrait) pour fournir un regroupement/îlotage spatial pour les groupes de réponses afin qu'il soit clair qu'ils sont liés.
- Fonctionne assez bien pour calmer une longue page de questions.
Je préfère celui de gauche, car les cases à cocher transmettent mieux la possibilité de désélection. Gardez à l'esprit que le symbole de contrôle est souvent associé à une affirmation positive, il peut donc créer un biais avec les questions.
Cela ressemble à ce que vous essayez pour une option "rien de ce qui précède". Une simple option de bouton radio à la fin de la liste ferait très bien l'affaire. Pas besoin de compliquer les choses.
par exemple.
Lequel des animaux suivants est un animal?
() Arbre
( ) Voiture
( ) Onde radio
(o) Aucune des réponses ci-dessus
Avez-vous envisagé de mettre chaque choix sur un bouton et de permettre aux boutons d'avoir des images distinctes déprimées et non déprimées? Javascript les codant comme vous le décrivez dans l'option 3 permettrait à vos utilisateurs de choisir zéro pour l'une des options fournies. Pendant ce temps, l'utilisation de boutons peut rendre le comportement caché plus intuitif.
Je suppose que votre utilisateur passera d'une question à une autre question/page à l'aide d'un bouton, appelons "Next".
Tout ce que vous avez à faire est de renommer votre bouton en 'Skip' jusqu'au moment où aucune case à cocher/radio n'est sélectionnée. Dès que l'utilisateur sélectionne au moins une option, le bouton passe à "Suivant".
Remarque: Utilisez la convention standard uniquement, pour Radio/cases à cocher.
J'espère que cela résout le problème. Et plz me dire si j'ai mal compris quelque chose.
Vous pouvez l'implémenter comme le fait le formulaire: faites défiler et ignorer les questions auxquelles vous ne voulez pas répondre, et laissez les boutons radio et les cases à cocher conserver leur comportement par défaut.