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 !
Oh j’avais pas saisi ! Mais cool, je vais travailler à partir de ça alors ! 
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
2 J'aime
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 
!
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)
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 ?
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 .
Comme raconté précédemment, j’ai omis la version mobile des jauges
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 !
C’est parti !
Pour commencer, je transpose tout bêtement la jauge sur mobile.
Problème : on ne voit pas d’info chiffrée et c’est un peu coincé niveau espace latéral
Du coup, je rajoute l’info chiffrée
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 ?
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 ?!
Non, c’est tricher, et pas robuste à long terme surtout (mais j’ai tenté quand même
)
Du coup, j’inverse, on voit la somme et on découvre la jauge ensuite…
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…
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…
L’icône n’est pas facilement détectable / est associée au texte car dans sa continuité.
Et une autre…
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
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é…
Mais ça m’embête quand même de ne pas avoir de visualisation et d’obliger les utilisateurs à calculer où iels en sont
Au moins, c’est simplifié… ^^’
Test rapide avec une jauge…
…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.
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…
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…
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.
Mais… on ne voit toujours pas l’équilibre !
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…
Je mets davantage en avant le chiffre du budget dépassé et… on est pas mal !!
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
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 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
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
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 A tester aussi une fois que se sera en place
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
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 ?
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 )
@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 ! )
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.
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 
J’imagine qu’il s’agissait d’une faute de frappe, sinon on ne va pas être copains 
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 ?