Fonctionnement actuel des budgets : signification des couleurs/barres

Comme raconté précédemment, j’ai omis la version mobile des jauges :slight_smile:
Voici un court post tousse avec l’ensemble de mes itérations.

Spoiler : La prochaine fois, je ferai du mobile first pour éviter tous ces déboires !

:cowboy_hat_face: C’est parti !

Pour commencer, je transpose tout bêtement la jauge sur mobile.

it1

Problème : on ne voit pas d’info chiffrée et c’est un peu coincé niveau espace latéral :confused:

Du coup, je rajoute l’info chiffrée

it2

mais on commence à être très gros pour pas grand chose (si il y a 20 catégories ça va être vraiment pénible à lire -_- )

Du coup, il n’y a qu’à cacher l’info chiffrée, non ?

it3

Si je fais ça, je pars du principe que la visualisation est plus importante que les chiffres, et que voir ma somme est une action secondaire. C’est un parti pris que je n’ai pas vérifié et je ne suis pas à l’aise avec ça, et de toute façon, la largeur est trop faible, c’est tout coincé x.x

Hop j’enlève une petite icône et c’est bon ?!

it4

Non, c’est tricher, et pas robuste à long terme surtout (mais j’ai tenté quand même :stuck_out_tongue: )

Du coup, j’inverse, on voit la somme et on découvre la jauge ensuite…

it6

Mais quel intérêt de devoir dévoiler l’élément qui permet de visualiser rapidement ?! Cette jauge est peut-être simplement trop encombrante pour le mobile et n’a pas tant d’intérêt que ça…

Du coup j’essaie d’autres représentations…

it7

Hummm, pas efficace et visuellement, ça ne fonctionne pas, on n’identifie pas l’icône comme une indication visuelle du niveau…On ne sait pas ce que signifie la balance, ce que signifie le vert…

Une autre…

it8

L’icône n’est pas facilement détectable / est associée au texte car dans sa continuité.

Et une autre…

it9

L’icône est trop loin des chiffres alors que c’est avec eux qu’elle a un rapport ! Et on ne la distingue pas du texte :confused:

it10

Et là, elle est trop confondue avec les chiffres…

Et puis, elle n’est pas compréhensible seule cette balance ! Bon il me faut un autre plan… peut-être qu’elle sera plus identifiable avec les autres icônes, pour qu’on voit les différents niveaux de budget ?

Mhé… bonjour c’est l’effervescence de couleurs de tout les cotés @_@ La couleur est un élément d’information, et ce n’est pas acceptable, le contraste n’est pas suffisant avec le jaune, les icônes ne sont pas parlantes par elles seules…

Et si je ne mettais en avant que les budgets dépassés ?

Pas sûre que les icônes seules soient parlantes, mais ça me semble déjà mieux ! Il y a un truc avec la mise en avant de certaines sommes… mais toutes ces icônes, décidemment, ça ne marche pas…

J’en reviens à la base, juste des chiffres pour retrouver un peu de simplicité…

it13

Mais ça m’embête quand même de ne pas avoir de visualisation et d’obliger les utilisateurs à calculer où iels en sont :frowning:
Au moins, c’est simplifié… ^^’

Test rapide avec une jauge…

it14

…mais on perd la notion d’équilibre, et ça ne me va pas du tout, car la couleur devient une info importante (et ça, c’est pas ok pour l’inclusion des daltoniens ou des personnes ne voyant pas les couleurs)

Je réessaie avec des pictos, pour ne mettre en avant que les budgets dépassés.

it15

Mais ça rajoute du bruit visuel !

Et si je ne mettais une icône que là où le budget est dépassé ? Comme ça on minimise le bruit visuel… et le reste on le calcule ? Et je double l’info en mettant le chiffre en gras…

it16

Je trouve ça bof quand même, et pour une seconde fois, j’en reviens à…

…ne pas mettre en avant de catégorie du tout, et tout simplifier…

