Fonctionnement actuel des budgets : signification des couleurs/barres

nicofrand · Août 30, 2018, 10:54

Bonjour,

je crée ce sujet pour expliquer quelque peu le fonctionnement actuel des budgets, et comment ils me servent.

Tout d’abord, il faut savoir qu’il n’y a actuellement qu’un budget global : si on modifie le budget pour le mois d’août, ça le modifiera aussi pour juillet. Ce n’est plus un comportement qui me convient, et un sujet existe déjà sur ce point : Budgets évolutifs (par mois).

Pour la partie “Afficher en pourcentage”, je ne m’en sers aucunement, c’est une demande de Benjamin, je n’ai pas d’avis sur son utilisation/nécessité, etc.

Parlons plutôt des barres. L’idée est d’avoir en un coup d’œil une idée de notre état des dépenses/rentrées pour une catégorie donnée. En ayant plusieurs couleurs (les dégradés m’importent en fait peu, seules les couleurs m’importent, et sous forme de “stacked bars”, je peux voir plusieurs choses.

Sur la première ligne je vois que :

J’ai dépassé mon budget
Je l’ai dépassé très largement : la barre rouge est plutôt large

Sur la seconde ligne :

Sur 100€ de dépenses “autorisées” je suis en fait créditeur de 50€, tout va + que bien !

Sur la troisième ligne :

J’ai dépassé mon budget
Je n’ai pas dépassé de tant que ça, c’est pas encore la cata

Sur la quatrième ligne :

J’ai le droit à 267€ de dépenses, je n’en suis qu’à 126, je suis large

Sur la cinquième ligne :

J’ai atteint le seuil des 1000€
Entre 700€ et 1000€, je suis en orange. Dans ce cas précis (désolé je ne voulais pas refaire toute l’image) ce n’est pas très utile, mais il faut imaginer un cas où sur 1000€ de dépenses autorisées, je suis déjà à 900. Je veux voir "attention, tu es encore dans le budget mais vas-y mollo, t’es quand même juste = tu peux aller boire un verre mais pas 15 tournées.

Sur la 7è ligne :

J’ai pas de budget, c’est trop volatil ou mes catégories sont peut-être mal assignées et trop génériques

Sur la 8ème ligne :

Sur 25€ de dépenses autorisées, je n’ai encore rien dépensé

Sur la 8è ligne :

J’ai dépensé 45€50 mais je n’ai pas de budget non plus (comme ligne 7)

Sur la 9è ligne: pareil que la 4e.

Il manque aussi :

Je m’attends à être créditeur de 100€ mais je n’ai eu que 50€, ça va pas du tout.

Je m’attends à être créditeur de 60€ mais je n’ai eu que 50€, c’est pas bon, mais je suis pas loin du compte non plus, encore un effort !

Voilà, j’espère que ça clarifie un peu tout ça, et aide à comprendre pourquoi plusieurs couleurs sont utilisées, et donc les “contraintes” en termes de visualisation de ces données.

maiwann · Août 31, 2018, 1:23

Hello @nicofrand !

Merci de prendre du temps pour m’expliquer la fonctionnalité que tu as mise en place =)
Si j’ai bien compris, ton but était :

De pouvoir visualiser, pour chaque catégorie, les entrées/sorties d’argent prévues et effectives
De savoir si, pour chaque catégorie où tu dépenses :
- Il te reste peu ou beaucoup d’argent par rapport aux sorties d’argent prévues dans ton budget,
- Tu as dépassé, de peu ou de beaucoup, ces sorties d’argent prévues dans ton budget,
De savoir si, pour chaque catégorie où tu espères des rentrées d’argent :
- Tu es près ou loin de ton estimation initiale

Est-ce que c’est bien ce que tu as voulu faire sur cette page ?
Est-ce qu’il y a des besoins que j’ai oublié de citer ?

nicofrand · Septembre 1, 2018, 9:04

Bonjour @maiwann, heureux de te voir par ici !

