Le bouton bascule doit-il afficher son état actuel ou l’état vers lequel il va changer ? (2010)

Le bouton bascule doit-il afficher son état actuel ou l’état vers lequel il va changer ?

• Un bouton bascule doit aussi servir à indiquer à l’utilisateur l’état actuel.
• Lorsqu’un bouton bascule est en état « activé », afficher « désactivé » peut prêter à confusion.
• Il faut éviter d’utiliser des contrôles à bascule de type flip-flop dans les boutons ou les menus.

Un interrupteur à bascule peut afficher à la fois l’état actuel et l’état à venir

• Une méthode consiste à placer du texte à l’extérieur du bouton pour afficher à la fois l’état actuel et l’état vers lequel il changera.
• Par exemple, le design des interrupteurs iOS affiche l’état « activé » en bleu, tandis que l’état « désactivé » ne l’est pas.
• Le design des interrupteurs d’OS X ne présente aucune ambiguïté, et l’utilisateur peut clairement connaître l’état actuel.

Il faut éviter l’utilisation du bouton bascule de Twitter

• Le bouton bascule de Twitter fournit une information au survol de la souris, mais cela peut prêter à confusion sur les écrans tactiles.

En anglais, "on" et "off" peuvent être à la fois des adverbes et des adjectifs

• Il est préférable d’utiliser des verbes ou des adjectifs sur le bouton afin de fournir un libellé clair.
• Ex. : "activer/désactiver", "démarrer/arrêter"

Il est important de distinguer l’état et l’action

• Quand la bascule représente une action (par ex. lecture/pause), elle doit afficher l’action qui se produira au clic.
• Quand la bascule représente une option (par ex. lecture aléatoire/lecture normale), elle doit afficher l’état actuel.

On peut envisager d’utiliser une case à cocher

• Si le changement d’état peut être résumé sous la forme d’une question « oui/non », l’utilisation d’une case à cocher peut être appropriée.

Utiliser une méthode qui affiche à la fois l’état et l’action au lieu d’un bouton bascule

• Quand l’état est désactivé, le bouton n’est pas mis en évidence ; quand l’état est activé, il est mis en évidence pour indiquer l’état.

On peut envisager de ne pas utiliser de bouton bascule

• Par exemple, dans le cas de lecture aléatoire/lecture normale, on peut utiliser une case à cocher portant le libellé « lecture aléatoire ».

Le bouton « J’aime » de Facebook est un bon exemple de bouton bascule

• Dans l’application Android de Facebook, le bouton « J’aime » apparaît en gris lorsqu’il est désactivé et en bleu lorsqu’il est activé.

Afficher à la fois l’état actuel et l’action est ce qu’il y a de plus clair

• Il est préférable de fournir à la fois un libellé pour l’état désactivé et un bouton cliquable permettant de passer à l’état activé.

Avis de GN⁺ :

• Le design des boutons bascule peut avoir un impact important sur l’expérience utilisateur, et il est essentiel d’indiquer clairement l’état actuel ainsi que l’état à venir.
• Le design des interrupteurs d’OS X est un bon exemple qui permet à l’utilisateur de comprendre intuitivement l’état actuel sans créer de confusion.
• Cet article peut aider les développeurs logiciel à créer une meilleure expérience utilisateur en fournissant des éléments importants à prendre en compte lors de la conception d’interfaces utilisateur.

[GN⁺]

Commentaire Hacker News

• La confusion autour du bouton de mise en sourdine dans Microsoft Teams

  • Dans l’application Teams, le bouton de mise en sourdine montre un micro barré, ce qui signifie que le micro est coupé lorsque la sourdine est activée.
  • Dans l’application Téléphone, la même icône indique au contraire que l’on n’est pas en sourdine, et l’état en sourdine est signalé par un fond rempli.
  • Il n’y a pas de problème à ce qu’un bouton indique l’état actuel, mais encore faut-il savoir à quoi il ressemble une fois l’état changé.
  • Cette confusion peut venir du design en « flat UI », où l’on doit comprendre les éléments d’interface sans référence au monde réel.

• Le problème des boutons à bascule incohérents dans l’interface des véhicules Tesla

  • Les boutons du système HVAC réagissent différemment selon qu’on les touche et selon la durée de l’appui.
  • En conduite, quand on ne peut jeter qu’un rapide coup d’œil à l’écran, une légère erreur de toucher peut provoquer une action involontaire.
  • L’interface de connexion Bluetooth de Tesla a un design très déroutant, et c’est encore plus problématique en conduisant.

• Le mécanisme de retour d’état des boutons-poussoirs chez la NASA

  • Quand l’interrupteur est éteint, tous les voyants sont éteints ; quand on appuie dessus, un voyant jaune s’allume ; puis, lorsque l’équipement souhaité est réellement activé, le voyant jaune s’éteint et un voyant vert s’allume.
  • Cela confirme à la fois que l’interrupteur a bien été actionné et que l’appareil a effectivement réagi.

• Le regret de la disparition des cases à cocher

  • Les cases à cocher étaient parfaites et sans ambiguïté, mais les designers de smartphones ne les aimaient pas.

• Le design déroutant de l’écran de tableau de bord Tesla

  • Un libellé affichant « Open » indique clairement que cette partie est ouverte, mais l’utilisateur ne peut pas savoir qu’il s’agit en réalité d’un bouton pour ouvrir la pièce concernée.

• Les problèmes des boutons à bascule et les pistes de solution

  • Les boutons à bascule mélangent l’état du système et l’action qui permet de le changer, ce qui peut prêter à confusion.
  • Un « ON » affiché comme état actuel peut en réalité signifier une action pour passer sur « OFF ».
  • La solution consiste à séparer l’état et l’action, par exemple en plaçant le libellé hors du bouton ou en gardant l’icône identique tout en modifiant d’autres attributs du bouton.

• Le problème d’asynchronisme des boutons à bascule

  • Quand on appuie sur le bouton, l’état du système peut ne pas changer immédiatement, si bien qu’il faut parfois appuyer plusieurs fois pour être sûr d’obtenir l’état voulu.
  • Avec un bouton distinct pour chaque état, plusieurs appuis ne posent pas de problème.

• Les avantages du design de toggle coulissant d’Apple

  • Le toggle coulissant d’Apple montre clairement l’état actuel et l’état vers lequel on va basculer.
  • Les fonctions activées sont distinguées par un fond bleu, les fonctions désactivées par un fond gris.

• La nécessité d’indiquer clairement l’état actuel et l’état futur d’un toggle

  • Il doit être clair quel est l’état actuel et vers quel état on passera si l’on change le toggle.
  • Le bouton lecture/pause suit des précédents physiques, et comme on sait clairement si un média est en cours de lecture, l’utilisateur comprend même si l’icône ne change pas.
  • Changer légèrement la couleur d’un toggle n’aide pas vraiment ; il faut un libellé.