Ah là là, les formulaires, on en parlera jamais assez !
Pas si facile de faire un bon formulaire, clair, lisible, et qui transforme bien.
Une erreur très classique est, pour gagner de la place, de mettre des boutons radios en ligne :
Erreur, car en regardant rapidement, la sélection n’est pas du tout intuitive. Le bouton du milieu permet il de sélectionner le brun ou le vert ?
Pareil en fait avec des boites à cocher :
ça n’a l’air de rien, mais ce sont bien ce type d’erreurs qui attaquent le taux de transformation d’un site, parce que l’impression de l’internaute n’est pas « rassurante ».
La solution en occurrence, c’est soit de mettre une option par ligne, soit de bien séparer les options, de manière à ce que l’association entre le bouton et le libellé soit évidente.
Tu confonds là ergonomie et présentation : deux concepts proches cependant différents.
Pour garder ton exemple, on peut tout à fait garder des boutons radios PRESENTES en ligne tout en conservant une bonne ergonomie pour l’internaute. Comment ?
Tout simplement, en lui permettant de cliquer aussi sur le libellé, qui cochera ainsi la bonne case ou le bon bouton radio.
Si ton interface est faite en html, il suffit d’utiliser les balises . C’est d’ailleurs conseillé. C’est le genre de chose qui fait qu’un site est « accessible » ou non.
Si ton interface est faite en html, il suffit d’utiliser les balises « label » (le commentaire a pris ça pour une balise html et l’a viré)
et pour mettre tout le monde d’accord, pourquoi ne pas ajouter « cliquez sur votre choix », n’oublions pas que l’internaute lambda a encore besoin d’être guidé…
Pas d’accord avec vos commentaires, ceci relève de l’ergonomie, on parle bien ici d’interface homme-machine non ?
Oui il faut rendre le texte cliquable, mais ça n’aide pas visuellement, le problème qui nous intéresse ici c’est l’aspect visuel.
Il y a plusieurs solutions:
– placer les choix en colonne
– placer les choix en lignes en laissant un espace suffisant pour rendre la proximité bouton radio – intitulé plus claire.
– placer les choix en ligne et placer le bouton radio au dessus de l’intitulé.
Cette dernière solution n’étant que rarement utilisée, votre visiteur aura tout de même un moment d’hésitation.
Bonne journée
@Vince> Merci, j’ai plus besoin de répondre 😉
Je ne suis pas d’accord avec l’erreur classique d’ergonomie évoquée dans cet article.
Lorsqu’un gain de place en hauteur est indispensable dans un formulaire, il est tout à fait possible d’organiser de manière linéaire un groupe de boutons radio. Comme l’a listé Vince en 2ème solution, il suffit d’appliquer les lois de proximité et d’éloignement afin d’optimiser la correspondance mentale du bouton radio avec son intitulé. Maintenant, tout dépend aussi du nombre d’intitulés et de leur longueur, mais delà à dire que les boutons radio en ligne sont une erreur d’ergonomie… non.
J’étais parti toute la journée, dommage de pas avoir pu participer à cette joyeuse discussion 😉
Let, c’est marrant, parce que tu dis que tu es pas d’accord, alors que ce que tu proposes, c’est également ma recommandation ;).
Salut François, oui j’ai sauté sur la phrase « Une erreur très classique est, pour gagner de la place, de mettre des boutons radios en ligne : », car tu parles de la disposition linéaire dans sa globalité comme étant une erreur, alors que tu préconises plus loin de garder cette même disposition en faisant juste attention à l’espacement. C’est marrant, effectivement :), d’autant que je n’avais pas vu cette dernière ligne, qui précise tes recommandations.
Aaah, les discussions sur l’ergonomie sont toujours passionnantes ! 😉
bah si la conclusion est la même … 🙂
Je trouve cette remarque très pertinente et c’est de pile de l’ergonomie.
C’est un classique : le cerveau regroupe les éléments proches. Si pour nous, utilisateurs experts, il est évident que le radio est avant le label, pour un utilisateur lambda, c’est n’est pas EVIDENT.
Son cerveau fait un travail de regroupement et effectivement, il va hésiter à regrouper le label central avec le radio gauche ou le radio droit.
Hésitation = temps perdu = frustration = baisse du taux de transformation.
Il suffit de bien espacer les éléments qui ne doivent pas être regroupés pour corriger cela.
Avec une taille fixe de label qui permet d’avoir un grand espace entre le label et le bouton suivant le tour est réglé.
++
Utiliser une liste déroulante plutôt qu’un bouton radio et une alternative qui me parait évidente, non ?
@Jul> Intéressant mais pas forcément.
Une liste déroulante ne présente pas toutes les alternatives directement.
Il faut voir au cas par cas, mais parfois, le bouton radio est plus adapté que la liste déroulante.
Et je ne parle pas des boites à cocher…