Pourquoi les boutons radio ne remplissent-ils pas tout le cercle extérieur?
Ma question est simple:
Pourquoi la plupart des boutons radio ne remplissent-ils pas tout leur cercle extérieur?
Exemple de bouton radio standard:
(Insolite) Exemple de bouton radio entièrement rempli:
Est-ce pour un raisonnement skeuomorphique ou quelque chose de complètement différent?
Question bonus: Est-il jamais acceptable dans une interface ou un système de conception d'utiliser des boutons radio entièrement remplis?
Il n’est pas tout à fait clair qu’un cercle noir signifie "oui" ou sélectionné, tandis qu’un cercle blanc signifie "non" ou non sélectionné. Selon ce que l'utilisateur considère comme premier plan et arrière-plan, cela peut aller dans les deux sens. Considérez cet exemple (plutôt artificiel):
Lequel est sélectionné? Celui qui "s'est allumé" comme une lumière? Ou celui qui est "rempli d'encre"?
Il y a une supposition implicite que la sélection doit inclure un ajout graphique de quelque chose. Ainsi l'ajout d'un cercle à l'intérieur du cercle. Cela peut également être pensé par analogie avec les cases à cocher, où vous ajoutez un chèque au carré pour afficher la sélection.
Cela "fonctionne" même lorsque nous cassons la norme et inversons les couleurs:
Cela implique que cela fonctionne également lorsque les utilisateurs ne connaissent pas les couleurs, ce qui est particulièrement important aujourd'hui lorsque nous ne sommes pas limités aux niveaux de gris. Pour cette raison, en plus d'être simplement non standard, j'éviterais toujours les boutons radio entièrement remplis.
Personnellement, je pense que le terme "boutons radio" se réfère métaphoriquement au comportement (que c'est une sélection parmi plusieurs), pas à l'apparence. D'autres facteurs historiques peuvent avoir déterminé l'apparence générale . Au moment où les interfaces graphiques ont été inventées dans les années 1970 et 1980, les boutons radio les plus courants étaient les préréglages des autoradios. Bien que je sois sûr que vous pouvez trouver une exception (je l'ai), celles-ci étaient généralement (1) rectangulaires, pas circulaires, et (2) ne l'ont pas pas indiquent un état sélectionné - une fois pressés, ils sont ressortis et n'ont pas montré de drapeau ou de lumière mécanique. Je ne pense donc pas que le skeuomorphisme y soit pour quelque chose.
Je suppose qu'un bouton radio complètement plein peut être facilement confondu avec un texte à puces:
Alors qu'un cercle vide donne une impression d'incomplétude: doit être rempli ou doit être rempli:
Même dans de nombreux cas, l'un de ces anneaux est déjà rempli, ce qui augmente le sentiment qu'ils doivent être remplis (vérifié):
Je considérerais l'accessibilité comme l'une des raisons de ce style de boutons radio en plus du bouton physique dont il est issu.
Lorsqu'un bouton est entièrement rempli, vous comptez sur la couleur du bouton pour indiquer son état. Cela pourrait dérouter beaucoup de gens, en particulier lors de l'utilisation de couleurs non standard.
Dans la première rangée d'images, l'une des images en elle-même ne transmet pas les informations concernant l'état du bouton. Peut-être qu'en noir et blanc, vous pourriez supposer un état, mais cela échouera pour d'autres couleurs.
Dans la deuxième rangée d'images, l'état du cercle intérieur indique clairement l'état du bouton.
Les boutons radio ont été inspirés par les boutons radio physiques (évidemment assez). Les boutons sortaient d'un cadre ou étaient "3d". Je les considérerais comme des signifiants. Ces signifiants ont fait leur chemin vers les premières interfaces. Pratiquement un bouton surgissant d'un cadre qui, une fois pressé, annulerait tous les autres boutons pressés.
À partir d'aujourd'hui, le bouton radio doit également être reconnaissable même après avoir été vérifié. Il serait donc préférable de l'avoir selon les "normes". Même si j'ai vu des exemples de boutons radio comme votre exemple et dans le contexte, je les ai identifiés comme des boutons radio pour certains utilisateurs, cela peut provoquer une certaine confusion ou non, mais des tests utilisateur peuvent être nécessaires.
Ceci est un bel article sur l'histoire des boutons radio: https://www.jitbit.com/alexblog/242-the-history-of-a-radio-button/
Comme dit dans l'article:
Les boutons radio sont nommés d'après les boutons réels utilisés sur les anciennes radios pour basculer entre les ondes radio et, parfois, les fréquences prédéfinies. Lorsqu'un bouton était enfoncé, tous les autres boutons ressortaient.
C'était donc une raison skeuomorphique.
Je crois qu'un bouton radio entièrement rempli dérouterait les utilisateurs, basé sur le principe de la "correspondance entre le système et le monde réel". Il déclare que:
Les interfaces qui suivent les conventions du monde réel et font apparaître les informations dans un ordre naturel et logique témoignent de l'empathie et de la reconnaissance des utilisateurs.
Les utilisateurs sont habitués aux boutons radio dans ce format sur d'autres sites Web, donc à moins que vous n'ayez une très bonne raison de changer cela, je pense que vous devriez utiliser la norme.
Parce que si un bouton radio coché était complètement rempli, il serait déroutant de dire quel bouton est réellement sélectionné, surtout s'il n'y a que 2 boutons radio. Vous pourriez tout aussi bien penser que le bouton "rempli de blanc" est actif au lieu de "noirci".
Bien que les autres réponses soient tout à fait valables, je pense qu'elles manquent un point clé: un bouton radio entièrement rempli serait invisible sur un fond noir. Le fait d'avoir des couleurs alternées sur l'élément sélectionné empêche cela en provoquant un contraste forcé dans le bouton radio.
Ce n'est pas directement une réponse à votre question mais quelques informations intéressantes sur le sujet dans son ensemble.
Le skeumorphisme est un aspect de l'interaction homme-machine - c'est un choix de conception qui relie un objet du monde réel avec une fonction connue à un objet numérique avec une fonction similaire. Cela fonctionne généralement parce que les gens développent des modèles mentaux pour la façon dont les choses fonctionnent. Lorsque nous reproduisons un élément numériquement avec une fonction similaire, son objectif est transmis automatiquement.
Le modèle mental du bouton radio est qu'un bouton radio peut être enfoncé pour faire une seule sélection. D'après cette compréhension, les sélections multiples étaient réservées aux cases à cocher, car le modèle mental est qu'une coche à côté d'un élément dans une liste indique une sélection.
Il y a quelques problèmes avec le recours à skeumorphsim et aux modèles mentaux, par exemple, que se passe-t-il si votre utilisateur n'a jamais rencontré de bouton radio dans le monde réel? Dans ce cas, ils n'auraient aucun modèle mental sur la façon dont cela fonctionne. Cela devient de plus en plus probable parce que certains des éléments du monde réel utilisés comme bases pour diverses constructions numériques datent des années 1960 et 1970. C'est ce que je pense que vous abordiez; le bouton radio est-il le bon objet à utiliser comme base du skeumorphisme pour un seul élément sélectionnable dans une liste aujourd'hui? Peut être.
Même si les gens sont moins susceptibles d'entrer en contact avec une vieille radio, la prévalence des sélecteurs de bouton radio sous forme numérique a donné à la plupart des gens un modèle mental de leur fonction. Comme mentionné dans d'autres réponses, une bonne conception devrait pouvoir indiquer quelle sélection a été faite par deux utilisateurs avec des modèles mentaux différents. Cela dit, il n'est pas nécessaire qu'un bouton radio soit à la base de ce type de sélection. Gardez à l'esprit qu'aller à l'encontre de la majorité des modèles mentaux des gens peut être difficile. Les tests utilisateurs peuvent vous aider à déterminer si le changement que vous proposez se traduira bien pour votre public cible. De bonnes avancées dans la conception ont été réalisées parce que quelqu'un était prêt à essayer une nouvelle approche et a perfectionné sa conception via des tests.
Je me souviens avoir vu des radios avec des boutons mécaniques où il y avait un indicateur visuel qui montrait lequel des boutons était pressé. Celui dont je me souviens avait des boutons noirs, et à l'intérieur il y avait des pièces mobiles, en forme d'une sorte de bec qui s'ouvrait lorsque le bouton était enfoncé montrant l'indicateur blanc au centre du haut du bouton. Cela ressemble à votre illustration, juste avec les couleurs inversées.