web-dev-qa-db-fra.com

Meilleures pratiques UX - sélection d'un élément parmi deux éléments

Je travaille sur un site Web. Dans l'un de mes formulaires, je dois sélectionner le type de formulaire (selon le type de formulaire, les autres champs changeront leur comportement, par exemple l'état désactivé et leurs espaces réservés).

Il n'y a que deux types disponibles: "type A" et "type B".

Je me demande quelle est la meilleure pratique/règle empirique dans ce cas.

Je peux penser à ces options (même si je suis sûr qu'il y a des options supplémentaires auxquelles je n'ai pas pensé):

1. Liste déroulante (html <select> tag)

C'est une bonne option car je pourrais ajouter des types supplémentaires à l'avenir; cependant, ça n'a pas l'air si agréable.

A drop-down list with two items: "Type A" and "Type B"

2. Boutons radio (html <input type="radio"> tag)

Cette option me permet également d'ajouter des types supplémentaires à l'avenir, mais elle occupe plus d'une ligne (de mon formulaire) que je n'aime pas (tous les autres champs du formulaire occupent des lignes simples).

Two radio buttons, labelled "Type A" and "Type B"

3. Basculer le curseur (html <input type="checkbox"> tag avec un certain style pour ressembler à un curseur)

Cette option est une case à cocher (dans les coulisses); par conséquent, je peux basculer entre seulement deux options. Cependant, au niveau de l'interface utilisateur, il a fière allure.

A toggle slider

P.S J'utilise Material Design dans mon site afin que les composants matériels puissent être une solution valable (cependant, la question n'est pas directement liée à celle-ci).

7
Gil Epshtain

La liste déroulante présente un inconvénient par rapport aux boutons radio et au curseur à bascule. L'utilisateur doit cliquer dessus pour voir les options possibles. Sur mobile (si c'est le cas), les listes déroulantes ne sont pas faciles à utiliser.

Je suis d'accord avec Owen Hughes sur la bascule.

Dans ce cas, j'irais avec les boutons radio. Mais il existe une alternative: vous pouvez utiliser un contrôle segmenté. Mais avec seulement deux options, les contrôles segmentés peuvent prêter à confusion, car il se peut que le segment sélectionné ne soit pas clair. Soyez donc prudent avec le design. Il serait également facile d'ajouter plus d'articles si nécessaire.

Étant donné que les segments du contrôle segmenté ressemblent à un bouton, l'utilisateur peut s'attendre à ce qu'une action soit effectuée. De cette façon, le changement des formulaires n'est pas inattendu comme ils le seraient probablement lors de l'utilisation d'une liste déroulante ou de boutons radio. enter image description here

17
BrunoH

Si vous voulez que l'utilisateur sélectionne 1 option d'une plage, je serais enclin à utiliser le bouton radio car c'est la convention. Ce serait mon rendez-vous.

Cependant, s'il y a un changement dans le formulaire en dessous, un menu déroulant ne serait pas une mauvaise idée non plus car l'interaction montre le changement à la suite de la modification de l'élément de liste déroulante.

En ce qui concerne la bascule, bascule pour la plupart indique une interaction de type on/off, donc je ne pense pas que ce soit la bonne chose pour ce que vous décrivez car la forme change le comportement par rapport à quelque chose qui devient actif /inactif.

Le bouton radio et la liste déroulante peuvent ne pas être jolis, mais il sélectionne le bon élément de formulaire en fonction de l'interaction que vous souhaitez que l'utilisateur fasse en utilisant des éléments qui sont la norme commune dans les formulaires.

5
UIO

Mettre à jour en répondant à votre question dans les commentaires:

Lorsque vous pensez à la fois aux boutons radio et à la balise de sélection, ils ont tous deux exactement la même chose mais de différentes manières. Ils vous permettent tous les deux de sélectionner un élément parmi les options x.

Ma règle générale est la suivante: si j'ai besoin de plus de 4 options, utilisez une liste déroulante pour garder mon formulaire propre, si j'en ai moins de 4, utilisez les boutons radio pour que mon utilisateur puisse voir toutes les options à la fois et faire son choix avec un simple clic.

3
Alin

Parmi les 3 options que vous avez proposées, les boutons radio ont le plus de sens pour moi dans le cas que vous avez décrit (avec seulement 2 options). L'avantage qu'ils ont sur une liste déroulante est que toutes les valeurs sont immédiatement visibles et, dans votre cas, il ne semble pas qu'elles devraient occuper 2 lignes - vous pouvez simplement les organiser horizontalement.

L'option de basculement du curseur comme décrit, IMO, est la moins appropriée. Ce type de contrôle est également appelé commutateur, ce qui me semble être un nom plus précis: comme Owen Hughes l'a mentionné, ils activent/désactivent généralement quelque chose dans l'interface utilisateur (c.-à-d. On/off), plutôt que d'agir comme un moyen de choisir entre deux valeurs arbitraires. Pensez à un interrupteur physique: il allume/éteint une lumière, plutôt que d'alterner la couleur de la lumière entre le rouge et le bleu.

1
Warren Payne

Pour une longue liste d'options, utilisez la case Sélectionner, sinon utilisez le bouton Radio. Toggle/Switch ne convient pas pour cela. Comme si vous demandez le sexe, gardez-le bouton Radio. Mais si vous demandez City, vous devez alors choisir la case Select.

0
UXPAPA