web-dev-qa-db-fra.com

Lequel de ces deux modèles symbolise le mieux le vide et donne envie de le remplir?

Je travaille sur un service avec des crédits limités et je conçois un compteur affichant le montant restant. Je suis tombé sur deux approches (ci-dessous) et même si la première semble plus simple, j'ai l'impression que la seconde me pousse à la remplir (et donc à acheter des crédits, ce qui est une bonne chose).

enter image description here

Y a-t-il une raison pour laquelle je suis plus tenté par le second que par le premier? Est-ce personnel ou ressentez-vous la même chose? S'agit-il de progrès, de cases à cocher, ...?

Il semble qu'il y ait une raison derrière cela ... Probablement quelque chose à propos de la psychologie de l'utilisateur.

REMARQUE: si vous avez autre chose en tête qui pourrait pousser encore plus, je serais heureux d'en tirer des leçons.

EDIT: ci-dessous est une maquette plus claire

enter image description here

35
Gabin

J'ai tendance à être d'accord avec vous - celui de droite me tente davantage. Mais je pense que cela dépend un peu des incréments dans lesquels vous obtenez des crédits. Je ne me sentirais pas très motivé si les crédits augmentaient lentement. Mais c'est la même chose avec les deux options. Je suppose qu'avec l'option à droite, on a l'impression de faire 6 grands pas pour arriver à 250 et à gauche ce ne sont que 250 très petits pas. J'ai l'impression de progresser davantage en faisant de grands pas. Je ne sais pas si cela a du sens, mais je ne peux pas trouver une meilleure façon de le dire.

À l'heure actuelle, un incrément à droite représente environ 42 crédits. Si les incréments sont souvent plus petits, il peut être préférable de placer l'illustration horizontalement le long du bas de la boîte, puis d'avoir des incréments plus nombreux mais plus petits.

22
René Rasmussen

Eh bien, après avoir réfléchi pendant environ 10 minutes, je dois être d'accord avec vous que le second invite l'utilisateur à le remplir. Bien que la différence soit minime.

Pour une sensation de "vide" plus forte, vous pouvez changer la couleur du mètre selon la quantité remplie.

  • 1-2 barres: rouge
  • 3-4 barres: jaune
  • 5-6 barres: Vert

enter image description here

69
kBisla

enter image description here

En lisant de plus près le problème de conception, l'objectif est de montrer à l'utilisateur la limite de crédit qui s'éloigne et de persuader d'acheter plus. Je vais inverser la conception [l'objectif n'est pas de compléter mais de remplir] et d'ajouter un appel à l'action clair.


enter image description here

La persuasion à terminer peut être obtenue en permettant à l'utilisateur maintenant combien il en reste. Nous sommes habitués à de tels exemples dans notre vie quotidienne et pouvons comprendre la nécessité de les "compléter". Par exemple.

  1. 80 km de la destination
  2. À mi-chemin sur un tapis roulant
18
Sumi

Personnellement, le premier me donne envie de le remplir. Le second ressemble déjà à des blocs, ce n'est pas un seul objet.

Je vous recommanderais également de modifier la couleur en fonction du niveau d'équilibre. Par exemple. le vert est quand il est plein à 50%, le jaune quand il est à moins de 50% plein et le rouge quand il est vraiment bas (environ 10%).

S'il est vraiment essentiel que votre service soit équilibré, vous pouvez même le faire légèrement (vraiment légèrement) Pulse avec du rouge s'il est inférieur à 5%. S'il est subtil, il attirera l'attention et ne sera pas trop ennuyeux. Mais ajoutez de l'animation uniquement si la vie humaine en dépend.

8
keaukraine

La raison pour laquelle la conception de droite (ce que j'appellerai l'affichage "en morceaux") attire davantage votre attention est que ce type de conception de boîtes discrètes est souvent utilisé pour représenter les niveaux de batterie sur les appareils électroniques tels que les téléphones portables, les ordinateurs (batterie sur un macbook, par exemple), etc.

La raison pour laquelle il est plus courant est qu'il est plus facile de mettre en œuvre un affichage en morceaux en utilisant une électronique bon marché (une rangée de LED) que de mettre en œuvre un affichage continu (qui nécessite une sorte d'affichage haute résolution).

En raison de la banalité relative de l'affichage "en morceaux", la plupart des humains ont une association conditionnée de manière plus profondément enracinée qui leur donne envie de voir toutes ces lumières allumées.

C'est aussi simple que ça, OMI.

5
Luke Griffiths