Non je pense qu’on a fait le tour des besoins en ce qui concerne les barres.

Je vais compléter avec les autres éléments, afin que tu aies une vue globale et qu’il ne te manque pas trop de détails qui pourraient avoir leur importance.

En + de cette visualisation rapide pour chaque catégorie, j’utilise les colonnes seuil et différence.

J’ajuste les valeurs de mes budgets de façon à ce que le total de la colonne seuil arrive à 0 : j’ai une catégorie “Salaire” par exemple, qui fait la balance avec tout le reste.

En fin de mois, s’il s’avère que le total dans la colonne “Différence” est non nul, et donc que je n’ai pas collé parfaitement au budget, j’essaie de prendre ce que je n’ai pas dépensé pour l’épargner en me faisant un virement sur un autre compte d’épargne (je n’utilise le budget que sur mon compte courant).

Ce qui me fait me rendre compte que ça ne fonctionne à peu près bien que parce que je catégorise tout.

Pour info, ce montant est en toujours différent chez moi à celui sur mon compte car j’essaie de garder de l’argent de côté pour prévenir les retards de salaire et ne me pas retrouver à découvert lorsque je paie mon loyer.

Sinon, le bouton de recherche sert à voir pour la période donnée les opérations de telle catégorie, ce qui me permet de voir pourquoi j’ai explosé le budget (= quelle opération non-récurrente a causé le souci, ou quel montant normalement peu variable a changé ce mois-ci).

J’espère avoir fait le tour…

maiwann · Septembre 3, 2018, 7:05

Cool ! Merci pour le complément !

Du coup, j’avais plutôt bien saisi le fonctionnement de la page et ton intention =)

Après des tests utilisateurs rapides (= j’ai mis 4 utilisateur.ices de Kresus devant la page Budget et leur ai demandé ce qu’iels comprenaient) je peux te dire que l’intention de la page est plutôt bien comprise, exceptée sur les points suivants:

Ce que représente les colonnes : Pour certaines, on comprend ce qu’elles signifient plutôt grâce à leur contenu que grâce à leur intitulé.
C’est pourquoi, je te propose de les renommer en :
Catégories _ Opérations réelles _ Opérations prévues _ Différence
qui sont à mon sens des termes qui seraient mieux compris.
On pourra évidemment faire des tests pour voir si il y a une amélioration avec ces termes là ou si ça reste flou (et itérer sur de nouveaux labels =) )
La signification de la couleur des barres pour visualiser rapidement ton niveau de dépassement du budget : Là malheureusement, ça coince systématiquement. On saisi l’intention de donner une idée de à quel point on est proche ou loin du dépassement de son budget, mais la façon dont c’est représenté n’est pas comprise par les personnes que j’ai interrogées. De plus, représenter des infos uniquement par la couleur, ça complique les choses niveau accessibilité, notamment pour les daltoniens qui n’auront pas accès à l’info (qui cependant n’est pas critique, donc c’est pas forcément si grave, mais ça donne un traitement différent selon les possibilités de chacun).

Si ça te dit, j’ai bien envie de travailler là-dessus pour trouver une autre façon de représenter ces besoins-ci (et sans doute abandonner la représentation actuelle sous forme de barres colorées / dégradées) :

De savoir si, pour chaque catégorie où tu dépenses :

Il te reste peu ou beaucoup d’argent par rapport aux sorties d’argent prévues dans ton budget,

Tu as dépassé, de peu ou de beaucoup, ces sorties d’argent prévues dans ton budget,

De savoir si, pour chaque catégorie où tu espères des rentrées d’argent :

Tu es près ou loin de ton estimation initiale

Est-ce que ça te dirai ?

nicofrand · Septembre 3, 2018, 7:55

Benjamin a commencé à travailler sur tes premiers retours ici : https://framagit.org/kresusapp/kresus/merge_requests/758 (un peu technique peut-être).

