Comment positionner les pouces vers le haut / les pouces vers le bas avec progression sur une ligne
Problème
J'ai cet argument avec un de mes clients, à propos de la position du bouton comme je n'aime pas avec les progrès entre les deux. Comme la capture d'écran ci-dessous.
J'ai toujours pensé que cela avait le plus de sens d'avoir l'action positive du côté gauche et négative du côté droit (sans aucune recherche de ma part, juste un sentiment). Cette idée est probablement basée sur YouTube, "Avez-vous trouvé cela utile", et sur d'autres services de vote où l'action positive se trouvait du côté gauche.
Mais ses commentaires étaient que les personnes à qui il avait demandé des commentaires trouvaient cela déroutant (nous pourrions spéculer sur la portée de la participation de ppl aux tests), ce qui m'a quand même assez surpris.
C'est pour une application mobile.
Alors, lequel est le moyen le plus naturel de faire un système de vote comme celui-ci?
Option A
Option B
Éditer
Pour répondre à quelques commentaires.
Point de vue des clients
Il veut essentiellement copier le système de vote de YouTube. Son idée est d'avoir deux barres distinctes qui se poussent l'une l'autre (selon le nombre de j'aime/n'aime pas). Et même si je suis d'accord, cela pourrait ne pas sembler aussi évident que cela pourrait l'être avec différentes approches, je ne pense pas que ce soit ça déroutant.
Image à quoi ça ressemble quand vous votez pouce en l'air.
Mon point de vue
Étant donné que le backend n'a pas de mécanisme de tri des flux, il y a très peu de raison de voter. Si je pouvais décider, j'abandonnerais complètement la fonctionnalité d'aversion et la ferais comme (compter) seulement, mais ce n'est pas à moi. Et même si je ne suis pas non plus un fan de ce modèle, je ne veux pas le rendre aussi facile à utiliser et à comprendre que possible.
Si vous besoin de preuves empiriques.
Je serais très surpris si l'option de gauche à droite, positive à négative (A) ne gagnait pas (en supposant une culture de gauche à droite), mais le fait même qu'elle soit soulevée comme une question pourrait indiquer un problème différent. Souvent, les questions de surface ne sont pas le bon problème.
Dans votre cas, je soupçonne que la confusion peut être trop d'informations qui indiquent au cerveau que quelque chose ne va pas. Votre client a vocalisé cela comme la question gauche/droite. Je pense qu'il pourrait être plus que vous devez décider d'une position absolue/relative et l'autre problème pourrait disparaître.
Pour moi non plus:
Votre absolu lisant trois pouces vers le haut, 5 pouces vers le bas (remarquez comment il se lit de cette façon - et pourrait également être rendu accessible avec un balisage clair)
Ou, un bon parent que vous avez peut-être vu ailleurs :)
Les deux sont étranges car il existe des données mixtes: absolues et relatives. Peu importe que le pouce soit vers la gauche ou vers la droite. Les icônes de pouce avec les chiffres donnent une information (valeurs absolues), OK, bien. Mais entre eux, il y a cette barre donnant une autre information (proportion relative). Il n'y a pas de relation immédiate entre les chiffres et la barre. Il y a un calcul implicite. C'est déroutant.
La barre a la forme d'une barre de progression, mais il s'agit plutôt d'un bras de fer. Dans une barre de progression, vous verriez des nombres indiquant les hits et le total (par exemple: 3 sur 4), pas les votes positifs contre les négatifs.
C'est une bonne idée de faire en sorte qu'un message avec de nombreux votes soit différent des messages avec moins de votes (quelle que soit la proportion de votes positifs vs négatifs).
Je vois des conceptions plus cohérentes:
- pour montrer seulement les pouces avec les chiffres et c'est tout
- pour afficher un graphique à secteurs avec deux couleurs (vert et rouge) montrant également le total des votes
![simple pie chart example]()
- pour afficher deux barres horizontales, une verte et une rouge, aussi grandes que le nombre de pouces - cela implique qu'un message sans vote affichera des barres de longueur nulle. En outre, vous devrez définir un nombre maximum de votes
![two sides bar chart example 1]()
![two sides bar chart example 2]()
- pour montrer les pouces avec les chiffres et une barre horizontale de longueur fixe qui est rouge à gauche et devient progressivement verte à droite. La proportion de pouces vers le haut et vers le bas définit la position du poste dans cette barre de réputation - cette conception omet le nombre total de votes, mais au moins est claire.
![termometer-ish chart]()
La barre est extrêmement déroutante, il est donc très difficile d'obtenir quelque chose sans BEAUCOUP de tests A/B. Si c'est déroutant avec 8 votes, imaginez ce qui se passerait avec 100 ou 1000 votes.
Considérez également cette situation: vous mesurez les réactions des utilisateurs, donc pas de votes serait égal à 0. Ensuite, vote vers le bas serait réactions négatives tandis que vote vers le haut serait réactions positives, non?
Maintenant, pensez à cela comme une ligne numérique : les nombres positifs vont à droite , tandis que les nombres négatifs vont vers la gauche . C'est compréhensible même par les enfants puisque vous apprenez cela à l'école primaire.
Donc, si vous présentez votre interface utilisateur sous forme de ligne numérique, votre client est correct . Et les gens pensent probablement que c'est déroutant parce que vous essayez de présenter des informations d'une manière qui va à l'encontre de ce qu'ils ont appris depuis l'enfance.
Donc, à mon humble avis, vous feriez mieux de vous débarrasser de la ligne numérique ou de l'utiliser comme prévu par la plupart des gens. Et en cas de doute .... test, test, test !
Je ne veux absolument pas être pédant, mais si vous allez utiliser les pouces vers le haut et vers le bas, vous devez utiliser des icônes qui peuvent être alignées. Puisque nous parlons de YouTube, remarquez comment leurs icônes s'alignent
Alors que vos icônes ressortent.
Tout est dans le poignet.
Je pense que le problème n'est pas l'orientation horizontale. Est vraiment utile l'orientation horizontale pour obtenir des métriques, et le sens de la concurrence entre le semblable et le différent est très cool!
Le problème, à mon avis, c'est la couleur grise, ou l'absence de couleur. Lorsque je cherche votre image, je ne perçois pas le contraire, et, lorsque la couleur verte reste à droite, dans mon cas (du Brésil), j'ai le sentiment que quelque chose ne va pas. Mais, je crois que si vous changez le gris pour une autre couleur comme le violet ou l'orange (couleurs complémentaires), vous pouvez obtenir un meilleur résultat.
Notez que pour une application mobile, la nature pleine largeur de ce contrôle est susceptible de fausser les résultats en soi.
La majorité des personnes utilisant des smartphones sont des droitiers. Les choses les plus faciles à toucher sont celles en arc de cercle faites par le pouce droit lorsque vous tenez l'appareil confortablement dans la main droite. La commande qui se trouve à l'extrémité droite d'une commande pleine largeur comme celle-ci est beaucoup plus facile à taper. Selon le défilement vertical, il y aura des moments où il faudra déplacer le pouce et d'autres quand il sera assis au bon endroit pour un onglet facile. Le contrôle sur l'extrémité gauche ne sera presque jamais dans un endroit où il est facilement tapé et nécessitera toujours une action assez délibérée pour le tapoter.
Pour les contrôles secondaires comme un système de notation (c'est-à-dire pas un CTA principal ou une navigation), vous devez surmonter beaucoup d'inertie où de nombreuses personnes ne seront tout simplement pas gênées de toucher ce qui se trouve à gauche.
Si vous avez le pouce vers la droite, vous découragez les évaluations négatives - ce que vous ne devriez pas faire.
Si vous avez le pouce vers le bas à droite, vous découragez les évaluations positives - ce que vous certainement ne voulez pas faire.
Je vous suggère de supprimer la barre et de regrouper les pouces vers le haut et les pouces vers le bas ensemble vers l'extrémité droite de l'écran.
Je ne choisirais pas l'option B car elle semble négative. La couleur verte se démarque le plus et attire maintenant l'attention sur les aversions. Faites attention aux goûts. L'option A de votre exemple semble positive, même s'il y a moins de likes que de détestations.
Quelle est la note demandée?
En ce qui me concerne, personnellement, négatif d'abord puis positif est beaucoup plus intuitif. Cependant cela a été incliné par Youtube, Facebook et autres, qui doivent d'abord utiliser le positif, car le positif est l'action principale, parfois même l'action niquement.
Il s'ensuit que pour les personnes qui ont grandi avec Facebook et YouTube, les boutons J'aime et n'aiment pas, le positif d'abord est plus familier et donc plus intuitif. Par conséquent je suppose qu'il y a en fait une différence en fonction de l'âge du groupe cible.
Au lieu de choisir entre deux dispositions horizontales où chacun des choix de disposition n'est pas intuitif pour certains utilisateurs, tilisez une disposition verticale. Sur une disposition verticale, une grande majorité convient que le positif est en haut, le négatif en dessous.