web-dev-qa-db-fra.com

Comment tourner un bouton pour augmenter?

Je fais une application avec un bouton skeumorph que vous pouvez tourner dans le sens horaire et antihoraire pour augmenter/diminuer un montant.

Mais quelle direction est la bonne? Je parie qu'il y a un degré élevé de différence culturelle entre les pays/régions et un degré élevé de différence selon le contexte d'utilisation.

J'habite au Danemark et "tous" les radiateurs courants ont un bouton pour augmenter la chaleur - vous devez le tourner dans le sens antihoraire pour augmenter la chaleur. Ce pourrait être simplement un radiateur ou juste un truc du Danemark.

Disons que l'application que je crée contrôle un radiateur via wifi, dois-je suivre la norme locale, ou simplement décider d'une manière globale "correcte" ...?

82
astalabandi

Je ne suis pas sûr qu'il y ait une différence culturelle, autant qu'une différence mécanique. Les thermostats de radiateur sont des mécanismes de soupape, qui sont serrés en vissant dans le sens horaire et desserrés en vissant dans le sens antihoraire. C'est-à-dire que vous desserrez la valve en la tournant dans le sens antihoraire pour permettre plus d'eau chaude dans le radiateur.

Les boutons et cadrans des appareils électriques (pour changer le volume audio, l'heure, la vitesse, etc.) fonctionnent presque universellement dans le sens opposé, en tournant dans le sens horaire pour augmenter une valeur et dans le sens antihoraire pour la diminuer. Cette augmentation/diminution est généralement représentée visuellement sur une échelle linéaire, de gauche à droite, de la valeur la plus basse à la valeur la plus élevée.

Les commandes de thermostat électrique, y compris l'ancien et les thermostats numériques et basés sur les applications, ont tendance à suivre l'électrique (dans le sens antihoraire/gauche pour diminuer la chaleur, dans le sens horaire/droite pour augmenter la chaleur).

197
Matt Obee

Je pense que les réponses directes à votre question sont couvertes par les autres, mais il pourrait être utile de fournir un indice visuel à l'utilisateur. Par exemple, dans un chauffage de voiture, vous avez une indication visuelle des changements lorsque le bouton se déplace.

Car Temp Knob

Une autre solution pourrait être d'utiliser un curseur/boutons verticaux où vers le haut pourrait signifier plus clairement une augmentation de la température.

153
Christophe

Une bonne chose dont vous pouvez profiter ici est la ligne numérique . La droite numérique augmente presque universellement de gauche à droite. Vous pouvez utiliser cette analogie pour montrer sans ambiguïté à votre utilisateur la manière d'augmenter ou de diminuer la quantité de "chose" avec laquelle votre application traite.

Bouton rotatif

Le problème avec un bouton rotatif (à partir de maintenant le modèle du robinet) est que vous pouvez plier la ligne numérique avec son centre vers le haut ou vers le bas, ce qui conduit à l'ambiguïté que votre question tente de résoudre. knobs with center up and down turn opposite directions for "plus"

Un autre problème avec le modèle tap est qu'il est très difficile à utiliser avec une souris.

Bouton linéaire (*)

photo of sliders on audio mixer

Une option à la fois intuitive et facile à utiliser avec une souris est le bouton d'augmentation/diminution linéaire (désormais le modèle de mixage audio). Pensez au contrôleur de volume sonore de Windows.

Windows volume control vertical track bar

Avoir un bouton de ligne horizontale vous donne la chance de profiter directement de la ligne numérique.

Utilisez un bouton de ligne verticale , et vous pouvez profiter du fait que " vers le haut "peut être associé à" plus "et" vers le bas "Avec" moins ". Néanmoins, vous pouvez toujours avoir une barre latérale affichant ( + ) ou ( - ); 0,1,2,…, 10; -5, -4,…, 0,…, 4,5; pour montrer objectivement à votre utilisateur la manière d'augmenter/diminuer ce que vous voulez contrôler (un triangle rectangulaire qui s'épaissit dans le sens plus fonctionne également).

Vertical and horizontal track bars

Pour un bouton skeumorphic, cela dépend vraiment du type de "chose" qui va être contrôlé.