Je dois dire que je préfère “Montant réel” et “Budget prévu” à “Opérations réelles” et “Opérations prévues”, surtout pour “Budget prévu”.

Niveau accessibilité, on est d’accord, c’est pas le point fort de Kresus et la section budget en premier. Techniquement chaque couleur pourrait avoir un aria-label pour info., ce qui ne règle en rien les problèmes pour daltoniens etc. bien sûr.

Je suis très curieux de voir ce que tu peux imaginer à partir de mes besoins/contraintes à la place de ces barres/couleurs ! Merci de ton implication !

Au passage, as-tu les deux types d’affichage : bureau et mobile ? Firefox te permet un aperçu via CTRL+MAJ+M de la vue sur smartphone, parfois un peu différente (épurée de certaines choses).

Merci à toi et aux testeurs !

maiwann · Septembre 3, 2018, 8:00

Houlà oui c’est un peu technique pour moi !

Je me souviens en avoir discuté avec lui sur le coup, il avait noté ce que on avait raconté et ça me semble clair aussi avec “Montant réel” et “Budget prévu” alors go pour ça :3

Je vais regarder l’affichage mobile, tu as raison je n’y ai pas fait attention (youpi une contrainte de plus ! \o/ )

Pour les barres:couleurs, je vais y travailler alors. Je vais te réécrire pour bien cerner la façon dont ça fonctionne techniquement actuellement (mais pas maintenant, il est trop tard ) pour que je puisse m’interfacer en conséquence.

Bonne soirée !

maiwann · Septembre 5, 2018, 4:40

Recoucou !

Alors je sais ce dont j’ai besoin : Dans un premier temps, j’ai besoin de savoir quelles sont les “calculs” que tu fais. Dans quel cas est-ce qu’on est proche de la limite ? Dans quel cas on considère qu’on est loin de la limite ? Quelles sont les modalités de calcul pour décider de tout ça en gros =)

nicofrand · Septembre 5, 2018, 6:18

Re !

Alors, le warning (orange) est à partir de 75%. C’était censé être modifiable par l’utilisateur, mais pour l’instant c’est en dur dans le code, faute de temps. Personnellement, ça peut rester fixe, ça ne me dérange pas.

Pour tous les calculs, je trouve le code + simple à lire… est-ce que par chance il y aurait un Benjamin près de toi pour t’expliquer ces lignes : https://framagit.org/kresusapp/kresus/blob/master/client/components/budget/item.js#L34-75 ?

Je vais tenter de résumer. Chaque bout de barre (vert, orange, rouge) a une largeur en pourcentage.

Calcul du pourcentage que représente le montant dépensé vis à vis du budget

On part du pourcentage que représente la somme dépensée par rapport à celle planifiée.

Si pas de budget : 0
Sinon, dans l’ordre :
1. pourcentage = (100 * montant réel) / montant planifié;
2. Si le pourcentage est négatif, on y soustrait 100.
3. On arrondit à deux décimales

Si aucun budget/seuil : tout en bleu

Si le seuil est nul (= 0) : tout en gris

Si le seuil est positif :

pourcentage < 75% : rouge
pourcentage < 100 : orange
sinon : vert

Si le seuil est négatif :

pourcentage = 0 : tout en gris
Si pourcentage < 0 : success (vert) total
Sinon si pourcentage <= 100 : il y a 1 ou 2 bouts de barres (jamais de rouge). De 0 à (le plus petit entre le pourcentage et 75%) : vert. Si le pourcentage est > 75%, on ajoute une barre orange avec pour largeur (pourcentage - 75).
Sinon, on calcule un ratio : pourcentage / 100. Ensuite, le vert = 75% / ratio, le orange = (100 -75) / ratio, le rouge = (pourcentage - 100) / ratio.

J’espère ne pas m’être trompé en retranscrivant en langage naturel .

maiwann · Septembre 5, 2018, 9:51

Je n’ai aucun Benjamin pour m’expliquer du code sous la main

