web-dev-qa-db-fra.com

Basculer la position du commutateur dans le bon sens?

Juste avoir un débat sur quelle est la bonne position pour une bascule activée.

Vous cherchez également des réponses pourquoi quitté? pourquoi pas?

Pour moi, il est logique de l'avoir à droite lorsqu'il est activé car il est plus proche du texte, mais à la recherche de réponses différentes et sensées :)

enter image description here

[MISE À JOUR]

Pour rendre cela plus clair pour certains d'entre vous, c'est l'état ON en 2 versions, pas une version on et off :)

8
IonutzB

Évitez toute ambiguïté

Le contrôle doit indiquer clairement à l'utilisateur où cliquer/glisser et quel sera le résultat.

Prenez ces bascules iOS par exemple:

iOS style toggle controls

En juxtaposition, un utilisateur peut facilement déterminer quel paramètre est activé et lequel est désactivé. Mais si vous regardez les utilisateurs interagir avec eux (en particulier lorsque tous sont dans le même état ou qu'il n'y en a qu'un), vous remarquerez qu'ils s'arrêtent pour réfléchir à la façon de modifier le paramètre.

Apple a délibérément choisi le style plutôt que la convivialité (un peu comme les barres de défilement invisibles de Mac OS). Une fois que vous l'avez appris, le contrôle est évident, mais le novice doit faire une pause.

Rendre le choix évident

Si vous incorporez la "valeur" directement dans le contrôle, vous abandonnez du style au nom de la clarté. C'est moins sexy que l'exemple iOS, mais l'utilisateur comprendra d'un coup d'œil ce qui est attendu.

Dans l'exemple ci-dessous, j'ai inversé la position la plus courante (on à droite) mais personne ne va être confus.

J'ai également utilisé une couleur "positive" commune pour le. Votre utilisation du rouge pour les ruptures avec la convention d'une manière qui peut encore plus dérouter l'utilisateur.

Toggles with embedded check and x icons

* MISE À JOUR * en réponse aux observations des commentateurs, j'ai jeté un deuxième coup d'œil à ma maquette rapide. Je pense que cela fait un meilleur travail d'indication de l'état. Merci pour la critique!

Une autre conclusion purement anecdotique de ma part: Positionnez l'étiquette de réglage à gauche et le contrôle à droite. Cela permet à l'utilisateur de numériser l'étiquette avant de se soucier de l'état du contrôle.

9
plainclothes

La bascule doit être à droite lorsqu'elle est activée . Presque toutes les bascules ON/OFF fonctionnent de cette façon et les utilisateurs avaient probablement de l'expérience avec des bascules similaires.

Je conseille fortement cependant d'utiliser des signes supplémentaires qui indiquent OFF ou ON. La position de bascule à droite est une norme faible et de nombreuses personnes ne sauront pas quel état est ON/OFF. Cela créera plus de charge cognitive et augmentera les erreurs.

Utilisez des étiquettes, c.-à-d. ON/OFF ou OUI/NON. Utilisez le rouge vif pour ON, le gris grisé pour OFF.

. enter image description here

Vous devriez également envisager d'utiliser des commandes plus standard comme des boutons radio ou une case à cocher.

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

3
DesignerAnalyst

Je ne crois pas qu'il existe une "correcte" direction qui désigne un interrupteur à bascule .

Cela dit, je pense que la considération la plus importante est de garantir des indicateurs distincts et évidents à la fois pour un état basculé et pour un état non basculé sans compter uniquement sur la direction.

2
adriennetacke

Il n'y a pas de modèle clairement correct où la droite ou la gauche ont été établies comme étant correctes. Il y a pas mal de confusion à ce sujet, et je pense qu'il vaut mieux les considérer comme neutres à cet effet.

Milieux et culture:

Comme le note un expert, un pourcentage non négligeable de la population a déjà du mal à déterminer de gauche à droite:

John R. Clarke, professeur de chirurgie à l'Université Drexel de Philadelphie, estime qu'environ 15% de la population est confrontée à un certain degré de défi gauche/droite.

http://www.washingtonpost.com/wp-dyn/content/article/2008/07/18/AR2008071802704.html

Considérez également que certaines cultures lisent de droite à gauche. Cela pourrait introduire un certain niveau de biais dans la perception de l'utilisateur.

Recommandations de l'interface utilisateur:

Je pense qu'il est beaucoup plus important d'inclure d'autres indices visuels pour indiquer l'état, que de se soucier du positionnement gauche/droite.

Par exemple:

  • Vous pouvez utiliser un "X" pour indiquer l'opposé de votre coche
  • Vous pouvez utiliser des couleurs telles que le vert et le rouge pour indiquer l'activation et la désactivation. Ou dans votre cas, vous pouvez continuer à utiliser le rose comme "activé" et le gris pour représenter "désactivé". Dans les deux cas, assurez-vous de prendre en compte le daltonisme.
  • Vous pouvez modifier la couleur du texte de l'étiquette correspondante. Noir pur pour "on" et gris atténué pour "off"
1
Ben Harrison

Il existe de nombreuses façons différentes de fournir une bascule, et certaines peuvent fonctionner mieux que d'autres en fonction de votre situation.

Bien qu'il y ait IS une certaine différence sociale/culturelle dans la façon dont la gauche et la droite sont perçues et préférées, plutôt que de se soucier de la direction de votre bascule, je préfère s'inquiéter des autres facteurs tels que ce à quoi cela ressemble dans les différents états, les icônes, comment mieux étiqueter et identifier ces états, et comment le rendre très clair visuellement .

Je vous renvoie à cette question très similaire que j'ai posée il y a quelques années, qui a plusieurs variantes:

Meilleures pratiques sur les commutateurs à bascule et les valeurs par défaut dans les formulaires?

1
Mattynabib

Tout d'abord, avoir le bouton à droite (première image) est les options acceptées sur la plupart des sites Web et des recommandations. Veuillez consulter Blog sur la conception des matériaux .

enter image description here

Ensuite, voici la logique pour moi: il est logique que "Off" ait la valeur 0/false par défaut. "On" est vrai, donc a la valeur 1. Sur un axe, 0 est à gauche, puis est la valeur 1, à droite.

0
Madalina Taina