web-dev-qa-db-fra.com

Quels sont les avantages d'utiliser des boutons groupés ou à bascule plutôt que des boutons radio?

Je traite de nombreux formulaires de recherche complexes. Quand dois-je utiliser des boutons groupés (à bascule) à la place des boutons radio? Outre le fait que je trouve les boutons groupés plus propres et plus faciles à cliquer, je ne sais pas comment je peux vendre cela à d'autres. Les boutons radio peuvent parcourir plusieurs lignes, ce qui est un énorme avantage, mais on pourrait dire que si c'est le cas, alors pourquoi ne pas utiliser un menu déroulant? Dois-je supprimer complètement la radio si j'utilise des boutons groupés? L'utilisation des deux va-t-elle compliquer l'utilisateur? Je vous remercie!

Boutons groupés Bootstrap: https://v4-alpha.getbootstrap.com/components/button-group/

before and after

1
Mopo123

Vous avez posé pas mal de questions dans ce post.

Quand dois-je utiliser des boutons groupés (à bascule) à la place des boutons radio?

Je pense que les boutons à bascule sont la mise en œuvre la plus contemporaine de la sélection/ou. Le bouton radio étant l'ancien. Si vous optez pour un look moderne, vous devriez penser à utiliser des boutons à bascule. Les raisons incluent,

  • Plus de zone de frappe pour la sélection d'une option dans le cas du bouton à bascule. Les radios ne fonctionnent pas toujours sur les étiquettes.
  • Peut-être plus facile à saisir l'option sélectionnée car il n'y a pas de charge cognitive pour associer la bonne étiquette à la bonne radio.

Quelques problèmes

  • Il est important de noter que les boutons bascule ne fonctionnent pas bien avec les options ayant une longueur de texte plus longue. Les radios de haut en bas fonctionnent bien dans de tels cas.
  • Il est difficile ou non conventionnel d'afficher la navigation au clavier par onglet sur les boutons à bascule. Les utilisateurs connaissent bien les tabulations sur les radios que les basculements.

Alors pourquoi ne pas utiliser une liste déroulante?

Le plus gros problème des listes déroulantes est qu'elles cachent des valeurs. Les utilisateurs doivent aller ouvrir le menu déroulant pour voir les possibilités. Les radios et les bascules affichent les données à l'avance. Si l'immobilier le permet et que le nombre d'options est très faible, il faut opter pour des boutons radio/interrupteurs à bascule.

Les listes déroulantes, d'autre part, gèrent très bien l'évolutivité.

Dois-je supprimer complètement la radio si j'utilise des boutons groupés?

Je me méfierais de mélanger les deux métaphores. Je m'en tiendrai à un. En tant qu'utilisateur, cela pourrait me confondre sur la base de votre choix entre une radio et une bascule.

2
Sol

Fonctionnellement, ils font la même chose.

Je pense que cette façon de représenter un ensemble d'options est plus naturelle et fournit un ordre de lecture plus naturel. D'ailleurs, c'est moins formy je dirais, et donne une touche contemporaine à la forme.

La lecture semble plus naturelle, car la reconnaissance de ce qui est sélectionné intervient au moment de la lecture. Dans le cas de radios alignées horizontalement, vous le lirez: (non sélectionné) option a, (sélectionné) option b, (non sélectionné) option c. Le fait de ne pas avoir cette radio en cours de lecture la rend plus naturelle, me semble-t-il, dans les sélecteurs horizontaux bien sûr.

Mais soyez prudent avec longues listes de sélection - à un moment donné, la numérisation réduite des options à choisir peut devenir problématique. Avoir environ 5 options ou plus, ou/et leur longueur peut rendre cette approche très inefficace et les aligner verticalement peut être crucial. Pour ces cas, fournir ne liste de radio avec des options listées de haut en bas serait probablement le meilleur choix.

0
Dominik Oslizlo

N'oubliez pas que vous pouvez également combiner des groupes de boutons avec des listes déroulantes dans Bootstrap. Par exemple, vous pouvez répertorier les choix les plus courants en tant que premiers boutons du groupe, puis placer les choix moins courants dans une liste déroulante comme dernier bouton. Par exemple:

Bootstrap button group with dropdown

0
Gary Coker