Mais merci pour les explications dessous, c’était plus simple à comprendre que les lignes de code x)
Je n’ai pas tout bien saisi (surtout sur les dernières lignes) mais si je récapitule avec ce schéma, est-ce que ça te semble juste ? (même si avec ce dessin on perd forcément de la granularité )

D’ailleurs à quel point c’est acceptable pour toi de perdre de la granularité ? Je m’explique : Est-ce qu’il faut une précision au pourcent près ? Est-ce que si on réalise les grandes tendances du budget c’est suffisant ? Par exemple sur l’image j’ai 5 niveaux de granularité, est-ce que c’est suffisant ou tu tiens à quelque chose de plus précis ?

Pour info, plus il faut de la précision, plus c’est complexe à représenter. Mais si la précision est une chose importante pour toi, j’en tiendrai compte, pas de souci

nicofrand · Septembre 6, 2018, 9:42

Ta compréhension des calculs me semble juste !

Je ne suis pas au pourcent près mais la perte de granularité lorsqu’on est dans le rouge me dérange un peu, s’il n’y a pas de différence entre 150% et 300%…

En revanche pour le “budget -”, entre 0 et 75% je ne fais pas de distinction, mais en ajouter une ne me dérange pas.

Mais là où je suis embarrassé c’est au sujet des émoticônes. Est-ce que c’est uniquement pour retranscrire ce que tu as compris ? En fait j’ai sûrement une utilisation bizarre des émoticônes mais la même icône peut avoir une signification différente selon mon humeur, et souvent entre et je ne vois pas d’échelle graduelle. Je les trouve trop liés au contexte de conversation, où l’ironie, l’hypocrisie, l’excitation font qu’une même émoticône a une signification différente à chaque fois.

maiwann · Septembre 6, 2018, 12:46

Pour les emoji, pas de souci, c’était uniquement pour ma seule compréhension

Je ne suis pas au pourcent près mais la perte de granularité lorsqu’on est dans le rouge me dérange un peu, s’il n’y a pas de différence entre 150% et 300%…

Ok, si je récapitule pour l’instant on a des paliers à 0%, 75%, 100% et 150%.

Est ce qu’on rajoute un palier (ou plusieurs) au dessus de 150% ? (200% ? 250% ? 300% ?)
Pour les budgets + et les budgets - ou seulement l’un des deux ?

Est ce que si l’on fait avec ces 5 (ou 6…) paliers ça te semble une granularité acceptable ?

nicofrand · Septembre 6, 2018, 1:25

Sur ton schéma à partir de 150%, ce sont plusieurs émoticônes empilées ?
Si on garde l’analogie, est-ce qu’à 200% on verrait 2 émoticônes, à 300% 3 émoticônes (et on s’arrête à 3 icônes empilées max.) ?

L’idée est de quand même signifier une certaine granularité mais + “simplement”, et en plafonnant à 300% (ie. visuellement 300% = 1000%).

maiwann · Septembre 6, 2018, 1:53

Les emoji, c’est uniquement pour moi, ça me permettait de mieux comprendre les différents paliers, il ne faut surtout pas s’arrêter dessus ! Pour l’instant j’essaie juste de comprendre les calculs =)

L’idée est de quand même signifier une certaine granularité mais + “simplement”, et en plafonnant à 300% (ie. visuellement 300% = 1000%).

Ok donc ce que j’imagine c’est que:
si on dit que le pourcentage calculé = x

On aurait comme paliers :
x < 0%
0% < x < 75%
75% < x < 100%
100% < x < 150%
150% < x < 200%
200% < x < 300%
300% < x

Ce qui fait une échelle de 7 paliers différents pour la granularité. Est-ce que ça te semble correspondre ?

nicofrand · Septembre 6, 2018, 2:02

Oui, c’est pour ça que je parlais juste d’analogie, mais j’ai peut-être rendu les choses + confuses.
Oui ça me semble bon !

maiwann · Septembre 6, 2018, 2:03

