Que Veut Dire Le Bouton Off

Selon vous, le visiteur de votre site comprend-il intuitivement que le bouton ci-dessous indique une option désactivée ?

Google pense aussi qu'il est inutile d'indiquer "OFF". Pourtant 25% des répondants de notre enquête ne le comprennent pas.

Découvrez pourquoi…

Anais Digital a testé fifty'intuitivité des boutons ON/OFF auprès de 200 personnes au courant du mois  de septembre 2016, sur base de boutons rencontrés dans des bibliothèques en ligne de designers.

RÉSULTATS :

50'utilisateur a un schéma mental précis des iii indices d'état d'un bouton ON/OFF :

1. Le marqueur de position
2. La couleur
3. Le label

United nations bouton est intuitif si les 3 indices concordent et suivent certaines règles.

Comment combiner ces 3 éléments de manière à rendre le bouton immédiatement intuitif ?

Sur les applications natives, les boutons ON/OFF adoptent automatiquement les standards de votre smartphone, et capitalisent donc sur votre apprentissage de leur signification.

Mais que faire sur un site web ou un software ?

Quelle liberté de blueprint peut-on prendre tout en préservant l'intuitivité d'united nations bouton ON/OFF?

• Peut-on utiliser n'importe quelle couleur ?
• Peut-on positionner indifféremment le marqueur déplaçable à gauche ou à droite ?
• Le characterization est-il obligatoire ? Doit-il indiquer 50'état ou l'activeness possible ? Sa position, à côté ou sur le bouton, est-elle importante ?

Nous avons présenté une série de boutons ON/OFF plus ou moins intuitifs à 200 internautes, en offrant toujours l'option de dire « je ne sais pas ». L'enquête étant anonyme, le répondant pouvait librement reconnaître qu'il ne savait pas qualifier le bouton de ON ou OFF, sans crainte de jugement. On peut toutefois supposer une réticence psychologique à reconnaître que l'on ne sait pas…

Et vous, reconnaissez-vous les indices convergents ou intrus ci-dessous ?

Quelles règles suivre pour les 3 indices d'united nations bouton ON/OFF?

1. Le marqueur de position

En statut ON, le marqueur est le plus souvent placé à droite. On pourrait croire que fifty'erreur n'est pas permise sur la position du marqueur. Pourtant de nombreuses librairies de boutons en ligne continuent à proposer des boutons ON avec le marqueur à gauche ! Tous les utilisateurs connaissent-ils cet indice ? Non !

Nous avons testé :

Nous avons montré united nations bouton dont la couleur (bleue) et le label indiquaient ON. Mais le marqueur était du mauvais côté (à gauche), et semblait donc indiquer united nations bouton OFF.

Looking at this switch, do you think the light is switched on or off? (200 responses)

La position du marqueur a trompé 17,5% des participants, et perturbé fourteen% d'entre eux.

United nations peu plus de 30% seulement des participants ont donc privilégié 50'indice de la position du marqueur sur les deux autres indices pourtant concordants.

Presque seventy% des participants sont restés indifférents à cet indice positionnel pourtant contradictoire.

Nous avons testé :

Cette fois le bouton testé suggest une couleur rouge (indice fort de OFF) mais le marqueur est à droite (indice ON).

According to this app button, is the functionality currently disabled or enabled? (200 responses)

Les statistiques sont semblables : 16,five% des répondants lui attribuent fifty'état ON, 12% hésitent à juste titre. 71,v% des répondants ne réagissent pas à l'indice contradictoire du marqueur, et qualifient donc le bouton de OFF. Si la position du marqueur était in indice clair de son état, nous aurions dû avoir beaucoup plus d'hésitations sur ce bouton dont la position du marqueur ON contredisait la couleur rouge.

A RETENIR : La position correcte (gauche OFF/ droite ON) du marqueur n'est pas un indice d'état suffisant pour la majorité des utilisateurs. Combinez toujours l'indice de position du marqueur avec au moins un autre indice.

two. La couleur

• rouge / vert

Par une recherche « on/off switch pattern » dans Google image, on voit que le vert est la couleur de prédilection cascade un bouton en état ON, tandis que le bouton OFF est le plus souvent rouge. Il est vrai que les voyants d'appareils électro-ménagers allumés sont généralement rouges, mais pas toujours… Les voyants d'appareils informatiques allumés sont quant à eux souvent verts, mais pas toujours… On voit que la confusion southward'installe et explique le manque de cohérence dans les couleurs des boutons d'interface ON/OFF.

Nous avons testé :

La couleur (rouge) et la position du marqueur (gauche) suffisent-ils à indiquer un bouton OFF ?