it17

Là, je commence à tourner en rond, et c’est le moment où je fais des minis tests utilisateurices pour voir ce qui est le plus apprécié, et la réponse est sans appel : « Les jauges, c’est beaucoup plus clair !! »

OK, donc je retourne à tester les mini-jauges.

it18

Mais… on ne voit toujours pas l’équilibre !

it19

Et comme ça ? On a la notion d’équilibre, je met la somme dépassée en avant, et c’est parlant avec un niveau d’avancement de son budget qui facilite la visualisation…

it20

Je mets davantage en avant le chiffre du budget dépassé et… on est pas mal !! :star_struck:

Je récapitule : On à l’information chiffrée facilement accessible, un état d’avancement de notre budget avec la jauge pour voir rapidement où l’on en est, et les catégories où l’on a dépassé notre budget sont un peu plus mises en avant ! Le tout sur une interface qui n’est pas surchargée de couleurs ou d’icônes incompréhensibles :3

J’interroge les personnes qui me font un retour général plutôt positif, si ce n’est que… personne ne comprends lorsque se sont des chiffres négatifs dans les budgets ! Cela fait plusieurs fois qu’on me fait la remarque, et je sens bien qu’il y a un sujet autour de la distinction des entrées d’argent et des dépenses à différencier ^^’ Ca ouvre sur un autre problème :slight_smile:

Mais pour l’instant, j’ai une version mobile qui (a priori) commence à tenir la route, et validée par mes mini tests utilisateurices… Il faudra tester sur de vrais utilisateurs de Kresus maintenant :smiley: Si vous vous sentez concernées, faites-moi signe !

1 « J'aime »

Je ne l’ai pas mise mais c’est surtout parce que je me suis concentrée sur les jauges, ça ne veut pas dire que je ne la trouve pas pertinente, c’est un oubli :slight_smile:

Alors j’espère que lorsque se sera interactif se sera plus clair, mais l’idée c’est que le seuil à ne pas dépasser, c’est le milieu de la jauge, le niveau jaune, celui où se trouve la balance. Si c’est vert, et entre la bourse et la balance, je suis bien dans les clous, si c’est orange, du coté des pièces, au delà de la balance, c’est que mon seuil est dépassé (d’un peu ou de beaucoup)… Est-ce que ça te semble plus clair ?

Je pense qu’on est d’accord, mais qu’on voit les choses du sens opposé : dans le cas actuel la gauge représente quelque chose qui se remplit (les dépenses ou les rentrées d’argent).

Dans ton cas je vois la gauge comme une représentation d’une somme disponible (en quelque sorte, jusqu’à la moitié seulement), qui s’épuise petit à petit.

Actuellement (dans ma représentation) le jaune (=warning) arrive lorsqu’on a dépensé 75% de ce qui est disponible (pour reprendre ta vision, sauf erreur de ma part) car il reste plus grand chose.
Dans ta représentation, si j’en suis à 80€ de dépenses sur un budget de 100€ (-100€), comment sera la barre jaune ?

Si j’ai un budget de -100€ (j’ai le droit de dépenser 100€) et en dépense 300, comment est-ce que la jauge apparaîtra ? Orange bien sûr mais j’ai du mal à me faire une idée de la taille de la partie orange, ou même si ça décale l’icône de balance vers la droite (j’ai largement dépassé, pas seulement de 100%) ?
Edit: je viens seulement de remarquer que la jaune orange n’avait pas de petit rond blanc pour signifier le milieu de la balance, mais je ne suis toujours pas sûr de ce que représente la jauge en termes de taille et direction.

J’espère ne pas être trop chiant avec mes questions, j’ai peut-être du mal à oublier le fonctionnement actuel et prendre du recul…

C’est ça !

Alors j’ai repris les échelles dont on avait parlé initialement :

