Un bouton à bascule doit-il afficher son état actuel ou l'état dans lequel il va changer?
J'ai une petite question sur les boutons qui basculent entre deux états. (Pensez à Play/Pause ou Shuffle/Regular Play.) Comme le titre l'indique, la bascule doit-elle afficher son état actuel ou l'état vers lequel elle passera?
Je pense que les gens sont habitués à la convention Play/Pause. Mais le jeu Shuffle/Regular peut être plus déroutant si vous montrez l'état de transition au lieu du courant. Par exemple, le lecteur de musique intégré sur la Xbox 360 le fait de cette façon: lorsqu'il est en mode aléatoire, il affiche l'icône pour la lecture directe et vice versa et cela me perturbe toujours (suis-je en mode aléatoire ou en lecture directe).
Je le vois de cette façon: Play/Pause ressemble plus à une action comme commencer à jouer ou suspendre la lecture. Oui en coulisses c'est une transition d'état mais pour l'utilisateur, il y a une action. Alors que Shuffle/Straight Play est une option et il est préférable d'afficher l'état actuel (et éventuellement de n'avoir qu'une seule icône et un bouton de modification pour montrer que l'option est activée/désactivée). Pensées?
Dans About Face 2. (il y a une v3 mais je ne l'ai pas) Cooper et Reimann (2003, pp. 341-2) traitent ce sujet sous le rubrique "Boutons flip-flop: un idiome de sélection à éviter". Je vous suggère fortement de consulter ce livre car je n'en présenterai qu'un extrait:
Les commandes des boutons à bascule sont très efficaces. Ils économisent de l'espace en contrôlant deux options mutuellement exclusives avec un seul contrôle. Le problème des commandes à bascule est qu'elles ne remplissent pas le deuxième devoir de chaque commande - informer l'utilisateur de leur état actuel. Si le bouton indique ON lorsque l'état est désactivé, le paramètre n'est pas clair. S'il est désactivé lorsque l'état est désactivé, où est le bouton ON? Ne les utilisez pas. Pas sur les boutons et pas sur les menus!
Les auteurs (et je pense à ceux-ci comme une autorité sur le sujet) présentent deux solutions possibles: Vous devez soit épeler l'action du bouton comme une expression verbale (par exemple, Passer en mode portrait, sacrifiant ainsi une partie de l'espace économisé) ou utiliser une autre technique entièrement ( par exemple, deux boutons radio).
Réponse courte:
Une réponse assez tardive, mais je suis surpris que personne ici ne l'ait signalé auparavant - il est possible qu'un interrupteur à bascule affiche son état actuel et l'état dans lequel il passera simplement en ayant du texte à l'extérieur du bouton, au lieu de dessus.
Réponse longue:
Comme le fait remarquer dotancohen:
Le problème est qu'en anglais "on" et "off" sont à la fois des adverbes et des adjectifs.
Les boutons qui ont du texte en dehors de leur corps utilisent ce fait à leur avantage! Continuer à lire...
Concentrons-nous sur l'état qui est bleu et dit SUR par exemple.
Pouvez-vous dire si le commutateur est actuellement sur ON, ou s'il continuera si vous déplacez/cliquez/appuyez sur le curseur? Le texte est-il évident? "ON" est-il ici un état (adjectif) ou une action (verbe)? Pas clair. La couleur est-elle utile pour vous aider à en décider? Probablement, mais pas certainement - les utilisateurs iOS peuvent être habitués aux états de cette conception, mais on ne sait pas comment les utilisateurs non iOS interpréteraient cela. Pour voir ce que je veux dire, prenez ce déclencheur de la vie réelle, qui a la même conception que le commutateur iOS - pouvez-vous dire avec certitude si le commutateur de déclenchement est actuellement sur ON?
L'interrupteur ci-dessous est dans le sens de la conception iOS, mais bien pire ...
... on ne sait même pas quelle moitié de la poignée coulissante/clic est!
La question de la citation de Jensgram ...
Si le bouton indique ON lorsque l'état est désactivé, le paramètre n'est pas clair. S'il est désactivé lorsque l'état est désactivé, où est le bouton ON?
... ne se pose jamais ici puisque le bouton ne dit ni ON ni OFF - il se tient tout seul. De plus, il n'y a pas de confusion sur le contexte des mots ON et OFF - ce sont très clairement des états (adjectifs) car cliquer dessus (dans la conception normale) ne ferait rien!
Il peut être intéressant de noter qu'une modification de cette conception permettrait de rendre le texte de l'autre côté du bouton cliquable/tapable. Si tel est le cas, le mot le plus proche de la poignée de commutateur est l'état, tandis que l'autre est l'action, et les rôles sont inversés lorsque le commutateur est basculé.
Même ainsi, la perspective de l'utilisateur sur le commutateur n'est pas modifiée - à aucun moment, l'utilisateur n'est confus quant à l'état actuel du commutateur. En fait, la conception pourrait être encore améliorée pour la convivialité en mettant en évidence l'état actuel:
La couleur du bouton indique l'état actuel (allumé = ON, comme dans la vie réelle), et les mots On/Off sous le texte de l'option rassurent l'utilisateur de l'état actuel.
Quoi que vous décidiez, veuillez ne pas faire ce que Twitter fait.
Le problème est qu'en anglais "on" et "off" sont à la fois des adverbes et des adjectifs. Par conséquent, recherchez les mots de remplacement qui sont soit verbes ou adjectifs pour étiqueter le boutons avec:
Enable / Disable
Enabled / Disabled
Start / Stop
Running / Stopped
La
Édition très tardive: Voir cet interrupteur formidable conçu par un de mes collègues, qui réussit à garder la terminologie "on/off" mais le fait sans ambiguïté:
Un compromis raisonnable consisterait à ne pas mettre le bouton en surbrillance (avoir une couleur d'arrière-plan neutre peut-être) lorsqu'il est à l'état désactivé et à le mettre en surbrillance (changer la couleur d'arrière-plan) lorsqu'il est à l'état activé.
Par exemple, en regardant cette capture d'écran de l'application Spotify (Web), pensez-vous que la lecture aléatoire est activée ou désactivée?
Je pense que vous avez à peu près raison dans votre question.
Si la bascule est une action - Lecture/Pause - alors elle devrait montrer la chose qui va arriver. Ainsi, pendant la pause, il afficherait Play, puis pendant la lecture de Pause.
Si la bascule est une option - Shuffle/Linear - alors elle devrait montrer l'état actuel.
Comment vous indiquez à l'utilisateur qu'un bouton est une action et l'autre une option, je ne suis pas sûr ...
Je dirais que cela dépend du cas, comme l'a dit ChrisF, il est important d'avoir une distinction entre un bouton d'action et un bouton d'état.
Si votre bouton contient du texte, vous pouvez changer le texte pour montrer que cliquer dessus fera quelque chose (ex: "Activer la lecture aléatoire"). Cependant, dans votre cas, puisqu'il ne s'agit que d'une icône, je n'irais qu'avec une icône de lecture aléatoire qui semble activée/désactivée selon l'état. S'il est désactivé, il devrait être clair pour l'utilisateur qu'il s'agit d'une lecture directe. Vous pouvez l'allumer ou afficher le bouton comme enfoncé.
Pensez à ajouter une info-bulle au survol pour le rendre encore plus clair.
Je suis surpris de ne voir aucune mention de la technique utilisée dans iOS (et ailleurs), un bouton d'action/état combiné, où les deux options sont visibles, groupées et celle active est clairement mise en évidence.
Terrible art ascii pour démontrer:
[ ON | off ]
Je m'arrêterais juste avant de "ne pas les utiliser".
Je suggérerais que les boutons à bascule sont acceptables dans le cas où il y a un état activé et désactivé clair. Cela peut se produire, par exemple, lorsque vous avez une ligne de boutons grisés qui deviennent colorés lorsque vous cliquez dessus.
C'est la raison pour laquelle Play/Pause fonctionne dans de nombreux cas. Le bouton de lecture n'est pas tant un basculement entre deux états qu'une activation/désactivation. Il devient vert vif lorsqu'il est allumé (je joue!), Il devient gris et affiche un || lorsqu'il est éteint (je ne joue pas!).
Les autres boutons font de même, de sorte que la cohérence ajoute à l'accessibilité. Il est probablement également basé sur nos perceptions historiques d'un magnétophone ou d'un magnétoscope, qui avait des boutons enfoncés (c.-à-d. À l'état) ou enfoncés (à c. .
Mais dans tous les cas où ils ne sont pas simplement "activés", où vous ne pouvez pas remplacer la bascule par une case à cocher plus laide, je choisirais par défaut de "ne pas les utiliser", pour toutes les raisons déjà mentionnées.
AJOUT
Je viens de remarquer aujourd'hui que Evernote a une bascule assez efficace. Ils ont adopté l'approche d'un survol de la souris, ce qui a plutôt bien fonctionné. Notez qu'il s'agit d'un autre cas de contrôle de style on/off.
ADDITIONAL ADDITIONAL
J'ai trouvé cet interrupteur intéressant aujourd'hui et je me suis souvenu de cette QXA UX. Notez comment l'état est immédiatement évident, et le fait qu'il va changer lorsque vous le touchez est également rendu évident par la "poignée" texturée (c'est-à-dire l'abondance) - Je sais juste que lorsque je prends ce bouton surélevé, il basculera de l'autre côté et dire le contraire de ce qu'il dit maintenant; c'est comme un lavabo d'avion.
Ils peuvent donc être bien faits.
Il y a déjà 18 réponses ici, donc cela pourrait être en retard pour le parti, mais il est logique d'utiliser des cases à cocher dans de telles situations. Quelques exemples:
Et une fois sélectionné:
Ceci est similaire à l'approche "dim/allumé" que "Like" de Facebook utilise , mais est combiné avec une case à cocher pour une meilleure visibilité. Dans tous les cas, le point clé est d'utiliser un seul mot (ou un ensemble de mots) au lieu d'essayer de faire en sorte que l'utilisateur décide entre plusieurs mots.
Aussi, faites attention à ne pas utiliser de préfixes négatifs (" Pas", " Non -", " Un - = "," Dis - "," Im - "," Mis - "," In - "," Il - "," Ir - ") sinon l'utilisateur devrait alors faire un" double négatif " dans son esprit quand il avait uncoché la case:
J'ai utilisé le bouton bascule pour "ajouter" et "supprimer" des éléments à une collection en utilisant un simple bouton bascule (un avec l'état visible à la fois) qui avait les états suivants.
AJOUTER (si vous n'avez jamais cliqué sur le bouton)
SUPPRIMER (si le bouton a été cliqué précédemment et qu'un élément faisait maintenant partie de la collection)
MAIS cela m'a toujours pincé comme pour un utilisateur novice (50 ans et plus), il était initialement difficile de comprendre ce qui s'était passé et pourquoi le bouton demandait de "Supprimer" avant même que j'apprenne que cet article faisait maintenant partie de la collection. Le bit manquant dans ce cas était un message de notification qui disait "Article ajouté avec succès". J'utilise un message d'état basé sur Javascript qui apparaît en haut de l'écran (en utilisant http://Twitter.github.com/bootstrap/javascript.html#alerts ) mais puisqu'il a été visuellement déplacé du élément d'interaction, je n'ai résolu qu'une partie du problème pour certains utilisateurs.
Un autre problème
Votre bouton change sa "position" ou "retourne ses côtés" après chaque clic. Parfois, il dit "Je suis le bouton Ajouter" et parfois le même bouton (dans la même colonne parmi les autres boutons Ajouter), il dit "Je suis le bouton Supprimer". Changer les couleurs aide mais ce sont toujours deux rôles opposés assumés par un seul bouton. PAS SO RIGHT.
Ma solution:
Ma solution à ce problème mineur et bien discuté est de remplacer le bouton à bascule par quelque chose comme ça.
Bouton qui a la légende "Ajouter" lorsqu'il n'est pas cliqué Après le clic, le bouton se remplace par un message "Ajouté avec succès" et montre un petit bouton 24x24 qui a l'étiquette "X" et qui vous permet d'annuler votre dernier acte qui est toujours "Ajouter" . Ainsi, vous ne cliquez jamais sur un bouton "Supprimer" mais seulement "annulez" votre précédente "Ajout d'opération". De plus, vous n'avez pas besoin d'afficher une notification distincte "Ajouté avec succès" sur la page. L'inconvénient de cette approche est que vous avez besoin de plus d'espace pour mettre l'étiquette "Ajouté avec succès" et un "bouton pour annuler", mais à mon avis, c'est l'une des approches les moins déroutantes.
Dans de nombreux cas, il peut être utile ou possible d'éviter de tels boutons.
Par exemple. dans le cas d'un jeu mélangé/régulier: il suffit d'utiliser une case à cocher avec une étiquette "shuffle" à côté, et personne ne sera confus ...
Et dans le cas d'un bouton de lecture/lecture aléatoire, il n'est peut-être pas nécessaire de changer l'étiquette sur le bouton non plus. Vous pouvez utiliser un bouton "pressé" pour indiquer "en cours de lecture" et un bouton "haut" pour indiquer "pas en cours de lecture". Ou vous pouvez mettre un indicateur ailleurs dans l'interface utilisateur bien sûr (c'est ce que fait mon système stéréo ...).
Ce n'est pas parce que certaines entreprises commencent à utiliser un certain widget qu'il doit tout à coup être utilisé pour tout ...
Sur Facebook, le bouton J'aime est un bon exemple de bouton bascule.
Sur Facebook application Android, c'est comme sur un bouton et il est grisé lorsqu'il est éteint et mis en surbrillance bleu lorsqu'il est allumé. Voir les captures d'écran ci-dessous.
Fondamentalement, je suis d'accord avec eux - mettez l'accent sur le positif et ne plaisante pas avec le cerveau des utilisateurs (changement minimum).
Je ne sais pas si c'est un bon moyen pour les daltoniens. Ils auraient peut-être dû faire l'indication plus audacieuse.
Sur Facebook application Web, le modèle est différent. Le texte du bouton change pour indiquer l'action - ce qui se passe au clic. Ceci est déroutant. MAIS, cela a du sens car ils ont beaucoup d'espace et ont une indication distincte qu'un utilisateur aime un message.
Je recommanderais de regarder la vidéo suivante (de 1991!) Qui était par exemple la conception actuelle de la bascule iOS: https://www.youtube.com/watch?v=wFWbdxicvK
Et document correspondant: http://dl.acm.org/citation.cfm?id=143079
Voici les bascules qu'ils ont comparées: 
Et les résultats de préférence: 
Les boutons étiquetés (boutons à bascule) sont souvent déroutants, voire ambigus, comme vous le faites remarquer. Au lieu,
afficher l'état et l'action, comme ceci:
en ligne Go offline
Nous avons donc un étiquette non cliquable indiquant clairement l'état actuel, et un bouton cliquable pour effectuer une action pour changer l'état.
Si vous cliquez sur le bouton "Hors ligne", le libellé devient "Hors ligne" et le bouton sur "Passez en ligne".
Afficher à la fois l'état actuel et l'action en même temps est le seul moyen d'être complètement clair. Les boutons radio feraient cela, mais la solution étiquette + bouton est meilleure car elle offre une distinction visuelle claire entre les deux. De plus, il est naturellement plus compact que les boutons radio.
En ce qui concerne les alternatives, je pense qu'il est convenu que les boutons à bascule peuvent être problématiques. Même les cases à cocher peuvent prêter à confusion:
en ligne
La case n'est pas cochée, l'application est donc hors ligne. Mais ce n'est pas particulièrement clair. Si vous le regardez, la première chose que vous voyez est le mot "en ligne", il est donc facile de tirer la mauvaise conclusion.
Le problème est que tout ce que vous pouvez voir est une seule étiquette. Vous devez réfléchir un peu avant de pouvoir décider si l'étiquette indique un état ou une commande. Ce problème est commun aux cases à cocher et aux boutons, et essayer d'utiliser régulièrement des adjectifs (ou des verbes ou autre) peut améliorer les choses mais ne fera pas disparaître le problème.
Pour l'exemple Play/Pause, je montrerais l'état actuel normalement et l'inverse au survol de la souris (lorsque cela est approprié, c'est-à-dire pas sur les écrans tactiles). Cet élément a 2 états naturels et aucun verbe unificateur. On/Off peut d'autre part être simplifié en Power avec l'état On allumé et l'état Off, enfin, pas.
Je toujours irais avec état actuel. Je pense que l'idiome play/pause est l'exception plutôt que la règle. Je pense que la lecture/pause, telle qu'elle est, est peut-être un vestige de l'époque des vieux cassettes à cassette. Lorsque la lecture/pause a été combinée sur des lecteurs CD, je me souviens avoir pensé à quel point c'était cool et innovant.
Quoi qu'il en soit, une façon de rendre évident que l'état actuel est "sélectionné" est de rendre le bouton lueur un peu, ou de le décrire avec un peu de magie bleue.
Le bleu magique signifie généralement qu'un état est "activé"
Ainsi, le bouton ci-dessus est en fait un bouton à trois états d'iTunes. Il a 3 états: répéter, répéter tout et répéter 1. Il est assez clair ce qui se passe ici du visage du bouton. La répétition 1 est activée .
Comme autre exemple, j'ai 3 paramètres de caméras différents qui sont basculés par un seul bouton: orthographique 1-up, orthographic 4-up et perspective. Un seul bouton fait défiler ces 3 états , et je montre l'état actuel sur la face du bouton.
Les boutons uniques pour plusieurs états ne sont pas déroutants une fois que vous vous y êtes habitué. Ils sont excellents car ils groupe paramètres mutuellement exclusifs, et ils enregistrent encombrement l'interface utilisateur avec de nombreux boutons distincts. D'une certaine manière, ils sont comme un bouton radio compact.
D'autres options auxquelles je pourrais penser sont:
- Afficher état actuel, et faire apparaître un menu pour changer d'état (même s'il n'y a que 2 options)
Un exemple de cela est la façon dont Mac OS vous montre l'état de votre BlueTooth ou de votre aéroport - il a même un pop-up avec des phrases complètes sur ce que chaque action fera:
Il montre son état actuel (le gris fané signifie éteint), et il montre les états suivants via un menu contextuel avec des phrases complètes.
L'étiquette sur le bouton à bascule comme Lecture/Pause ne doit pas changer. Le bouton lui-même doit indiquer visuellement qu'il est enfoncé (en laissant l'étiquette "Play"). Cela élimine toute confusion.
Les images de réponse de @ Kato d'Evernote le montrent clairement: il y a l'étiquette communiquant ce qui est contrôlé par la bascule ("Sauvegarde automatique"), et la bascule, qui se double d'un indicateur d'état (O | I).
Le problème avec certaines bascules est d'essayer d'utiliser le même bit à deux fins différentes: communiquer l'état et communiquer l'action.
Les lumières de ma maison, par exemple, ont une bascule anonyme et un indicateur lumineux, qui est la lumière elle-même (lorsque l'ampoule tombe en panne, nous ne pouvons généralement pas dire si la bascule est en position marche ou arrêt) .
La pièce | l'arrangement de pause a également un indicateur clair, le son de la musique elle-même. La bascule remplit une fonction (contrôle), la musique remplit l'autre (état de communication).
La bascule shffle vs linéaire contrôle l'état, mais ne le communique pas. Vous devrez saisir le boîtier du CD, attendre la fin d'un thème et vérifier si celui qui commence après est le suivant dans la liste ou non (et répéter pour être sûr). Mais si vous le pensez comme un remaniement | option binaire non-shuffle, vous pouvez alors étiqueter le comportement qu'il contrôle ("shuffle" en tant que verbe) et communiquer l'état en l'illuminant.
Selon moi, dans tous les cas, vous devez communiquer l'état.
Un de mes amis est fou de la télécommande de verrouillage de sa voiture. Il a un état imprimé et il ne sait pas si c'est l'action ou le feedback.
Pour réduire l'ambiguïté, je suggère:
Utilisez l'action comme texte du bouton bascule, pas l'état.
Assurez-vous que le bouton n'est pas mis en surbrillance.
Mettez en surbrillance l'action sur la souris/focus pour souligner ce qui va se passer.
Mettez en surbrillance l'état actuel et placez-le à côté du bouton.
Par exemple...
(autres exemples: "allumer" + "éteindre", "éteindre" + "allumer")
Ou vous pouvez utiliser les curseurs et
Mettez en surbrillance l'état actuel, qui devrait apparaître sur la commande du pouce
Placez l'action qui transite l'état dans la zone vide (ne la mettez pas en surbrillance)
Par exemple...
(Imaginez que le contrôle du pouce ressemble à un contrôle du pouce et non à un bouton)
Tiré de ma réponse à la question en double fermée avec quelques améliorations.