La plupart des fluides "matériels" fonctionnent avec le modèle de robinet.

Pour les choses électriques ou similaires, cependant, les deux options ont été utilisées dans le monde réel, vous pouvez donc avoir un bouton skeumorphic linéaire dans ce cas.

Une option pour régler les choses peut toujours être mise entre les mains de l'utilisateur. La solution que je propose ne devrait en principe être utilisée que par défaut.

[~ # ~] ps [~ # ~] : vous souhaiterez peut-être rechercher la ligne numérique dans les pays qui utilisent l'écriture de droite à gauche (comme l'arabe) ou l'écriture de haut en bas (comme le chinois) pour voir s'il y a une manière différente de l'interpréter. Cependant, ces choses peuvent être corrigées à l'aide des classes de globalisation des systèmes d'exploitation et définir automatiquement la valeur par défaut pour la direction croissante/décroissante.


(*): Dans Visual Studio, cela s'appelle une barre de suivi ; dans beaucoup d'autres choses, c'est un curseur (extrait du commentaire de wizzwizz4).


[~ # ~] edit [~ # ~] : Pour les machines mécaniques ou dans ce cas, les machines thermiques, vous pouvez utiliser un levier comme bouton skeumorphic et profitez de la deuxième option.

21
J. Manuel

Je crois que vous pouvez créer visuellement le bouton comme vous le souhaitez, sans dérouter les utilisateurs, en créant un modèle de mouvement commun. La plupart des logiciels de production audio que j'ai utilisés (c'est-à-dire le genre de logiciel où vous avez souvent beaucoup de boutons qui font beaucoup de choses et qui deviendraient simplement incontrôlables, en termes d'espace d'écran, s'ils étaient tous de longs curseurs) a simplement "haut" et "bas" pour les boutons. Vous cliquez ou appuyez sur le bouton, puis monter est une augmentation et descendre est une diminution. À ce stade, la direction dans laquelle le bouton visuel tourne n'est pas pertinente. Les utilisateurs savent juste, monter pour augmenter et descendre pour diminuer:

Softtube Tape Effect Plugin

Source d'image

Les plus grands avantages de cette approche sont que c'est un mouvement plus naturel à faire avec une souris ou un doigt, et aussi qu'il est très courant - chaque synthétiseur logiciel que j'ai jamais utilisé utilise ce modèle, et il sera probablement intuitif pour vos utilisateurs, peu importe de quel type de boutons ils sont habitués dans la vraie vie.

Pour être sûr, vous pourriez envisager, dans le cadre de la bande-annonce ou du didacticiel initial de l'application, y compris une démonstration vidéo des commandes de bouton (comme le gif ci-dessus), afin que les utilisateurs sachent d'avance qu'ils devraient glisser linéairement, plutôt que d'essayer de faites tourner les boutons.

13
wavemode

Certaines conventions sont influencées par la coutume locale, et d'autres peuvent être particulières à un domaine ou à un cadre.

Dans le domaine des mathématiques, par exemple, la direction positive est affectée à la rotation dans le sens antihoraire, et la direction négative est dans le sens horaire. Si votre application contrôlait l'angle d'un télescope, il serait sage de suivre cette convention.

In the field of mathematics and physics, counterclockwise rotation is positive and clockwise rotation is negative

En trois dimensions, la direction positive est indiquée par la direction de l'axe perpendiculaire au plan de rotation.

enter image description here

Vous rencontrerez également souvent cette convention si votre application fonctionne avec des capteurs tels que les gyroscopes trouvés dans les smartphones.

Sensor.TYPE_GYROSCOPE:

Toutes les valeurs sont en radians/seconde et mesurent la vitesse de rotation autour des axes X, Y et Z locaux de l'appareil. Le système de coordonnées est le même que celui utilisé pour le capteur d'accélération. La rotation est positive dans le sens antihoraire. C'est-à-dire qu'un observateur regardant d'un endroit positif sur l'axe x, y ou z vers un appareil positionné sur l'origine rapporterait une rotation positive si l'appareil semblait tourner dans le sens antihoraire. Notez qu'il s'agit de la définition mathématique standard de rotation positive et ne correspond pas à la définition de roulis donnée précédemment.

Ces conseils sont principalement destinés à des applications scientifiques/techniques. Dans tous les cas, vous devez déterminer s'il existe déjà une convention dominante pour des applications similaires. Par exemple, la convention dominante pour les thermostats est dans le sens horaire = plus chaud. Pour le contrôle de la température, je suivrais probablement cette convention même dans les applications scientifiques.

8
Scott Lawson

Il existe des différences à travers le monde - ici au Royaume-Uni, nous percevons généralement que le mouvement dans le sens des aiguilles d'une montre augmente alors qu'au Danemark, comme vous l'avez souligné, c'est l'inverse.

Si vous construisez quelque chose pour un public international (ou quelque chose qui peut être divulgué à un public international à un moment donné), vous devriez être OK si vous vous assurez qu'il y a des indices verbaux et non verbaux clairs pour montrer ce qui se passera lorsque le cadran est tourné. Cela pourrait facilement être fait en utilisant une échelle et des icônes.

EDIT Après une note de @MattObee (voir les commentaires ci-dessous) Il se pourrait bien que le paradigme soit toujours dans le sens des aiguilles d'une montre pour augmenter mais que la valeur augmentée n'est pas ce que vous pensez qu'elle est. Dans ce cas, c'est peut-être l'étanchéité de la vanne qui augmente plutôt que la température.

3
Andrew Martin

En parlant strictement du point de vue de l'expérience utilisateur: ne pensez qu'à la façon dont les gens utilisent les radios (ou, si vous êtes plus vieux comme moi, leurs téléviseurs).

  • Dans le sens horaire augmente le volume et fait avancer la station vers des nombres ou des fréquences plus élevés.

  • Dans le sens antihoraire diminue le volume ou recule la station à des nombres ou des fréquences plus bas.

C'est à cela que les gens sont le plus conditionnés.

Les soupapes de fluide et de gaz sont, je soupçonne, contextuellement différentes. Je n'ai jamais connu personne pour demander, "pourquoi une valve d'eau diminue le débit lorsqu'elle est tournée dans le sens horaire et un bouton radio augmente le volume lorsqu'elle est tournée dans le sens horaire?" ou le monde numérique, nous ne pensons jamais à des mécanismes comme les vannes.

Vous pouvez probablement remercier la télévision et la radio de la vieille école pour cela. Au bon vieux temps, la radio utilisait une chaîne pour déplacer un pointeur le long du tableau des fréquences. Comme les anglophones (et beaucoup d'autres) lisent à gauche- à droite, le pointeur a été conçu pour se déplacer vers la droite pour trouver des nombres plus élevés. Tourner un bouton vers la gauche pour déplacer un pointeur vers la droite n'a pas de sens ... ainsi, dans le sens horaire pour plus est probablement né!

3
JBH

Si vous créez une application pour un radiateur, vous devez vérifier ce radiateur spécifique et vous assurer que vous utilisez la même direction. Cela ne devrait pas être un problème car le logiciel doit savoir dans quelle direction tourner le bouton physique qu'il contrôle.

Mais je pense que vous vouliez juste dire cela à titre d'exemple. En général: assurez-vous de le dire sans ambiguïté à l'utilisateur.

Je pense que les autres réponses n'insistent pas suffisamment sur ce point si elles mentionnent explicitement tout: ne supposez pas que l'utilisateur le sait!

La quantité de réponses à cette question jusqu'à présent montre clairement que la direction n'est pas évidente, et si quelque chose n'est pas absolument évident pour tout le monde, une bonne interface utilisateur aide l'utilisateur.

2
Nobody

En fin de compte, la réponse ne réside-t-elle pas dans la Parole "dans le sens des aiguilles d'une montre"? Le temps n'est vécu que dans un sens - il avance et les valeurs augmentent en conséquence. À mon avis, c'est la façon la plus naturelle de voir les choses.

2
Simon Drew

Concepteur UI/UX avec un diplôme et une carrière dans l'enregistrement audio ajoutant au vote à droite ... :) Tourner à droite = augmenter et indiquer définitivement l'augmentation à l'utilisateur :)

enter image description here
enter image description here
enter image description here
enter image description here

0
EricPowell