a écrit :
Là je ne comprends pas bien.
L'intérêt de la case radio est d'imposer un choix unique.
C'est un choix d'ergonomie qui peut se discuter mais qui dans la vie réelle fonctionne bien.
On a toujours deux problèmes à mon avis:
Initialement, tu voulais que ton bouton radio soumette le formulaire immédiatement. Si c'est toujours le cas, concrètement, tu effectues une action (ajouter au panier).
Donc ça doit être un bouton normal, pas un bouton radio.
Une action = un bouton normal. C'est fait pour ça. D'ailleurs tu l'as dit toi-même, tu caches le bouton radio pour afficher une icône de panier, alors pourquoi persister avec un bouton radio ?
Si tu as abandonné cette idée de soumission automatique, faisant de l'ajout au panier une action en deux temps (1/choix du produit, 2/ajout), ce qui est aussi une possibilité d'interface tout à fait valable, alors en imposant des boutons radio plutôt que des cases à cocher, en fait tu compliques inutilement la vie de celui qui veut commander plusieurs produits.
Avec des boutons radio, il faut 1/cocher le premier produit, 2/ajouter au panier, 3/cocher le second produit, 4/ajouter au panier.
Avec des cases à cocher, 1/cocher le premier produit, 2/cocher le second produit, 3/ajouter au panier
Sachant que ça ne change absolument rien pour celui qui ne veut commander qu'un seul produit, tu n'as rien à perdre que de mettre des cases à cocher.
En plus avec les boutons radio, l'utilisateur pourrait ne pas remarquer que le le second choix annule le premier, et il pourrait se demander ensuite mais pourquoi il n'est pas dans mon panier ? Bien sûr on peut toujours revenir en arrière et ajouter ce qui manque avant de passer à la caisse, mais ça reste des manipulations en plus qui auraient pu être évitées.
On pourrait se faire la réflexion inverse, mais au-delà de la forme carrée ou ronde du bouton, c'est une question de logique. A mon avis, quand je sélectionne un second produit, le premier ne devrait pas être déssélectionné. Sauf si c'est pour sélectionner une variante d'un produit donné comme la couleur ou la taille, où là effectivement je serai d'accord avec toi, c'est logique aussi, il est bien plus probable que je veuille prendre soit le bleu soit le rouge et pas les deux.
C'est ce genre de réflexion qui amène à faire le choix d'interface, radio ou checkbox.
Au final, encore plus que des cases à cocher ou des boutons radio, des boutons normaux qui ajoutent immédiatement au panier sont encore plus simples !
Sur un site où je commande régulièrement, il y a une page distincte pour chaque variante, et honnêtement c'est ce que je trouve le plus simple. Il n'y a pas trop de doute. Sur la page du produit en bleu, le rouge et le noir sont proposés, et ça ouvre la page correspondante par un lien classique.
Plus on simplifie la vie de l'utilisateur, plus on augmente les chances qu'il arrive au bout de sa commande et qu'il revienne. Ca a été prouvé, et ça peut avoir économiquement des conséquences très concrètes.
Personnellement je ne compte plus le nombre de fois où j'ai été embêté pour l'une ou l'autre mini bêtise, bizarrerie ou inaccessibilité de l'interface et qui, du coup, ont fini par me faire abandonner et aller voir ailleurs où c'était plus simple.
a écrit :
Qu'en penses-tu en terme d'accessibilité ?
Rien de particulier, je n'y vois pas de problème.
a écrit :
En version mobile (<= 768px) ce deuxième bouton est en display none car le footer est en position static.
En version mobile mon idée à présent est de passer le footer en position fixed (bas de page) et d'afficher l'alias de soumission, donc identique version PC.
Je sais qu'à une époque les navigateurs des téléphones détestaient position fixed, en général ne respectaient pas cette déclaration.
Esr-ce toujours le cas, on peut espérer que cela a évolué avec la hauteur des écrans de téléphone ?
Aucune idée, je ne peux pas te répondre.
Ce qui est certain par contre, c'est que pour un lecteur d'écran, position: fixed; ne change absolument rien. C'est toujours l'ordre dans le DOM qui fait foi.
Au passage, display: none; sur le bouton submit bloque également l'envoi direct en appuyant sur enter dans n'importe quel champ, car c'est comme s'il n'était pas là.
Modifié par QuentinC (07 May 2025 - 07:31)