Pourquoi les boutons radio précèdent-ils les étiquettes?
Les boutons radio semblent toujours précéder l'étiquette et non l'inverse.
Y a-t-il une raison quelconque pour cela?
L'utilisateur ne lit-il pas d'abord l'étiquette avant de sélectionner un bouton radio?
Est-ce que cela a à voir avec l'abordabilité?
Quel modèle est plus convivial?
Du point de vue des utilisateurs purs, je vois deux raisons de le faire.
1. Les boutons radio servent de points de bulletin
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
La version gauche de cette liste semble beaucoup plus organisée car elle ressemble à une liste, tandis que sur le côté droit, il y a trois lignes de texte, avec des boutons à la fin.
Dans vos images d'exemple, ce n'est pas un problème, car vous mettez en surbrillance chaque choix avec sa propre boîte bleue personnelle, les séparant ainsi visuellement par d'autres moyens.
2. Espacement et espaces blancs
La maquette ci-dessus montre déjà un peu le problème. Si les options ne sont pas également longues sur le texte, les boutons radio alignés à droite peuvent être déplacés assez loin de l'option qu'ils représentent. Cela empire considérablement si l'élément d'interface utilisateur est beaucoup plus grand que les options. J'ai utilisé une boîte englobante pour refléter la largeur de l'élément, mais peut-être qu'il n'y a tout simplement aucun autre élément d'interface utilisateur à y mettre, et/ou la largeur de l'ensemble est déterminée par autre chose.
Par exemple, si vous considérez les cases ci-dessus comme une application que vous utilisez en mode portrait, lorsque vous tournez le téléphone de 90 °, cela pourrait ressembler à ceci:
Celui du haut n'est pratiquement pas affecté. L'espace supplémentaire n'est peut-être pas beau, mais ce n'est pas terrible, car il ne fait qu'ajouter à l'espace existant et n'a pas l'air particulièrement contre nature en raison d'un bord gauche déchiqueté.
Celui du milieu a des espaces devant et après le texte, et les boutons semblent mal placés, quelque part près du centre de la boîte.
Celui du bas n'a aucun lien visuel entre les boutons et le texte à mon avis. Sans aucune autre ligne directrice, c'est affreux.
Je pense que la clé ici est que le texte est aligné à gauche de toute façon, donc y ajouter une colonne de trucs alignés à gauche ne change pas grand-chose. L'ajout d'une colonne alignée à un bord irrégulier peut sembler étrange et l'ajouter à la colonne alignée suivante (la bordure droite) peut la déplacer trop loin.
Pourquoi je pense que cela peut fonctionner pour d'autres éléments de l'interface utilisateur
Je viens de me rappeler que mon propre téléphone a des cases à cocher et des commutateurs alignés à droite dans les paramètres (mais pas de boutons radio!). La principale différence ici semble être que les paramètres sont clairement séparés par une autre partie de l'interface utilisateur, qui est une fine ligne entre eux. Cette ligne guide également l'œil entre le texte et le commutateur. Notez que le fait de placer une ligne entre deux options d'une matrice de boutons radio peut les déconnecter visuellement d'une autre.