Si on prends un maximum à +100% et un minimum à -300%, avec 7 échelles :
x < 0%
0% < x < 75%
75% < x < 100%
100% < x < 150%
150% < x < 200%
200% < x < 300%
300% < x

(d’ailleurs je me dis qu’il faudrait laisser ces chiffres paramétrables, car pourquoi 300% et pas 200% ou simplement 100% ? Ca pourrait être laissé au goût de chacun, moi 100% par défaut me semblerait plus évident)

Ça nous donne :

Je ne te trouve pas pénible, maintenant que j’ai une maquette plus claire en terme de paliers je te laisse poser toutes tes questions pour la compréhension, et j’y répondrai point par point pour que se soit plus clair :slight_smile:

Hormis la partie jaune que j’ai déjà évoquée, je pense que ce qui me dérange avec la partie orange c’est que plus je dépasse mon budget, moins elle est importante (et donc visible).

Ma logique (afin que la jauge orange grandisse et non rétrécisse) serait que la partie gauche de la jauge (avant la balance) soit vide lorsque je suis dans le budget, et que lorsque je le dépasse la partie orange grandisse depuis le milieu, vers la gauche.

Je vois ! C’est parce que de mon coté, je prends le parti de dire que ce qui permet de visualiser l’argent qui reste, c’est le niveau de la jauge, dans le sens jauge pleine = plein d’argent, jauge vide = plus d’argent. Et j’utilise la jauge vide pour symboliser le manque d’argent, le vide devenant une information à part entière.
Si ça te va, j’aimerai tenter une implémentation comme celle-là, et la faire tester pour voir si les personnes partagent plutôt ta logique ou la mienne ?

Par contre, pour la question liée à la partie jaune, je ne suis pas sure de bien comprendre ta question. J’essaie tout de même :

Dans ma logique, tant qu’on est dans le budget, on est dans le vert, mais je ne suis pas figée là dessus, on pourrait dire qu’on est dans le jaune entre 80% et 120% du budget estimé dépensé.
Mon idée actuelle : Je suis dans mon budget, tout va bien, je suis dans le vert / je le dépasse un peu, je suis dans le jaune / je le dépasse beaucoup, je suis en orange.

Mais ça peut être : Je suis largement dans mon budget, tout va bien, je suis dans le vert / je suis près de la limite ou je le dépasse un peu, je suis dans le jaune / je le dépasse beaucoup, je suis en orange.

Les deux me vont :slight_smile: A tester aussi une fois que se sera en place :slight_smile:

1 « J'aime »

Bien sûr !

Dans la mienne je vois comme un peu dangereux d’être arrivé à 75% des dépenses autorisées. Admettons que j’ai un budget de 100€/mois pour aller au bar. Je regarde mes budgets, si je vois que je suis déjà à 85€ de dépensés au bar le 10 du mois, si on me demande ce que je fais ce soir, je vais peut-être réfléchir.

Une fois dépassé, je suis dans le rouge/orange (sinon je vais toujours le dépasser, un peu comme si j’avais le droit à 100€ de découverts sans agios).

Je partage ta logique pour la partie “un peu dangereuse”, je me reconnais moins dans la seconde :slight_smile:

Je lance un sondage pour objectiver un peu tout ça du coup ! https://framaforms.org/niveau-de-criticite-des-budgets-kresus-1552038178

Hop le résultat du sondage :

En résumé, pour les personnes sondées, pour 100€ de budget, si je dépense:

Entre 0 et 75€, tout va bien (vert)
Entre 75 et 100€, je dois faire attention (jaune)
Au-delà de 100€, c’est alarmant (orange)

Donc ça donne un éclairage sur les différents niveaux auxquels apparaissent les couleurs \o/

Est-ce qu’il reste des poins à éclaircir ? :slight_smile:

1 « J'aime »

Coucou ! Je relance ici, en me demandant si tout va bien, si il me reste des choses à faire (je viens de penser à vérifier ce qui est adapté au thème sombre et à faire les adaptations qu’il faut :smiley: )

