Monetaz Blog

Die neue Budget-Bar

von Lucas

Cover - Die neue Budget-Bar

Hallo Mammutherde!

Wie bereits angekündigt werden wir zeitnah ein neues, größeres Update veröffentlichen. Es ist das größte Update seit dem Release und wir hoffen sehr, dass es euch gefallen wird! Zusätzlich dazu möchten wir euch mehr Einblicke hinter die Funktionen von Monetaz geben. Dafür wird die neue "Wissenswertes" Blog-Kategorie herhalten. Zumindest versuchen wir es zeitlich.

Eine Veränderung die das Update mit sich bringen wird sind "Investitionen". Damit meinen wir, dass nun Sparbeträge, z. B. Überweisungen auf das Sparkonto, ETF-Sparpläne oder der Einkauf von Kryptowährungen oder Gold, als Investitionen deklariert, und somit als bereits investierter Betrag in der App hinterlegt werden können. Vorher war das nicht möglich, da eine ausgehende Überweisung die zum Sparen oder Investieren angedacht war, trotzdem als Ausgabe vermerkt wurde. Das hat zu Verwirrung und ungenauen Daten geführt.

Was das ebenfalls bedeutet ist, dass wir einen komplett neuen Reiter für unser Haushaltsbuch benötigen; mit weitreichenden Auswirkungen! So reichen beispielsweise die Unterteilung in Eingabe und Ausgabe nicht mehr. Genau hier kommt auch grafische Element ins Spiel, um den sich dieser Blog-Beitrag handelt. Die "Budget-Bar", wie wir sie intern liebevoll getauft haben. Das ist diese grüne Leiste ganz oben im Haushaltsbuch. Wir hoffen doch sie ist stets grün! ;-)

Die Budget-Bar

Sie ist bereits seit dem Release fester und wichtiger Bestandteil der Monetaz-App. Mit ihr lassen sich Einnahmen und Ausgaben sehr schnell erfassen, ob visuell oder in Worten. Im folgenden möchte ich euch die neueste Iteration vorstellen, die Varianten die sich in den unterschiedlichen Szenarien ergeben und auch auf die vergangene zurückblicken. Schauen wir uns zunächst einmal die (noch) aktuelle Version an.

Sie ist grundsätzlich leicht verständlich, mit ausreichend Erklärung versehen und auf den Punkt. Leider ist sie etwas hoch und nimmt so viel wertvollen Platz weg. Das war bis dato noch ein Schmerz, mit dem ich als Designer leben konnte, da sie ihren Zweck wunderbar erfüllt und das das Wichtigste ist. Jedoch war es schon ein Kompromiss, dass wir überhaupt eine Bilanz mit in die Leiste nehmen. Mit Investitionen muss die Bilanz um mindestens eine Zeile darunter verlängert werden, was dann doch anfängt etwas zu umfangreich für einen schnellen Blick auf die Leiste ist.

Die neue Iteration

Viel Zeit ist in die Entwicklung einer optimalen Lösung geflossen und sie ist bestimmt nicht perfekt. Ich betiteln diese Version auch ganz bewusst als eine "Iteration", da Optimierungen und Anpassungen an neue Funktionen immer offen sein müssen. Aber schauen wir sie uns einmal genauer an.

Zwei Veränderungen fallen sofort ins Auge. Zum einen die komprimierte Höhe der Budget-Bar und zum anderen die neue, blaue Farbe. Auch die Icons oben rechts und die Logik mit den Tabs darunter ist anders als zuvor; um die soll es in diesem Blogpost jedoch nicht primär gehen.

Vorteile

Schauen wir uns die Vorteile dieser Iteration an. Zunächst einmal sind nun Investitionen mit dargestellt. Sie werden durch die blaue Leiste an der rechten Seite visualisiert. Die grüne Grundlinie im Hintergrund bleibt dabei identisch in ihrem Verhalten und ihrem Aussehen. Unter der Leiste erkennen wir nun mit einem größeren Fokus, was wir erreicht haben, statt uns einfach nur Fakten zu liefern. Anstelle von "Einnahmen" und "Ausgaben" geben wir dem Nutzer direkt eine Information darauf, wie hoch die Sparrate im Moment ist, bzw. ob und wie hoch wir uns über dem Sparziel befinden, sollten wir ein Sparziel in den Profil-Einstellungen hinterlegt haben.

Nachteile

Natürlich gibt es auch Nachteile – der Wichtigste wird sein, dass die Einnahmen und Ausgaben nicht mehr in Klartext zu sehen sind. Zumindest nicht an dieser Stelle. Stattdessen wird es nun eine Bilanz weiter unten im Haushaltsbuch geben, die genau diese Informationen + den getätigten Investitionen bereithält, siehe nachfolgende Grafik. Das halten wir für den richtigen Schritt, da wir euch keine Informationen wegnehmen und das Haushaltsbuch so aufräumen können. Auch die Monatsübersicht wird hierdurch vereinfacht.

Reich an Varianten

