Deux boutons à bascule sont-ils meilleurs qu'un interrupteur à trois états?
J'ai une grille de personnes où, pour chaque personne, l'utilisateur doit décider d'inclure la personne dans un groupe prédéfini, de l'exclure du groupe ou de la laisser indécise. L'état initial est indécis. Avoir deux boutons radio ne fonctionnera pas parce que l'utilisateur devrait pouvoir revenir à "indécis" après avoir initialement sélectionné "in" ou "out" (c'est pourquoi this est une question différente).
Deux approches sont apparues. L'une consiste à avoir deux boutons à bascule, et l'autre à avoir un "commutateur" à trois états (qui est essentiellement un groupe de trois radios, visualisées différemment).
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
- Les boutons à bascule s'excluent mutuellement (un seul peut être sélectionné, mais les deux peuvent être désélectionnés)
- C'est à l'intérieur d'une grille assez chargée, donc l'immobilier (largeur de colonne) est certainement un facteur
- Ce n'est pas une interface tactile
Quelle est la meilleure approche ici? Avantages et inconvénients?
Conception pour le micro-workflow
Observations
La plupart des utilisateurs feront une sélection et continueront, comme vous l'avez noté. Les utilisateurs ne sont pas très susceptibles de désélectionner un choix, immédiatement ou après.
In et Out sont les principaux choix ici. Le choix indécis est une valeur par défaut non biaisée.
- Les choix nuls/par défaut/indécis/inconnus sont souvent très difficiles à concevoir correctement, et les concepteurs n'y pensent souvent pas assez lorsqu'ils conçoivent des contrôles.
- Les programmeurs sont souvent meilleurs dans ce domaine par habitude (pensez à
nullvs''vsundefineden javascript), mais même alors, la sémantique est souvent facile à bousiller.
L'alignement de la grille et l'économie d'espace sont importants .... étant donné qu'il existe de nombreux autres contrôles sur la page.
Une conception possible
La logique de conception est la suivante:
Rendre les choix principaux clairs. Les gros boutons offrent des points d'atterrissage faciles pour le curseur, et les options principales sont visuellement claires.
Souligner le choix indécis. Vous pouvez le masquer jusqu'à ce que l'utilisateur fasse un choix (exemple du haut), ou le garder affiché (exemple du bas et probablement mieux). Ce bouton est une option/un scénario relativement rare, il n'est donc pas nécessaire de le promouvoir au premier plan des sélections principales.
Débarrassez-vous des icônes. Ceux-ci ne font qu'ajouter de l'encombrement visuel et occupent de précieux biens immobiliers horizontaux.
Pensez à ajouter une coche au bouton sélectionné pour plus de clarté (exemple du bas).
Gardez les boutons conformes à la grille pour la compacité et pour calmer l'interface globale.
Sur bascule vs tri-état ...
Cette réponse (espérons-le) illustre qu'aucune des deux approches n'est intrinsèquement meilleure que l'autre. Je crois que la façon de décider entre les deux est de définir les objectifs et les contraintes de conception, réfléchir soigneusement à ce que signifie l'état nul , puis la conception la tâche devrait devenir beaucoup plus claire.
Si cela ne vous dérange pas de masquer les options disponibles à première vue, vous pouvez également utiliser un combo au lieu de boutons radio qui pourraient vous faire économiser une certaine largeur de colonne.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je suggérerais un ensemble de trois boutons radio: un pour "in", un pour "out" et un pour "indécis".
Les bascules mutuellement exclusives nécessiteront probablement beaucoup d'explications et pourraient laisser l'utilisateur confus: une paire de boutons basculés semble offrir 4 combinaisons différentes (A +/B +, A +/B-, A-/B +, A-/B-) mais vous allez devoir expliquer qu'il n'y en a que trois (A +/B-, A-/B +, A-/B-). En plus de cela, la troisième option n'est jamais explicitement affichée dans les paramètres de contrôle - dans votre cas, vous affichez "in" ou "out" mais "indécis" n'est affiché que par l'absence de tout autre paramètre. Cela nécessiterait également des explications supplémentaires.
Un ensemble de trois boutons radio exclusifs devrait faire exactement ce que vous voulez: les trois options sont visibles et le fait que l'utilisateur ne peut en sélectionner qu'une est indiqué par un modèle établi.
La première option est meilleure, avec la bascule. La raison en est que les utilisateurs ayant reçu des instructions claires sur les réponses possibles sont plus susceptibles de les comprendre et d'y répondre (correctement) que lorsque les instructions sont masquées. Dans le cas du tri-switch, il y a deux options visibles et une option invisible. Chacun a trois états, mais ce dernier a une option qui n'est pas inhérente, ce qui signifie que vous devrez fournir des instructions ou espérer que l'utilisateur pourra "comprendre".
Selon votre démographie, cela peut ne pas être un problème. Les utilisateurs plus jeunes et plus avertis recevront le commutateur avec une seule instruction. Cependant, depuis que j'ai changé d'emploi pour une entreprise dont la démographie est constituée de Blancs de 55 ans et plus, même des instructions simples ne suffisent pas toujours. Par exemple, votre exemple de trois boutons ne fonctionnerait pas: le bouton indécis ne répertorie pas qu'il est indécis, mais seulement qu'il a un point d'interrogation. Dans mon univers, cela signifie "J'ai une question et cliquer sur ce bouton me permettra de la poser ou de donner des conseils".
Pour répondre à votre question, la fréquence de cette action doit être prise en compte.
Basse fréquence:
Les utilisateurs ne se souviennent pas de leurs options lorsqu'ils ne les utilisent pas régulièrement et les options doivent donc être facilement identifiables et compréhensibles.
Compte tenu de l'espace d'écran que vous avez mentionné et pour que les utilisateurs comprennent facilement leurs options, je suggérerais également une liste déroulante similaire à celle de Vincent.
Bien sûr, la liste déroulante ajoute un clic supplémentaire pour accéder aux options, mais c'est correct car l'objectif principal ici est de faire identifier et décider de la prochaine action de l'utilisateur sans trop de tracas. Par conséquent, il est recommandé d'utiliser des éléments d'interface utilisateur que l'utilisateur connaît déjà pour les écrans qui ne sont pas fréquemment utilisés.
Haute fréquence:
Si cet écran est souvent utilisé et que les utilisateurs doivent souvent basculer entre indécis, entrants et sortants, une liste déroulante va frustrer l'utilisateur. Ici, les utilisateurs devraient avoir un accès rapide à leurs options.
Dans ce cas, je recommanderais le commutateur à trois états. La courbe d'apprentissage est faible lorsque les utilisateurs utilisent fréquemment cette bascule et pourront donc en temps voulu s'adapter à votre commutateur à trois états. Mais, je ne suggérerais pas un point d'interrogation.
Veuillez consulter ma maquette ci-dessous. C'est un simple commutateur à trois états avec du plaisir ajouté, ce qui pourrait entraîner un meilleur engagement de l'utilisateur. Il s'adaptera à l'immobilier que vous avez décrit. Mais, ne tenez compte de ma suggestion que si cette action bascule est fréquemment utilisée. Merci
Il semble y avoir deux problèmes à résoudre
Tri-état explicite ou implicite? À l'unanimité pour des raisons données, le tri-état explicite est préférable
Visualisation compacte des tri-états explicites Trois boutons, un groupe de boutons radio, une combo font tous le travail. Mais une autre interface utilisateur qui aide à communiquer clairement la connectivité des concepts est également le curseur - ou d'autres visuels similaires rappelant une échelle de likert
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Votre solution est toujours un bouton radio. Il s'agit d'un bouton radio avec trois options: "entrée", "sortie" et "indécis"; dont "indécis" est la valeur par défaut. Si vous indiquez clairement "indécis" comme troisième option, il n'y a aucune ambiguïté pour l'utilisateur.
Il n'y a aucune raison UX pour laquelle vous ne pouvez pas sélectionner une option de bouton radio, puis la modifier plus tard, de la même manière que la sélection de boutons à bascule ou la saisie de choses. Je ne sais pas d'où vient votre idée préconçue selon laquelle cela ne serait pas acceptable. Si votre conception lance un tas de choses lorsque vous sélectionnez l'une ou l'autre, je peux comprendre comment cela compliquerait votre mise en œuvre, mais dans ce cas, vous commenceriez probablement avec la mauvaise conception en premier lieu.
Bien que certains guides de l'interface utilisateur suggèrent que les cases à cocher ne devraient être utilisées que dans les cas où toute combinaison de sélections serait valide, je suggérerais (et certains concepteurs semblent d'accord avec moi) qu'elles sont également appropriées dans de nombreux cas où, compte tenu de combinaison d’états précédents et d’état cliqué, il serait "évident" quelle serait la prochaine combinaison d’états souhaitée.
Dans la situation particulière où les cases à cocher représenteraient un choix avec la sémantique "A, B ou ni l'un ni l'autre [avec" les deux "n'étant pas un choix valide], le choix d'utiliser un bouton à trois états ou une paire de vérifications -les boîtes dépendraient de la question de savoir si le cas "ni" ne représente un État en soi, par rapport à l'absence d'autres États. Par exemple, la case "Police" pour les années 1990 MS-Word avait des cases à cocher pour "Toutes les majuscules" et "Petites majuscules", et pour "Exposant" et "Indice", à côté des cases pour "Gras", "Italique", etc. L'utilisation de cases à cocher pour tout donnait une apparence plus nette que celle des boutons radio, et évitait également la nécessité de créer des étiquettes pour les boutons "Pas toutes les majuscules ou les petites majuscules" et "Pas en exposant ou en indice".
Si l'on utilise un bouton à trois états pour "inclure", "exclure" ou "indécis", ce dernier choix suggérerait que leur état soit défini sur "indécis". Étant donné les cases à cocher "inclure" ou "exclues", laisser les deux cases non cochées suggérerait que les personnes soient laissées à l'intérieur si à l'intérieur ou à l'extérieur si à l'extérieur. Si cette dernière sémantique est prévue, l'utilisation de cases à cocher pourrait être préférable.
Entre vos deux options mentionnées, l'option deux boutons à bascule sera une bonne méthode. Avantages:
- des opportunités claires
- ne distrait pas du contenu principal
exemples existants:
boutons upvote/downvote sur divers sites comme celui-ci (stackexchange), reddit, quora etc.
[p.s. étant donné que les éléments seraient à l'intérieur d'une grille occupée, la mise en œuvre d'un design mettant l'accent sur les visuels attirerait beaucoup l'attention et ajouterait à l'agitation.]
C'est celui qui devrait être testé car je n'ai aucune idée si cela fonctionnera. Je voulais proposer quelque chose qui utilise des éléments communs et montre toutes les options de manière compacte. L'idée est de laisser de côté l'étiquette "indécis" en utilisant deux cases à cocher.
Pourquoi des cases à cocher? Il devrait être commun aux gens que si aucune option n'est souhaitée, il suffit de les décocher. Il est inévitable que les gens pensent que les deux peuvent être vérifiés. Cela peut être résolu de deux manières:
- en désactivant l'autre case à cocher lorsque l'une est cochée:
- avec un message lorsque les gens essaient de vérifier les deux. Dans cet exemple, "Out" a été cliqué:
J'aime mieux le numéro 2 car cela ne donne pas l'idée que vous êtes coincé avec votre choix et est plus utile lorsque quelqu'un ne comprend pas l'intention.
Vous pouvez utiliser trois boutons radio avec leur couleur d'arrière-plan colorée en Rouge = Out, Jaune = Indécis et Vert = In (ceci parce que vous avez mentionné une grille occupée (liée)) et utilisez une légende expliquant la signification de la couleur.
Pourquoi ne pas simplement utiliser une colonne de case à cocher à trois états intuitive (si elle est disponible)?
Il économise de l'espace et représente correctement vos données (si/quand les utilisateurs connaissent ces commandes).