Looking at this switch, do you think the light is switched on or off? (200 responses)

Etonnamment, seuls 75% des répondants l'indiquent OFF ! Pour 25% des personnes interrogées, la couleur (rouge) combinée à la position ne suffit donc pas à interpréter le bouton en position OFF.

A RETENIR : La couleur et le marqueur de position, même bien utilisés, ne sont pas des indices toujours suffisants.

Nous avons testé :

Que se passe-t-il face à un bouton dont tout indique qu'il est ON (label et position du marqueur), mais qui est de couleur rouge?

According to this app button, is the functionality currently disabled or enabled ? (200 responses)

Les 200 répondants de notre enquête sont très divisés dans ce cas. 33% l'indiquent clairement OFF, comme si le rouge était l'indice supérieur de l'état OFF. Mais 33% l'indiquent ON, malgré sa couleur rouge. Le doute est présent chez 34% des répondants.

A RETENIR : La couleur rouge est un indice très fort d'état OFF, même si les deux autres indices sont en faveur du ON. Northward'utilisez donc jamais le rouge cascade united nations état ON.

Nous avons testé :

Le vert est-il intuitif comme indicateur d'état ON ? Confront à un bouton dont le label et le marqueur indiquent fifty'état OFF, mais qui est de couleur verte, comment ont réagi nos répondants ?

Looking at this switch, do you remember the light is switched on or off? (200 responses)

Ce bouton vert aurait dû pousser une grande majorité de répondants à répondre « Not sure ». 41% des participants l'indiquent ON à cause de sa couleur, et malgré le marqueur à gauche et le label « OFF ». Le vert est cascade eux indéniablement indice d'état ON. 31% n'hésitent pourtant pas à marquer OFF un bouton vert… La question divise beaucoup les répondants.

A RETENIR : La couleur verte est un fort indicateur d'état ON. North'utilisez jamais le vert pour united nations état OFF.

• gris/bleu

Nous avons testé :

Nous avons proposé 2 boutons très contradictoires (la couleur et la position du marqueur indiquaient l'inverse du label).

Ce binôme étant moins fréquent, nous avons expressément insisté, dans la formulation de la réponse, sur la couleur des boutons.

Which of the post-obit 2 toggle buttons is currently switched ON? (200 responses)

42% indiquent qu'united nations bouton pourtant grisé signifie united nations état ON. La couleur grise ne traduit pas cascade eux expressément un état OFF. 28% considèrent l'indice de couleur bleue comme ON, malgré le label « OFF ». Pour eux, le bleu est indubitablement indice de ON, même si le characterization est contradictoire. 30% seulement hésitent. Encore une fois, si le binôme gris/bleu était assez fort pour interpréter un état ON/OFF, les répondants auraient dû hésiter davantage à marquer ON un bouton gris.

A RETENIR : Le gris n'est pas un indicateur assez fort de 50'état OFF.

A savoir: Le gris est aussi problématique quand fifty'interface nécessite un état désactivé. On le voit dans le choix de Google, qui préconise dans son «Material Pattern » d'utiliser le gris tant pour le OFF que cascade fifty'état désactivé. La nuance entre les deux est subtile, surtout quand c'est le ON qui est désactivé :

Un bouton OFF gris peut d'ailleurs vous aider à pousser l'utilisateur à ne pas faire une activity en lui faisant croire un état désactivé, comme ci-dessous… en risquant un article critique sur Forbes pour manque d'intuitivité volontaire.

• noir/vert

Pourquoi pas noir OFF et vert ON ? On reste dans le standard vert, on évite le problème du daltonisme et on garde le gris standard pour la désactivation. Nous n'avons pas testé cette option.

3. Le Label

• état versus action

Les labels ON/OFF sont les plus utilisés mais prêtent à confusion quant à l'action (enable/disable). Le défi est alors de distinguer un label d'état actuel (il est écrit ON parce que la fonction est actuellement activée) d'united nations label d'état futur (il est écrit ON parce que la fonction est actuellement OFF mais passera en ON quand vous cliquerez sur ON). On rencontre plus rarement Enabled/Disabled, qui a pourtant 50'avantage de distinguer l'état de 50'activeness, en utilisant united nations participe. Toutes les langues ne se prêtent pas à cette distinction, et la longueur des termes peut poser problème dans united nations blueprint.

Nous avons testé :

Quelle a été la réaction de nos 200 répondants face à ce bouton très contradictoire (label et marqueur ON, couleur OFF)

According to this app button, is the functionality currently disabled or enabled ? (200 responses)

52% des participants ont identifié l'état actuel ON, avec two indices en faveur du ON (marqueur à droite, disable pour éteindre), et un indice en faveur du OFF (couleur rouge).

Nous avons testé :

Si fifty'on compare les résultats de notre enquête pour les 2 cas ci-dessus, on voit que la présence d'united nations verbe d'action (ex : "disable") est interprétée comme un état ON malgré la couleur rouge. 71,five% des répondants ont indiqué le bouton sans label comme OFF, contre seulement 29% dans le bouton doté du label contradictoire « disable ». Le characterization d'activeness a donc une grande influence sur 50'interprétation.

A RETENIR : Le verbe d'action à l'intérieur du bouton joue un rôle important dans l'identification de l'état, mais il n'est pas un indice indéniable.

A savoir : L'emplacement du label favorise la compréhension d'united nations bouton.

Des labels à l'intérieur du bouton portent à confusion, comme l'illustre cette journaliste qui teste 50'application de covoiturage Splyt en tentant d'activer un état pourtant déjà actif :

Sortir le label du bouton, comme ci-dessous, le rend moins attirant au clic, et semble donc indiquer avec plus de finality united nations état actuel.

Par cohérence, le marqueur devra alors se trouver du côté du characterization: label OFF à gauche du bouton, et not à droite comme ci-dessous. Si l'on identify le OFF et le ON au même endroit, comme le recommande Microsoft, il perd selon nous sa caractéristique d'état:

• icône à la place du label

Doit-on remplacer le characterization par une icône, ou les combiner ? Qu'il s'agisse d'united nations binôme ten  / 5 ou du symbole électrique, la distinction état actuel / état futur est encore plus complexe avec united nations symbole.

Nous avons testé :

Nous avons rajouté une icône pour mieux indiquer à l'utilisateur où cliquer (en cliquant sur 50'icône je passe en fashion OFF). "ON" est donc l'état actuel.