@nicofrand Tu en penses quoi ? Est-ce qu’il y a des choses qui te semblent à améliorer pour pouvoir lancer des personnes dans le code ? Des réticences sur certains points ? (si via forum c’est compliqué à raconter, on peut en parler ailleurs ! :slight_smile: )

Des bisous !

Salut !

Je suis désolé, je voulais prendre un peu de temps pour avoir + de recul et me détacher un peu de ce que je connais actuellement mais le temps a finalement passé et j’ai laissé traîner, j’aurais dû répondre bien avant.

Malgré ma période de détachement je dois avouer que je suis toujours dérangé par la représentation du budget à partir du moment où il est dans l’orange. Je comprends bien l’idée que le vide est une information à part entière mais le fait que plus j’accentue le dépassement de mon budget, moins je le vois (le orange reste plus visible que le vide pour moi) ne me parle pas.

Également je n’imagine pas comment ça pourrait être compatible avec le fait de dépasser le budget de + de 100%. Le dernier mois par exemple j’ai dépassé deux de mes budgets, dont un(en bas) à 220+% (j’ai dépensé 2.2 fois le budget) et je trouve cette info. intéressante (enfin alarmante mais intéressante) :

Je ne sais pas trop comment je peux aiguiller à partir de ces points ? On peut échanger par un autre canal (vidéo/audio éventuellement) si besoin, éventuellement tous ensemble.

Pour les choses restantes il y a les budgets positifs (= j’attends x€ en rentrée d’argent, où est-ce que j’en suis ?).

Bonjour @maiwann et @nicofrand,

Merci pour ces réflexions inintéressantes sur l’affichage des budgets dans Kresus.

Pour commencer par les choses simples, je vote pour la présentation des budgets faite par maiwann. Les images de pièce, bourses et la jauge sont top pour comprendre où on en est (exit les images anxiogènes ou réprobatrices).

Concernant le remplissage de la jauge de budget, je suis un peu comme nicofrand.
Si c’est un budget à dépenser, plus il reste de soussous, plus la barre verte doit être replie.
Si c’est un budget à économiser, plus je met de coté, plus il y a de vert.

A l’inverse, plus de dépense (ou alors si je dépense mon budget économie), plus la barre rouge augmente.

Je pense donc que le niveau 0 (plus rien à dépenser, ou aucune économie) devrait se trouver au milieu.
Et si jamais, on dépasse les 100% de la jauge, pourquoi pas décaler l’image du milieu ?
J’ai fait un truc rapide sous paint pour visualiser.

image

Ici, dans la catégorie animaux, j’ai dépensé 100%. Par contre, dans téléphonie, l’image de la balance à été décalé, pour montrer que la zone gauche est plus grande que la zone droite, donc j’ai dépensé plus que 100% (a la louche 125%).

Et une dernière chose, peut etre que des textes d’aides lorsqu’on survol la jauge pourrait aider.

Merci en tout cas pour les idées, j’ai hâte de voir ca en vrai :smiling_face_with_three_hearts:

J’imagine qu’il s’agissait d’une faute de frappe, sinon on ne va pas être copains :wink:

En tous cas merci d’avoir partagé ton idée, c’est chouette ! À titre personnel j’ai un peu du mal à comprendre l’utilité du pictogramme de balance, dans ce cas, puisqu’il a l’air de suivre la position de remplissage dans la barre. En voyant cet exemple, je me dis que j’aurais mieux compris avec le pictogramme au centre, et la barre décalée par rapport à ça ; ça donne un ancrage (l’objectif) et une indication de la réalité via la barre. Ce qui me semble correspondre en fait à la proposition de @maiwann, à qui tout le crédit revient donc ;). Peut-être qu’on pourrait déjà partir sur cette implémentation, vu qu’il n’y a pas eu d’objections très fortes pendant plus d’un an, et que cette solution semble convenir à tous les besoins mentionnés ? :slight_smile: