Écran du budget mensuel - il faut tenir compte du fait qu'il soit tôt / tard dans le mois
Je travaille actuellement sur une application mobile de gestion budgétaire. L'application dispose d'un écran qui affiche une liste de catégories et pour chacune, les informations suivantes s'affichent:
- Combien d'argent dépensé l'utilisateur a-t-il alloué à la catégorie
- Combien d'argent a été réellement dépensé dans la catégorie ce mois-ci
- Une indication indiquant s'il a dépensé plus ou moins que le montant alloué
Le but de l'écran est que l'utilisateur puisse voir un aperçu de toutes les différentes catégories et se rendre compte s'il dépense (ou sous-dépense) sur l'une des catégories au cours d'un mois donné.
Une illustration très approximative:
Ce que je cherche à ajouter est une sorte d'indication du temps écoulé depuis le début du mois, car si nous approchons de la fin du mois et que l'utilisateur n'a pas utilisé tout son budget, cela signifie qu'il est près d'atteindre son objectif de ne pas dépenser trop, il convient donc de l'indiquer comme une bonne chose.
D'un autre côté, si ce n'est que le début du mois, même si la limite budgétaire n'a pas encore été atteinte, le mois vient de commencer, donc je pense que l'indication devrait être différente (donc les utilisateurs savent toujours qu'ils ont besoin attention à ne pas dépenser trop pour le reste du mois).
Je serais heureux d'avoir des idées sur la façon d'incorporer de telles informations à l'écran, en gardant à l'esprit que je ne fais qu'une version mobile, donc la surface de l'écran est évidemment limitée.
Merci!
Présentez leur position actuelle dans le temps et les budgets ensemble, sous forme de graphiques à barres.
Cela indiquera clairement qu'ils sont soit au-dessus soit au-dessous du budget pour ce qu'ils devraient être à ce stade du mois, ou au-dessus de leur budget mensuel entier.
Utilisez un montant au prorata pour déterminer si les dépenses sont inférieures ou supérieures au budget.
Par exemple, un budget d'épicerie de 1 000 $ équivaut à environ 33 $ par jour. Multipliez cela par le jour du mois en cours et utilisez ce montant pour déterminer si l'utilisateur a dépassé le budget (avant d'avoir atteint le montant total).
Cela vous permettra de fournir des commentaires précis tout au long du mois sans avoir à former à l'utilisateur que différentes couleurs sont bonnes ou mauvaises à des moments différents. Cela signifie également que vous ne verrez pas les dépenses de 999 $ le premier du mois comme "bonnes" ou "neutres", alors que ce comportement les conduira très probablement à un dépassement de budget très prochainement.
De plus, ces informations peuvent être utilisées pour créer des graphiques qui montrent quand les dépenses ont dépassé la limite pour dépasser le budget. (Bien que probablement sur un écran différent.)
Une barre de progression devrait faire le travail dans ce scénario.
Je suggérerais également de changer la police utilisée pour la date, car une application financière doit utiliser une police qui correspond bien aux chiffres. Ici, le 9 a une ligne de base différente. Roboto est bon par exemple mais pas original. 
Comme extension possible à excellente réponse de maxathousand , j'ai essayé d'étendre l'idée pour couvrir les dépenses à venir qui sont prévues/engagés pour plus tard dans le mois mais n'ont pas encore été dépensés.
Ce qui suit montre la situation où 30 $ ont déjà été prévus pour être dépensés, mais n'ont pas réellement dépensés pour le moment. Sur le budget d'un mois complet de 240 $, cela laisse 210 $ à suivre. Les dépenses "en bonne voie" sont maintenant de 140 $ (les deux tiers de 210 $), donc une dépense réelle de 128 $ serait inférieure de 12 $ à cet objectif:
Quelques réflexions sur la conception:
Vous pourriez simplement réduire le budget d'un mois par les dépenses prévues (ce qui en fait 210 $). J'ai deux problèmes avec cela: le premier est qu'il cache le fait que l'argent va être dépensé, ce qui facilite la complaisance envers son dépenses. La deuxième objection est que - selon le degré d'engagement envers les dépenses futures - il peut être possible de "dé-planifier" les dépenses si vous remarquez que vous allez dépasser le budget. Ce ne serait pas aussi évident si le budget global était simplement réduit.
Une autre alternative serait d'ajouter les dépenses prévues à la fin de la barre " ce que j'ai dépensé ce mois-ci " (la barre vert foncé dans l'exemple ci-dessus). C'est probablement plus une question de goût, mais pour moi - parce qu'il n'a pas été (encore) dépensé - il ne devrait pas être ajouté au " ce que j'ai dépensé ". En outre, je pense que cela pourrait brouiller l'effet clair " suis-je sous ou au-dessus de la ligne des 20 jours " créé par le design original de maxathousand. (Dans l'exemple ci-dessus, la boîte hachurée chevaucherait le marqueur de 140 $, ce qui rend moins évident si vous êtes sous ou sur-budgétaire.
Quelques notes sur la façon de déterminer la taille de la barre " ce que j'ai dépensé ":
Pour garder les choses cohérentes, le marqueur " dépenses cibles " (140 $ dans l'exemple ci-dessus) doit être dans le même position physique comme autres catégories de dépenses.
Le montant des dépenses cibles est calculé en tenant compte des dépenses prévues: budget de 240 $ - 30 $ prévus = 210 $ restant pour le mois. Dans ce cas, 210 £ * 20/30 = 140 $.
La clarté de l'original de maxathousand vient du fait que la fin de la barre " ce que j'ai dépensé jusqu'à présent " se trouve à gauche (= bon ) ou droit (= mauvais ) de la ligne des 20 jours. Par conséquent, la taille de la barre vert foncé est déterminée par rapport au point de 140 $. Dans l'exemple ci-dessus, c'est 128/140e de la ligne des 20 jours. Jusqu'à présent, une dépense de 140 $ devrait toucher la ligne des 20 jours.
Lorsque les dépenses prévues se transforment en dépenses réelles , la case hachurée serait supprimé et la barre vert foncé étendue comme dans l'original.
Un problème potentiel avec ce qui précède est que si nous nous rapprochons trop de la fin du mois avec des dépenses prévues restantes, le marqueur cible (140 $) peut entrer en conflit avec la légende "30 $ prévu". Si tel est le cas, il peut être nécessaire de fusionner les informations dans la légende sous la ligne (par exemple, "128 $ + 30 $ sur 240 $").