Je ne dirais aucun d'entre eux car ils ne m'incitent pas à les remplir. Si l'intention est de me persuader, cela ne fonctionne pas encore.

ne autre question pourrait être quelle option est vue remplie? La version de DROITE semble plus à moitié remplie que celle de gauche. La version gauche peut être facilement confondue avec une barre de défilement.

Si vous pouvez augmenter le contraste entre l'arrière-plan non rempli de la barre de progression et l'arrière-plan bleu du conteneur, la barre de progression sera alors visible.

4
Salman Ehsan

Je suis plus enclin à remplir la barre de progression gauche, qui s'apparente à un verre de liquide. La bonne semble nécessiter 3 unités non définies. Si les carrés représentaient des munitions, je serais plus enclin à remplir cela, car il semble plus volatil.

4
Cees Timmerman

Je pense que cela pourrait avoir quelque chose à voir avec les humains étant meilleurs en données qualitatives qu'en données quantitatives. Le deuxième exemple semble plus évident ou intuitif car il est plus facile pour nous de diviser les choses en 3-7 groupes que de mesurer une échelle continue.

C'est pourquoi nous avons des choses comme l'échelle de la douleur (le tableau des différents types de visages souriants utilisés dans les hôpitaux pour déterminer la quantité de douleur d'un patient) et l'échelle de Likert (choisissez un nombre de 1 à 7, 1 étant fortement d'accord et 7 étant fortement en désaccord). Il est beaucoup plus facile pour nous de choisir une catégorie ("ma douleur est à 4") que de trouver un nombre continu ("ma douleur est à 40%").

Bien que je sois d'accord avec d'autres personnes sur le fait que la couleur soit utile - encore une fois, il est facile pour nous de diviser les choses en rouge, jaune et vert par opposition à "bien cette barre a l'air à environ 25% pleine, mieux remplie".

2
Kevin Workman

La raison pour laquelle celle de droite attire votre attention est due à la façon dont l'esprit humain regroupe les objets. http://en.wikipedia.org/wiki/Gestalt_psychology#Gestalt_laws_of_grouping

Bref, à gauche, il y a ambiguïté dans le regroupement. Est-ce une boîte ou deux boîtes de couleurs différentes. Votre subconscient peut donc basculer entre une boîte et deux boîtes, ce qui ne conduit pas à une compréhension impulsive claire de la forme. Vous comprenez consciemment le sens, mais pas inconsciemment.

Celui de droite définit plus clairement les parties vides et assure une séparation entre le plein et le vide. Votre subconscient peut le comprendre, alors votre subconscient peut vous donner envie de compléter l'ensemble (acheter plus de crédits).

2
Chris

Je dirais qu'aucun d'entre eux, si vous souhaitez utiliser une sorte d'aspect psychologique de la conception, regardez votre public, s'il est jeune, utilisez un verre de vin comme mesure et remplissez-le en fonction du crédit actuel (ou même d'un quelques petits verres à liqueur), si ce sont de jeunes femmes à la recherche de produits amincissants, utilisez une balance avec des zones rouges et vertes, si ce sont des femmes d'âge moyen, utilisez un joli set de verres lunaires remplis et vides! Et si c'est de l'argent réel, une autre approche pourrait être d'utiliser des billets d'un dollar pour chaque bloc!

Si vous n'avez pas de groupe spécifique en tête, vous pouvez toujours utiliser la stratégie des jeux pour montrer combien de tours vous pouvez jouer, ils le montrent avec des cœurs ou des cercles ou tout comme la façon dont vous l'avez fait par des blocs verts, mon avis concernant votre conception actuelle est que si vous devez aller avec l'un d'eux, les rendre plus visibles, par exemple, vous pouvez utiliser un design horizontal qui sera plus grand et vous pouvez le développer au-dessus ou sous votre texte.

PS: pardonnez mes exemples stupides, je viens de les inventer!

2
Marzy

Cela a à voir avec la façon dont votre cerveau perçoit les images et les interprète. La première barre pleine semble plus grosse/plus pleine car il n'y a pas de rupture dans la continuité de l'image du mètre de remplissage. Celui de droite est divisé en "petits morceaux" plus petits, donc le cerveau l'interprète comme plus petit, même s'il représente la même quantité.

Donc, si vous cherchez un coup de pouce psychologique à vouloir qu'ils remplissent les crédits, celui de droite est probablement préférable. Cependant, si vous voulez qu'ils ressentent le progrès et la satisfaction d'en avoir rempli plus, celui de gauche serait préférable.

1
JohnP