Pourquoi est-il impossible de désélectionner les entrées "radio" HTML?
En HTML, il existe actuellement deux types de contrôles de style "case à cocher":
- Case à cocher : permet d'activer/désactiver, plusieurs valeurs peuvent être sélectionnées
- Radio : Une seule valeur dans un groupe peut être sélectionnée, ne permet pas de désactiver les entrées individuelles
Si quelque chose n'est pas clair, voir la démo: http://jsfiddle.net/GYU8n/
Mon boeuf est avec des radios , et l'impossibilité de les "décocher" (ce qui est le comportement par défaut dans tous les navigateurs pour autant que je sache). Nous venons d'avoir un problème avec l'un de nos clients insistant sur le fait que nous devons nous débarrasser de l'option radio "Non applicable" sur un formulaire, mais le champ n'est pas obligatoire.
Voici le problème : Si quelqu'un sélectionne une option radio, peut-être par un mauvais clic, il n'y a aucun moyen de sortir à moins qu'une option "vide" soit fournie (formulation non pertinente). Tout comme une liste déroulante qui n'a pas d'option vide, mais la différence est que ne liste déroulante ne prend pas plus de place dans l'interface utilisateur si elle a 2 options ou 20. Avoir le sélectionnable les valeurs déjà présentes à l'écran, sans le clic supplémentaire dont la liste déroulante a besoin, sont excellentes - nous utilisons donc des radios tout le temps.
Je ne peux pas comprendre pourquoi les entrées de type radio ne peuvent pas être désactivées en cliquant sur l'entrée, et pourquoi ce comportement est la valeur par défaut. Cliquer sur une option différente est le seul moyen de désélectionner l'option actuelle, mais il est très probable que aucune des options ne soit requise ou applicable, donc une fois une valeur est sélectionné - une sélection est "verrouillée", quelle qu'elle soit.
Mes questions
Ce comportement est certainement délibéré et a nécessité une salle pleine d'experts pour se mettre d'accord, mais quelles pourraient être ces raisons?
Je pense aller à contre-courant et écrire du JavaScript pour changer ce comportement, par défaut, pour toutes les futures applications que j'écris . Y a-t-il une raison pour laquelle je ne devrais pas?
Les utilisateurs non technophiles ont-ils même une attente sur le fonctionnement des radios?
Est-il probable que les gens essaient de désélectionner les options radio en cliquant dessus à nouveau, en attendant un basculement et en étant frustrés?
Exemple
Regardez cette maquette: http://jsfiddle.net/f4vXj/1/
Comment cela pourrait-il être changé pour apparaître de la même manière avec toutes les options visibles, en utilisant des contrôles de style de case à cocher et sans exiger un vide radio qui elle-même nécessitera une étiquette comme N/A ou I don't want to fill in this field?
Si quelqu'un clique par erreur sur la mauvaise option, il est verrouillé pour sélectionner l'une des options.
Vous n'êtes pas censé laisser les boutons radio vides. Ils sont autorisés à être vides afin que vous puissiez éviter de définir des valeurs par défaut comme mentionné dans la question sur - définition d'un sexe par défaut . Vous ne pouvez pas ne pas choisir un sexe, c'est un champ obligatoire, bien que vous puissiez laisser une option "je préfère ne pas dire", etc. cependant, c'est différent que l'utilisateur ne touche jamais le bouton radio. Si le champ est obligatoire, ne pas définir de valeur par défaut permet un comportement extrêmement utile; Vous forcez l'utilisateur à remplir le champ et vous ne supposez pas de valeur par défaut.
Disons que c'est une question oui/non extrêmement importante; l'utilisateur est légalement responsable pour cette question oui/non. Vous ne pouvez pas choisir un paramètre par défaut pour l'utilisateur dans ce cas! Mais encore, cette option ne peut pas être laissée en blanc, ils doivent s'engager dans l'un ou l'autre. Comment est-ce utile? Vous attrapez cela en validation (de préférence en page). Cela vous permet de vous assurer que l'utilisateur a rempli le champ, plutôt que de supposer la valeur par défaut, ce qui peut être très important.
Quant à votre question supplémentaire: Quiconque a utilisé un formulaire Web (ou de nombreux formulaires OS) connaît le fonctionnement des boutons radio car ils sont si courants. La première fois qu'ils voient un bouton radio, ils peuvent cliquer à nouveau dessus pour essayer de le décocher, mais ils apprendront rapidement. Et plus important encore, les boutons radio fonctionnent comme beaucoup boutons physiques dans la vie réelle - initialement nommés d'après les boutons des radios qui partageaient la même fonctionnalité.
Vous appuyez sur un bouton, il va - cliquez, et il reste enfoncé dans un état où l'utilisateur ne peut plus appuyer à nouveau. Les autres boutons de la même commande font sortir les autres boutons. De vieux lecteurs de cassettes les utilisaient; en appuyant sur l'avance rapide ou la lecture, le bouton "Stop" est sorti car les deux fonctions ne peuvent pas se produire en même temps.
Les utilisateurs qui ont utilisé des boutons savent que vous ne pouvez pas "retirer" un bouton . La différence avec les boutons radio est que certains boutons poussent d'autres boutons.
Réponse à votre question principale: il s'agit d'un comportement hérité laissé par le bureau. C'est ainsi que les applications de bureau l'ont fait pendant des décennies avant l'arrivée du Web. Lorsque les éléments de formulaire sont apparus en HTML, ils ont simplement copié le comportement à partir du bureau. Les concepteurs originaux du bouton radio n'auraient probablement pas pu imaginer comment ce contrôle serait utilisé au fil du temps et n'ont pas anticipé ce besoin.
Ce que vous demandez n'est pas rare: la solution standard est d'avoir un choix qui est fondamentalement "pas de choix".
Extra: Je pense que si vous piratez les boutons radio, vous trouverez que beaucoup de gens n'essaieront jamais de "décocher" un bouton radio. Je ne ferais pas ça.
Crédit supplémentaire: Cependant, j'ai vu un autre hack qui pourrait vous plaire: utilisez plutôt des cases à cocher, mais ne permettez à l'utilisateur de cocher qu'une seule case. Il s'agit d'un contrôle que les utilisateurs sont habitués à décocher et ils surmontent souvent la confusion "hein, je ne peux que vérifier un à la fois".
Comme d'autres l'ont dit, il s'agit d'un comportement parfaitement normal et attendu.
Je pense aller à contre-courant et écrire du javascript pour changer ce comportement, par défaut, pour toutes les futures applications que j'écrirai.
Vraiment mauvaise idée. Vous créeriez des boutons que la plupart des gens comprennent d'une manière différente. Si vous avez besoin d'une fonctionnalité d'activation/désactivation, utilisez des cases à cocher, mais la modification de la fonctionnalité d'un type de contrôle existant va vous poser d'énormes problèmes.
Selon le W3C, le comportement par défaut des éléments radio sans contrôle par défaut réglé sur coché est non défini .
http://www.w3.org/TR/html401/interact/forms.html#radio
Les boutons radio sont comme des cases à cocher sauf que lorsque plusieurs partagent le même nom de contrôle, ils s'excluent mutuellement: quand l'un est activé, tous les autres portant le même nom sont désactivés. L'élément INPUT est utilisé pour créer un contrôle de bouton radio. Si aucun bouton radio dans un ensemble partageant le même nom de contrôle n'est initialement "activé", le comportement de l'agent utilisateur pour choisir le contrôle initialement "activé" n'est pas défini. Remarque. Étant donné que les implémentations existantes gèrent ce cas différemment, la spécification actuelle diffère de la RFC 1866 ([RFC1866] section 8.1.2.4), qui stipule:
À tout moment, exactement l'un des boutons radio d'un ensemble est vérifié. Si aucun des éléments d'un ensemble de boutons radio ne spécifie "VÉRIFIÉ", l'agent utilisateur doit d'abord cocher le premier bouton radio de l'ensemble.
Le comportement de l'agent utilisateur étant différent, les auteurs doivent s'assurer que dans chaque ensemble de boutons radio celui-ci est initialement "activé".
Bien que les navigateurs conviennent actuellement d'autoriser la désactivation des radiocommandes par défaut, cela n'est pas considéré comme le comportement attendu.
La réponse à cela est vraiment d'essayer de comprendre pourquoi ils sont appelés "boutons radio".
Dans les temps anciens - enfin, avant que le monde ne devienne numérique au moins - les radios avaient deux boutons de canaux prédéfinis. Celles-ci étaient mécaniques, et lorsque vous appuyez sur un bouton, le bouton précédemment enfoncé "surgit" et devient désélectionné. La même disposition a également été utilisée sur les amplificateurs, en sélectionnant le périphérique source. Dans cette application, il est encore plus évident que n'en avoir aucun n'est pas vraiment une option.
Ce comportement s'est répercuté sur le skeuomorphisme du bouton radio de l'interface utilisateur du logiciel.
Je ne dirai pas si c'est correct ou pas, juste que l'origine du comportement est cachée dans son nom.
Les boutons radio sont destinés à être utilisés dans les cas où vous avez vraiment besoin que l'utilisateur sélectionne quelque chose, c'est un moyen de forcer les utilisateurs à vous donner une entrée.
D'après ce que j'ai vu sur le Web, il n'y a pas de cas de piratage de boutons radio alors qu'il existe des exemples de piratage de cases à cocher où vous remarquerez que le système ne vous permet pas de sélectionner plusieurs vérifications. Du point de vue de l'utilisateur, il serait plus facile de comprendre qu'une seule option peut être sélectionnée dans une case à cocher vs laisser une sélection de radio vide.
Vous pouvez utiliser un petit bouton subtil (par exemple un petit `` x '') pour chaque groupe de radio. Une pression sur ce bouton efface les boutons radio du groupe associé. Cela peut donner moins d'encombrement que d'avoir tous ces boutons radio supplémentaires "n/a", et vous n'avez pas à penser à la façon d'étiqueter ces boutons radio supplémentaires.
Au lieu de diminuer les votes des autres, je préfère ajouter ma petite voix du côté opposé.
Les deux comportements sont nécessaires pour effectuer différentes tâches. Malheureusement, je suis tombé sur cette question lorsque j'ai eu besoin de faire le contraire du comportement par défaut. Maintenant, si vous pensez à l'accessibilité, alors si vous essayez de modifier le comportement par défaut en JavaScript - eh bien, vous êtes hors du jeu.
Maintenant, pour tous ceux qui défendent l'idéologie de la "saisie obligatoire": veuillez regarder autour de vous pour les cas d'utilisation réels. Par exemple, okcupid.com (c'est un site de rencontres) a beaucoup, beaucoup de questions qui s'intégreraient dans le contrôle de groupe radio, à moins qu'il ne soit conçu de manière rigide et imprudente pour se comporter comme une entreprise Java le gestionnaire cerveau-mort l'a conçu.
S'il y avait un contrôle qui pourrait fournir n choix de m, où n <= m, alors le groupe radio, tel qu'il est maintenant, le ferait être justifié comme un cas particulier de ce contrôle plus générique, mais, hélas, il n'y a pas un tel contrôle (les cases à cocher permettent un nombre variable de choix, restreindre le nombre de choix par programme briserait encore l'accessibilité).
La vraie solution est soit d'utiliser un combo/sélectionner avec l'option aucune plus toutes les autres options ou des radios pour toutes les options avec l'option aucune sélectionnée par défaut.
De Wikipédia:
Un bouton radio ou un bouton d'option est un type d'élément d'interface utilisateur graphique qui permet à l'utilisateur de choisir n seul d'un ensemble prédéfini d'options.
Vous devez donc fournir une option pour AUCUN si vous prévoyez d'offrir une option pour aucun sinon utilisez le combo.
Totalement d'accord avec l'OP sur celui-ci. L'argument selon lequel "vous ne poussez pas sur un bouton radio pour sélectionner entre 2 options" est totalement faux.
Jetez un œil à votre ordinateur ou à tout autre équipement électrique - vous appuyez sur un bouton pour allumer quelque chose et appuyez sur le même bouton pour l'éteindre. Ne pas autoriser la désélection d'un bouton radio n'est PAS intuitif pour les utilisateurs finaux mais exactement le contraire.
J'ai un cas où nous devons laisser les utilisateurs choisir d'afficher les anciennes données ou uniquement les données actuelles - ils ne veulent pas de 2 boutons radio parce que c'est une opération binaire (afficher/ne pas afficher). S'ils cliquent, puis changent d'avis, il n'y a rien pour les laisser faire, sauf un rafraîchissement de la page. Pourquoi ne devraient-ils pas pouvoir sélectionner/désélectionner l'option ONE? Il existe d'innombrables cas d'utilisation pour cette fonctionnalité. Vous ne soumettez TOUJOURS qu'une seule valeur (vrai/faux) afin que la logique ne soit pas rompue.
Bouton radio = champ obligatoire à valeur unique.
Un doit être sélectionné pour la soumission. Si vous voulez une option Aucun. faire la première radio "None".
Sinon, utilisez des cases à cocher - qui permettent la sélection multiple
Une solution purement UX pourrait consister à simplement ajouter l'astérisque rouge omniprésent (*) à la question, que presque tout le monde comprend comme "obligatoire".
Le problème principal avec le comportement des boutons radio semble être que, sur des questions conçues comme celle montrée sur le lien jsfiddle, l'utilisateur ne sait pas quoi faire si sa réponse est "aucune de ces réponses". La première pensée est de cliquer à nouveau sur un bouton en s'attendant à ce qu'il soit une bascule, ce qui est une capacité assez courante dans les boutons physiques.
L'ajout du marqueur "requis" confirme que l'utilisateur doit choisir l'une des options (et probablement laisser un commentaire désagréable, si possible, pour ne pas avoir fourni l'option de type "aucune des réponses ci-dessus".)
Cela peut être subjectif, mais je sentais vraiment que cela devait être dit. Je pense que le fonctionnement standard des boutons radio est déjà fantastique.
Je vais vous expliquer pourquoi.
Pensons à l'utilisateur pendant une seconde. Que faire si le bouton radio est déjà sélectionné sur ce dont l'Utilisateur a besoin pour remplir son formulaire? Cela ne fournirait-il pas une merveilleuse expérience utilisateur?
Réfléchissons à un scénario possible d'interaction avec l'utilisateur:
Fournir un clic/toucher de moins , que l'utilisateur peut ne pas avoir à gérer, offrira certainement une meilleure expérience utilisateur. Maintenant accordée, l'expérience globale de l'utilisateur peut avoir moins de chances d'être parfaite "Je n'ai pas à changer ma sélection", mais c'est possible. Surtout si la configuration est ainsi.
Les boutons radio ont déjà une option sélectionnée lorsque vous entrez dans la page pour la première fois. Encore une fois, cela est très subjectif, mais si la recherche utilisateur est bien effectuée, il pourrait être possible d'atteindre cet objectif sans toucher/cliquer avec le bouton radio si la valeur par défaut est la majorité de ce que les gens sélectionneront.
Des trucs assez géniaux si vous me demandez. Je suis d'accord avec les autres pour m'en tenir à l'utilisation standard et familière des boutons radio.
En fin de compte, je pense que cela dépend vraiment de vos objectifs pour le projet sur lequel vous travaillez.
Voici un exemple très simple de ce que je veux dire par une option déjà sélectionnée:
Je pense qu'il est assez déroutant d'avoir la fonctionnalité claire intégrée dans un élément radio dans la liste, par exemple. "Ne rien sélectionner". Chaque fois que j'ai vu cela sur le Web, je n'ai jamais compris pourquoi c'était le cas. Je ne pense pas que ce soit intuitif.
Je pense que la fonctionnalité " effacer la sélection " si nécessaire devrait être un bouton séparé - presque une réinitialisation. Ceci est particulièrement important s'il s'agissait par exemple d'un grand nombre d'éléments qui défilent. Le bouton "Effacer la sélection" doit se trouver sur la zone fixe de l'écran.
La chose ici est que si vous avez (un groupe de) bouton radio, cela signifie qu'il est obligatoire de sélectionner l'un d'entre eux (c'est ainsi que les radios sont conçues pour se comporter), elles sont toutes vides par défaut pour éviter à l'utilisateur de ne pas en choisir un et choisir la valeur par défaut. Si votre client veut un contrôle qui ne peut pas être choisi, vous devez utiliser des cases à cocher, et ne les faites pas se décocher les unes les autres, ce n'est pas comme cela qu'elles devraient fonctionner, si un utilisateur ne veut faire qu'un choix, il doit avoir la liberté et de nombreux choix aussi.
Je vois deux solutions:
avoir un bouton radio "autre" lorsqu'aucun des autres ne s'applique. Vous devriez même fournir un "autre" pour la sélection du sexe. Un transexuel peut ne pas se sentir "masculin" ni "féminin" et préférer une autre option. Ce que vous en faites est votre choix. Si vous voulez connaître le pourcentage d'hommes dans une enquête, vous pouvez ignorer les "autres" et ne compter que les hommes et les femmes.
Ajoutez une case à cocher au groupe de boutons radio et grisez l'ensemble du groupe lorsque la case n'est pas cochée. Vous pouvez nommer la case "sélectionner le sexe" pour l'exemple ci-dessus et la traiter comme si un bouton radio "autre" était sélectionné lorsque la case n'est pas cochée.