Mit der schwierigste Gesichtspunkt der Entwicklung der Budget-Bar ist das allgegenwärtige "Was ist wenn ...?".

  • Was ist wenn jemand weniger einnimmt als er ausgibt?

  • Was ist wenn jemand mehr investiert hat, als seine Sparrate eigentlich zulassen würde?

  • Was ist wenn jemand gar keine Investitionen nutzt?

Diese und mehr Fragen haben wir uns als Team natürlich viel gestellt. Die Varianten-Vielfalt, die sich aus den verschiedenen Zusammenstellungen von Daten ergeben kann, ist schon faszinierend. Im Folgenden seht ihr einmal die Varianten, die wir für theoretisch möglich erachtet und visualisiert, als auch in der App-Entwicklung umgesetzt haben.

Unterteilt ist diese Darstellung in einer einfachen Matrix. Haushaltsbuch A, die Reihe ganz links, nutzt keine Investitionen. Haushaltsbuch B nutzt Investitionen, jedoch kein Sparziel. Haushaltsbuch C nutzt sowohl Investitionen als auch ein Sparziel.

Die Abstufung 1 bis 6 sind verschiedene Bilanzen. 1-3 sind Abstufungen von Einnahmen > Ausgaben. Da wir unterschiedliche Farben zur schnellen, eindeutigen Einordnung der finanziellen Situation nutzen möchten, ergeben sich hier bereits unterschiedliche Darstellungen. Zur Farb-Kodierung später mehr. Nummer 4 hat weder Einnahmen noch Ausnahmen gepflegt. Das kann also potenziell jeden Monatsanfang vorübergehend so aussehen, sollte man keine wiederkehrenden Buchungen nutzen oder gerade erst mit dem Pflege eines Haushaltsbuches beginnen. Nummer 5 hat mehr Ausgaben als Einnahmen und Nummer 6 hat mehr Investitionen als Einnahmen.

Profitiere von deinem Sparziel

Übrigens: Dieser weiße Trenner, der bei Haushaltsbuch C auftaucht, ist dein individuelles Sparziel. Es wird in der App bisher nicht explizit erklärt, doch wenn ihr ein Sparziel einstellt, verändert sich die Leiste so, dass das Sparziel stärker in den Fokus rückt. Was in dieser Iteration auch neu ist, ist dass sich die Zahl links und der Text entsprechend daran anpasst – bei A und B heißt es "Aktuelle Sparrate", also (Einnahmen - Ausgaben). In C wiederum "Über deinem Sparziel", bzw. "Unter deinem Sparziel". Auch die Summe selbst verändert sich entsprechend der Beschreibung. Das soll die im UI möglicherweise unverständlichen Elemente besser erklären.

Was die Farben bedeuten

Wie versprchen möchte ich auch Licht ins Dunkle bringen, was die Farb-Kodierung angeht. Für den Status deiner Finanzen haben wir uns für die klassische Ampel-Kodierung entschieden, dadurch sind sie selbstverständlich. Wann jedoch welcher Status angezeigt wird, ist nicht direkt sichtbar.

  • Grün: Deine Ausgaben sind maximal 66% deiner Einnahmen

  • Gelb: Deine Ausgaben liegen zwischen 66% - 85% deiner Einnahmen

  • Rot: Deine Ausgaben liegen über 85% deiner . Bei über 100% ist kein dunkle roter Balken mehr zu sehen, nur noch der halbtransparente im Hintergrund.

Wenn du ein Sparziel nutzt und die Trennlinie in deiner Budget Bar siehst, dann ist die Abstufung zwar ähnlich aber nicht identisch. Schauen wir uns auch das einmal genauer an:

  • Grün: Deine Einnahmen sind mindestens 15% höher als dein Sparziel

  • Gelb: Deine Einnahmen sind zwischen 15% - 0% höher als dein Sparziel

  • Rot: Du hast dein Sparziel unterschritten/nicht erreicht.

Die Haushaltsbuch-Variante C aus der Matrix beschreibt nun auch diese Beziehung besser, da wir wörtlich über "dein Sparziel" reden. Wir finden, dass das in diesem Fall die wichtigste Zahl ist und im Vordergrund stehen sollte.

In allen Varianten wird die Investition immer als die blaue Leiste und Zahl dargestellt. Sie hat einen allgegenwärtigen Platz bekommen, weil wir Investitionen als einen wichtigen Baustein von Monetaz ansehen. Selbst wenn ein Nutzer sie nicht nutzt, soll die Funktion nicht versteckt werden wie es das Sparziel einmal war. Jeder Nutzer soll sich bestärkt fühlen, diese Funktion zu nutzen; daher die prominente Platzierung.

Fazit

Alles in allem sind wir mit der neuen Iteration sehr zufrieden und hoffen, ihr seid es genauso, wenn das Update gegen Ende September kommt und sie endlich live sehen könnt! Lasst uns über Discord wissen, ob euch Erklärungen und Deep Dives in diese einzelne Komponenten interessiert und weiterhilft, die App und unsere Gedankengänge besser zu verstehen.

Illustration Mail
Dein Feedback hilft!

Du hast eigene coole Ideen oder Feature-Wünsche? Lass es uns wissen und wir werden unser bestes tun, um sie Wirklichkeit werden zu lassen!

Zur Discord Community