Oh j’avais pas saisi ! Mais cool, je vais travailler à partir de ça alors !

maiwann · Mars 1, 2019, 9:23

Il était une fois

C’est l’histoire d’une designer qui, au milieu de la nuit de l’AG Framasoft, a eu une idée lumineuse qui résolvait les problèmes de design du budget de Kresus qu’elle avait mis de coté depuis des mois faute de solution pertinente. Du coup, elle a tout écrit sur un post-it à 2h30 du matin (oui oui…)

Pour monter un peu en gamme de rendu, elle passa sur son outil de prédilection histoire d’un peu mieux réaliser ça. Le principe : On visualise son niveau de budget grâce

au niveau de la jauge selon l’endroit où elle se trouve vis à vis des icônes :
- une icône signifiant « j’ai plein de sous »
- une icône « j’ai plus de sous »
- et une icône "je suis pile à l’équilibre, c’est parfait)
à la couleur de la jauge (vert si il reste beaucoup de budget, jaune si on est proche de la fin de son budget, voir que l’on a un peu dépassé, orange si on a beaucoup dépassé son budget) (orange plutôt que rouge pour ne pas être anxiogène )
aux icônes mises en avant

Je pars donc à la recherche d’icônes qui représentent le plus clairement ces niveaux de budget, en ayant à l’esprit :

que les icônes vont être représentées en tout petit et qu’il faut donc qu’elles soient très lisibles et peu détaillées
que les icônes vont se répéter pour chaque catégorie, et qu’il est donc important d’avoir un point d’attention à ce que l’icône signifiant « J’ai dépassé mon budget » ne soit pas trop anxiogène… Imaginez une flopée d’icônes qui représentent peu ou prou alors que vous êtes déjà pris à la gorge par vos finances ?

Malheureusement, des icônes qui fonctionnent en très petit et qui signifient « je n’ai pas d’argent » ça ne court pas les rues. J’ai demandé de l’aide sur Mastodon et on m’a fait beaucoup de proposition, des poches retournées ou des porte feuilles vides / avec des mites qui s’envolent, mais impossible de représenter ça simplement avec une petite icône qui resterait lisible.

Pour résoudre ce problème, je me suis dit que signifier « Oh oh je dois faire des économies » plutot que « oh oh je n’ai plus d’argent » pouvait marcher. Et j’ai donc décidé de représenter une petite fourmi ! (en plus, c’est pas anxiogène les fourmis, c’est parfait )

Ma première itération

Autant vous dire que les tests utilisateurs ont été sans appels : Cette fourmi, on n’y comprend rien.

Par contre, le système de jauge a été validé et fonctionne bien, si ce n’est que les utilisatrices ont unanimement demandé à ce que le sens de lecture soit inversé. Le système de couleur et de progression fonctionne bien, et le fait que certaines icônes soit grisées et pas d’autres améliore bien la lecture.

Je me lance donc dans un autre essai d’icône, avec une bourse vie, puis une bourse barrée. Mais la bourse vide ne semble pas vide, et la bourse barrée n’est pas très différente de la bourse pleine, et me semble un peu réprobatrice…

Les utilisatrices poussent une opposition bourse pleine / petite pile de pièces pour les icônes. J’étais très peu convaincue de la lisibilité d’un petit tas de pièces, mais décide d’y passer un peu de temps puisque les utilisatrices étaient unanimes. Et le résultat a été au rendez-vous :

On différencie bien la bourse et les pièces, les icônes ne sont pas anxiogènes ou réprobatrice, et sont très lisibles même en petit.

Je rajoute quelques éléments graphiques pour bien distinguer que l’on se situe dans un tableau, et voilà le travail !

Petite précision pour la transparence des icônes :

Si il reste du budget, la bourse et la balance sont noires,
si on est proche de la limite du budget, la bourse se grise,
si on dépasse l’équilibre du budget, la balance aussi devient grise et les pièces deviennent noires.

Ce que j’ai oublié