According to this app button, is the functionality currently disabled or enabled ? (200 responses)

L'icône ne renforce pas assez le label d'état actuel ON: 33% l'indique encore comme OFF.

A RETENIR: L'icône (symbole électrique) ne renforce pas indéniablement un état actuel ON.

A savoir: Altassian, lui, se repose sur un effet mouseover pour tenter de pallier le manque d'intuitivité de ses icônes.

iv. Priorité des indicateurs

Pour finir, nous avons demandé à 197 participants de l'enquête (la question a été ajoutée après three répondants) quel était le critère selon eux le plus déterminant pour reconnaître 50'état actuel d'united nations bouton. Voici leurs réponses :

For you, what shows Best that a push button is switched ON? (197 responses)

49.2% des personnes considèrent le vert comme indicateur de référence d'un état actuel ON. 28,four% se basent quant à eux avant tout sur le label ON. La couleur et le label sont donc les indicateurs clés de l'interprétation d'un état ON. 11.2% sélectionnent 2 réponses, ou donnent le comparatif avec l'autre état comme référence.

***

RÉSUMÉ DES BONNES PRATIQUES

Comment combiner idéalement couleur, position du marqueur et label ?

• Couleur : rouge pour l'état OFF, vert pour le ON
• Marqueur : à gauche pour l'état OFF, à droite cascade 50'état ON
• Label : « OFF » à gauche en dehors, « ON » à droite en dehors.

***

Quand ne faut-il pas utiliser de bouton ON/OFF du tout ?

Nous avons étudié fifty'ergonomie du bouton ON/OFF avec marqueur de position. Mais ce n'est pas la seule solution cascade indiquer deux états. Il y a aussi le bouton pressoir, la example à cocher, voire le menu déroulant.

On trouve sur le web deux types de boutons pressoirs : tantôt l'action possible (comme sur Twitter), tantôt il indique fifty'état actuel (comme sur LinkedIn). Lequel est le plus intuitif ?

La instance à cocher ouvre aussi united nations débat, entre autres sur la formulation de 50'affirmation : verbe ou substantif ? Les avis sont en fait partagés sur ces options également. Cela mérite un autre article !

Cascade en apprendre beaucoup plus sur le pattern d'interface, rendez-vous à la formation « UX Design and Inquiry » organisée début 2017 en collaboration avec 50'Université Libre de Bruxelles.

En attendant, due north'hésitez pas à nous contacter pour challenger votre ergonomie, nous serons ravis de vous aider à améliorer votre expérience utilisateurs !

Régine Lambrecht

regine.lambrecht@anais.digital

Anais Digital

Que Veut Dire Le Bouton Off,

Source: https://fr.linkedin.com/pulse/vos-boutons-onoff-sont-ils-intuitifs-r%C3%A9gine-lambrecht

Posted by: mccullochwhatiall.blogspot.com

Share this post