Expense-Tracker-App-Design: Redesign eines Budget-Dashboards, Vorher und Nachher
Ein Budget-Dashboard mit Tortendiagramm aus acht Stücken und einer Tabelle mit neun Punkten, und derselbe Screen repariert: erst eine Zahl, ein flacher Balken, schlichte Zeilen und der Monat als Titel. Jede Änderung im direkten Vergleich, mit der kostenlosen Figma-Datei.
Leute öffnen eine Budget-App, um eine einzige Sache zu erfahren: Wie viel darf ich noch ausgeben? Der erste Entwurf unten meldet alles. Die Zahl steckt mit 10 px in der letzten von vier gleich großen Boxen, die Ausgaben sind eine Torte mit acht Stücken und einer 8-px-Legende, und die Transaktionen sind eine fünfspaltige Tabelle mit 9 px.
Die Korrektur behält jede Funktion und ändert nur die Reihenfolge. Die Zahl kommt zuerst und ist riesig, die Torte wird zu einem flachen Balken, und aus der Tabelle werden vier schlichte Zeilen, die man tatsächlich lesen kann.
Der ganze Screen, vorher und nachher
Junior-Entwurf
Repariert
Links führt nichts. Vier Boxen, eine Torte, ein Balkendiagramm, eine Filterzeile und eine Tabelle haben fast dasselbe Gewicht, und die Antwort auf die einzige Frage ist eine 10-px-Zahl in der vierten Box. Das Auge muss den ganzen Screen abscannen, um sie zu finden.
Rechts antwortet der Screen der Reihe nach: Wie viel ist übrig, wohin ging der Rest, was ist zuletzt passiert. Eine Zahl ist groß, alles andere ist schlichter Text, und jedes Element hat genau eine Farbaufgabe.
Was sich geändert hat, gemessen
| Junior-Entwurf | Repariert | |
|---|---|---|
| Untergrund | Vier umrandete Boxen, ein grauer Tabellenkopf | Schlichtes Weiß, keine Karte, keine Kachel, kein Schatten |
| Ränder | 14 links, 12 rechts | 20 auf beiden Seiten |
| Hauptzahl | 1.284 $ in der vierten Box mit 10 px | 1.284 $ mit 48 fett, als Erstes auf dem Screen |
| Ausgaben | Eine 160-px-Torte, acht Stücke, 8-px-Legende | Ein flacher gestapelter Balken, 10 px hoch, Legende in zwei mal zwei |
| Budgets | Nicht gezeigt | Schlichte Zeilen, ein 4-px-Balken darunter |
| Transaktionen | Fünf Spalten mit 9 px | Vier Zeilen mit 15 und 13 px, 36-px-Buchstabenkreise |
| Titel | Dropdown neben Menü, Export und Glocke | Der Monat mit 28 fett, kleines Wortzeichen darüber |
| Tabs | Fünf, gemischt gefüllte und Outline-Icons, schwebendes Plus | Vier, flache 78-px-Leiste mit Haarlinie |
Fix 1: Den Restbetrag an die erste Stelle setzen
Vorher
Nachher
Vier gleich große kleine Boxen in einer Reihe: Einnahmen 4.200 $ in Grün, Ausgaben 1.916 $ in Rot, Sparen 1.000 $ in Blau und Saldo 1.284 $ in Schwarz, alle mit 10 px, gegenüber 1.284 $ in riesiger Fettschrift mit Rest von 3.200 $ und noch 12 Tagen in Grau darunter.
Die vier Boxen geben jeder Zahl dieselbe Größe, also ist keine davon die Antwort. Die Nutzerin muss wissen, dass der Saldo zählt, und ihn dann mit 10 px lesen.
Die Korrektur wählt eine aus. 1.284 $ stehen mit 48 px fett da, und die Zeile darunter trägt die zwei Fakten, die sie erst bedeutsam machen: das Budget, aus dem sie stammt, 3.200 $, und die Tage, die im Monat noch bleiben. Eine Zahl ohne ihr Budget ist Trivia. Mit Budget weiß man, ob man sich Sorgen machen muss.
Die Zahlen gehen auf, nichts wurde erfunden, damit es passt. Einnahmen von 4.200 $ minus 1.000 $ Sparen ergeben das Budget von 3.200 $, und 1.916 $ Ausgaben lassen 1.284 $ übrig. Einnahmen und Sparen sind in den Tab Statistik gewandert.
Regel zum Wiederverwenden: Finde die eine Zahl, für die der Screen geöffnet wird, mach sie zum größten Element darauf und schreib den Kontext in eine Zeile darunter.
Fix 2: Ein flacher Balken statt einer Torte
Vorher
Nachher
Ein großes Tortendiagramm mit acht farbigen Stücken, beschriftet mit Miete, Essen, Freizeit, Transport, Shopping, Gesundheit, Rechnungen und Abos, mit winziger Legende und Prozentwerten, gegenüber einem dünnen gestapelten Balken in Indigo, Koralle, Bernstein und Petrol mit hellem Ende, einer Legende in zwei mal zwei aus Miete 1.100 $, Essen 412 $, Freizeit 186 $ und Sonstiges 218 $ sowie drei Budgetzeilen mit dünnen Balken darunter.
Eine Torte ist schon im besten Fall schwer zu lesen, weil Menschen Winkel schlecht vergleichen. Acht Stücke machen es schlimmer. Fünf der Stücke sind nur ein paar Prozent groß, also Splitter, und die Legende, die sie benennt, hat 8 px.
Der Balken wird von links nach rechts gelesen wie ein Fortschrittsbalken, den jeder schon versteht. Er ist maßstabsgetreu gegen das Budget von 3.200 $ gezeichnet, das helle Ende sind also die 1.284 $, die noch übrig sind, und der Screen zeigt dieselbe Zahl zweimal in zwei Formen. Die fünf kleinen Kategorien werden zu Sonstiges, 218 $, zusammengefasst und öffnen sich in Budgets. Die Stücke gehen auf: 1.100 + 412 + 186 + 84 + 62 + 30 + 22 + 20 sind 1.916 $.
Budgets stehen direkt darunter als schlichte Zeilen: ein Name, „412 $ von 600 $“ und ein 4-px-Balken. Ein Balken füllt sich auf ein Limit zu und zeigt so, wie nah man ihm ist. Eine Torte kann das nicht.
Regel zum Wiederverwenden: Nimm einen Balken, wenn die Teile ein Ganzes ergeben, und fasse die kleinen Teile zu Sonstiges zusammen.
Fix 3: Vier Zeilen statt einer Tabelle
Vorher
Nachher
Eine Überschrift Transaktionen mit den Filter-Buttons Alle, Einnahmen und Ausgaben über einer fünfspaltigen Tabelle mit Datum, Händler, Kategorie, Zahlungsart und Betrag, zehn Zeilen in 9-px-Text und ein schwebender korallfarbener Plus-Button, der die letzten Beträge verdeckt, gegenüber einer Überschrift Zuletzt mit Alle ansehen in Koralle und vier Zeilen: ein petrolfarbenes M für Marlow Market, ein violettes R für Reel House, ein bernsteinfarbenes A für Alder Studio mit Einnahme in Grün und ein grünes C für Cityline Transit.
Eine fünfspaltige Tabelle mit 9 px ist eine Tabellenkalkulation. Auf dem Handy verlangt sie Zusammenkneifen der Augen und horizontales Lesen quer über eine Zeile, und der schwebende Plus-Button sitzt auf der Betragsspalte, sodass die letzten Zahlen verdeckt sind.
Vier Zeilen reichen für einen Startscreen. Ein 36-px-Kreis mit dem Buchstaben des Händlers gibt dem Auge einen Halt, der Händler hat 15, die Kategorie 13 und ist grau, und der Betrag steht rechts. Einnahmen sind das einzige Grün in der Liste, also fällt das Gehalt ohne Beschriftung auf. Datum, Zahlungsart und Filter öffnen sich über Alle ansehen und über jede Zeile, nichts geht verloren.
Regel zum Wiederverwenden: Ein Startscreen zeigt die letzten paar Einträge, nicht den ganzen Verlauf. Leg die Filter hinter Alle ansehen.
Fix 4: Den Monat zum Titel machen
Vorher
Nachher
Eine Kopfzeile mit Menüsymbol, dem korallfarbenen Wort Penny, dem Wort Dashboard, einem Dropdown November 2026, einem Export-Symbol und einer Glocke mit rotem Punkt, gegenüber einem kleinen korallfarbenen Penny-Wortzeichen über November in 28 pt fett mit Chevron, einer Glocke mit rotem Punkt und einem korallfarbenen Plus.
Die Kopfzeile des Entwurfs enthält sechs Dinge in einer Größe: Menü, Wortzeichen, ein „Dashboard“-Label, das nichts aussagt, ein Dropdown, Export und eine Glocke. Das Dropdown ist das Bedienelement, das Leute wirklich benutzen, und es ist das kleinste.
Die Korrektur gibt dem Screen einen Titel, und der Titel ist das Bedienelement. „November“ steht mit 28 fett und Chevron da, das Wortzeichen ist klein in einer eigenen Zeile, und das Plus ist von einem schwebenden Button in die Kopfzeile neben die Glocke gewandert. Menü und Dashboard-Label sind in den Tab Profil gezogen, der Export in Statistik.
Regel zum Wiederverwenden: Wenn das Hauptbedienelement ein Filter ist, mach es zum Titel.
Die kleineren Korrekturen
- Jede Funktion bleibt. Das Wochendiagramm, Einnahmen und Sparen ziehen in Statistik um. Die fünf kleinen Kategorien werden zu Sonstiges zusammengefasst und öffnen sich in Budgets zusammen mit Zielen. Filter, Datum und Zahlungsart öffnen sich über Alle ansehen und über jede Zeile.
- Gleichmäßige Ränder. Der Entwurf hat 14 px links und 12 px rechts. Die Korrektur nimmt 20 auf beiden Seiten.
- Keine Boxen. Die Korrektur hat keine Karte, keine Kachel und keinen Schatten. Abstand und Typografie trennen die Dinge.
- Weniger Tabs. Vier Tabs in einer flachen 78-px-Leiste mit Haarlinie statt fünf mit gemischten gefüllten und Outline-Icons.
- Schriftskala. Der Text läuft von 13 bis 48 px, gegenüber 8 bis 13 px im Entwurf.
- Platz unter dem Inhalt. Die Korrektur endet 67 px über der Tab-Leiste, nichts wird abgeschnitten oder verdeckt. Im Entwurf liegt ein schwebendes Plus über der Tabelle.
Prüfe deinen eigenen Budget-Screen
| Frage | Warum es wichtig ist |
|---|---|
| Ist die Zahl, für die man die App öffnet, das größte Element auf dem Screen? | Jeder sollte sie auf einen Blick finden |
| Sagt der Screen, wovon die Zahl ein Teil ist? | Eine Zahl ohne Budget ist Trivia |
| Ergeben die Teile eines Diagramms ein Ganzes, das du als einen Balken zeigen kannst? | Ein Balken wird schneller gelesen als Winkel |
| Kannst du jede Zeile auf Armlänge lesen? | 9 px ist eine Tabellenkalkulation |
| Ist das Hauptbedienelement der Titel? | Das meistgenutzte Bedienelement sollte nicht das kleinste sein |
| Verdeckt ein schwebender Button Inhalt? | Er versteckt die Zahlen, auf denen er sitzt |
Hol dir die Figma-Datei
Die kostenlose Datei enthält den Junior-Entwurf, den reparierten Screen und jedes Teil als Komponente.
Kostenlose Figma-Datei
Redesign eines Expense-Tracker-Screens, vorher und nachher
Beide Screens und jedes Teil als Figma-Komponente. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.
FAQ
Wie sollte der Startscreen eines Expense Trackers gestaltet sein?
Beginne mit dem, was noch auszugeben ist, groß, mit Budget und verbleibenden Tagen in einer Zeile darunter. Dann ein flacher Balken dafür, wohin das Geld ging, ein paar schlichte Budgetzeilen und die vier letzten Transaktionen, der Rest hinter Alle ansehen.
Ist für Ausgabenkategorien ein Tortendiagramm oder ein Balken besser?
Ein flacher gestapelter Balken, wenn die Teile ein Ganzes ergeben. Menschen lesen Länge schneller als Winkel, und kleine Kategorien bleiben als Balkensegment sichtbar statt als Splitter. Fasse die kleinsten zu Sonstiges zusammen.
Wie viele Kategorien sollte ein Budgetdiagramm zeigen?
Drei oder vier. In diesem Screen werden fünf kleine Kategorien zu Sonstiges, 218 $, zusammengefasst und öffnen sich in Budgets, damit der Balken lesbar bleibt.
Wie groß sollte die Hauptzahl in einer Finanz-App sein?
Groß genug, um das Erste zu sein, was man sieht. Hier hat der Saldo 48 px fett, gegenüber 28 px für den Monatstitel und 15 px für die Zeilen.
Wie viele Transaktionen sollte ein Startscreen zeigen?
Vier bis fünf Zeilen mit 13 bis 15 px, mit einem Link Alle ansehen für die volle Liste, Filter und Zahlungsart.
Was sollte die Tab-Leiste einer Budget-App enthalten?
Vier Tabs reichen: Start, Statistik, Budgets und Profil. Ziele leben innerhalb von Budgets.
Quellen
- Beide Screens sind unsere eigenen, in Figma entworfen und vermessen. Die App Penny, ihre Händler und ihre Beträge sind erfunden. Die Zahlen sind auf beiden Screens stimmig: Einnahmen von 4.200 $ minus 1.000 $ Sparen ergeben das Budget von 3.200 $, 1.916 $ Ausgaben lassen 1.284 $ übrig, und noch 12 Tage bedeuten den 18. November, das Datum der neuesten Transaktion.
- Untersuchtes Muster: Copilot Money und Monarch, mit einer Zahl für den Restbetrag, einem Balken für die Kategorien, schlichten Zeilen und einer flachen Tab-Leiste.
- Die Icons stammen von Phosphor (MIT). Es werden keine Fotos verwendet.
- Zuerst als Karussell auf App Brainy veröffentlicht.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