J’ai oublié 2 points importants sur les quels je suis partie pour travailler :

La version mobile de la page est complètement passée à la trappe T_T Je ne m’en suis rendue compte qu’au moment où je rédigeais ce post. Je suis donc partie pour une itération supplémentaire afin de mettre en place une version adaptée aux petits écrans
Les rentrées d’argent : La page a été conçue pour des dépenses d’argent, et j’ai omis de réfléchir au fonctionnement des rentrées d’argent prévues… Je vais m’y atteler dans la foulée

Voilà mon état d’avancement Faites moi signe si vous voyez d’autres choses que j’ai oublié x.x

nicofrand · Mars 2, 2019, 10:24

Salut @maiwann !

Un grand merci pour ce travail de qualité, j’ai hâte de voir ça dans mon Kresus ! J’aime beaucoup que tu aies pris le temps d’expliquer le processus de réflexion et de tests. Je ne pensais par exemple pas le côté anxiogène comme si problématique, le pensant plutôt incitatif.

J’aime beaucoup le jeu avec la transparence des icônes, j’espère d’ailleurs qu’il fonctionnera aussi bien sur le nouveau thème dark :p.

Pour l’icône des petites pièces j’ai l’impression que le fait qu’elle soit + petite que celle de bourse donne aussi un bon équilibre, que je ne retrouvais pas dans les premiers essais avec le porte-monnaie ou la bourse barrée.

Pour les jauges, j’ai + de mal à comprendre ce qu’elles signifient, principalement dans le cas où la jauge est rouge : j’ai a priori dépassé mon budget, mais comment je vois si je l’ai dépassé de beaucoup ou non ? Ou bien est-ce une information que tu as choisi de ne pas garder ? Telles quelles je les comprendrais dans le cas où je m’attends à une rentrée d’argent mais que je n’en ai qu’une petite partie, mais pour les dépenses je ne vois pas trop. Dans le cas de la jauge jaune, est-ce qu’effectivement la jauge peut être jaune mais en-dessous de la moitié (actuellement le côté warning est à partir de 75%), dans le cas de dépenses, ou bien je ne dois pas trop me fier à l’image ?

Hormis les rentrées d’argent et le côté mobile je ne vois pas d’autres choses…

Un grand merci encore une fois pour cet excellent travail, j’espère que tu as quand même réussi à dormir !

maiwann · Mars 7, 2019, 10:58

On fera des ajustements

Je vais refaire une maquette plus propre avec les différents niveaux de jauges, ça permettra de voir si c’est plus clair ou non
Par contre, je vois que plus ça va, plus il est compliqué de traiter de la même façon les rentrées et sorties d’argent (la majorité de mes retours sont liés à l’incompréhension de la présence d’un moins sur les sommes d’argents du budget… à voir dans un second temps peut-être)

maiwann · Mars 7, 2019, 3:32

Voilà une image de la maquette avec les jauges dans l’ordre (pour les dépenses seulement )

Est-ce que tu y vois plus clair ? Est-ce qu’il y a des choses que tu ne comprends pas ?

nicofrand · Mars 7, 2019, 4:45

Je n’avais pas remonté une partie sur les choses « manquantes » actuellement, car elle est liée aux entrées d’argent mais au cas où je vais le faire car elle est importante pour moi également : la ligne des totaux (en gros si prends tous les budgets dépenses et ceux sorties, quelle est la différence).

Ah oui merci beaucoup, je crois avoir pigé ! Les jauges représentent en fait un objectif à atteindre, et donc les moins remplies sont celles où je suis le + éloigné du budget c’est ça ?

J’ai du mal à raisonner en « objectif à atteindre » pour les dépenses : pour un budget positif c’est facile : tant que je n’y suis pas, j’ai pas atteint mon objectif) ; pour les dépenses je raisonne plutôt en « seuil à ne pas dépasser » je pense… je raisonne peut-être mal, je vais prendre un peu de temps pour y penser si c’est bien ça .