Banking-App-Design: Ein Redesign des Startbildschirms, Vorher und Nachher

Der Startbildschirm einer Banking-App muss eine Frage in unter einer Sekunde beantworten: Wie viel Geld habe ich? Der erste Entwurf unten ist eine hübsche Verlaufskarte, aber nach dem Kontostand ist die Kartennummer das Größte, die Aktionen kommen in sechs Farben und fast jede Transaktion ist rot. Das sieht aus wie eine Anzeige für eine Kreditkarte.

Die Korrektur behält das Marken-Lila und jede Funktion. Sie investiert die Farbe in die Zahl, auf die es ankommt, und beruhigt alles andere.

Der ganze Screen, vorher und nachher

Junior-Entwurf

Korrigiert

Links ist die Karte eine Karte: Kontostand, eine maskierte Nummer, ein Karteninhaber, ein Ablaufdatum und ein VISA-Logo, alles auf einem Verlauf. Darunter folgen sechs Aktionskreise in sechs Farben, dann eine flache Transaktionsliste, in der jede Ausgabe rot ist und jeder Händler seine eigene Logofarbe hat.

Rechts ist die Karte ein Kontostand. Sie zeigt den Kontonamen, die Zahl in Dollar, eine Zeile mit der Veränderung in diesem Monat und die letzten vier Ziffern in der Ecke. Alles darunter ist ruhiger, sodass der Kontostand die Stelle ist, auf die das Auge zuerst fällt.

Fix 1: Das Lila in den Kontostand investieren

Vorher

Nachher

„Total Balance“ mit Augen-Icon und $12,450.80 in einer Größe, eine Reihe Sternchen und 4821, Karteninhaber und Ablaufdatum sowie ein VISA-Logo auf einem knalligen Verlauf, gegenüber „Hauptkonto“ und 4821 in der Ecke, $12,450 mit kleinerem .80 und einer Pille „+$320.50 diesen Monat“ auf einem dunkleren Lila.

Der Entwurf nutzt den Markenverlauf auf einer Karte, die wie eine Karte aussieht, also lautet der erste Eindruck: „Das ist eine Kreditkarte.“ Der Kontostand ist der größte Text, aber Kartennummer, Inhabername, Ablaufdatum und VISA-Logo konkurrieren alle um denselben Bereich der Karte. Das meiste davon weiß man ohnehin oder braucht es nur beim Online-Bezahlen.

Die Korrektur behält dieselbe Lila-Blau-Familie und stellt sie hinter eine einzige Idee. Die Dollar sind 42 pt groß und die Cent 22 pt, weil $12,450 die Zahl ist, die man liest, und .80 das Detail. Eine Pille zeigt, was sich diesen Monat verändert hat, die zweite Frage, die Leute zu einem Kontostand stellen. Die Kartennummer schrumpft zu einer maskierten „4821“ in der Ecke, genug, um das Konto zu erkennen.

Regel zum Wiederverwenden: Wenn deine Markenfarbe laut ist, gib ihr einen einzigen Job.

Fix 2: Drei Aktionen statt sechs

Vorher

Nachher

Sechs runde Icons in Blau, Grün, Orange, Pink, Lila und Grau: Senden, Anfordern, Aufladen, Rechnungen zahlen, Umtauschen und Mehr, gegenüber drei breiten Buttons: ein gefülltes Senden, dann Anfordern und Aufladen in schlichtem Weiß.

Sechs Farben auf sechs Aktionen sagen: „Die sind alle gleich wichtig und völlig verschieden.“ Beides stimmt nicht. Die drei, die bleiben, braucht jedes Konto: Senden, Anfordern und Aufladen. Rechnungen zahlen, Umtauschen und Mehr sind von diesem Screen verschwunden, und der neue Tab Zahlungen gibt solchen Aktionen ein eigenes Zuhause.

Die Korrektur gibt den dreien außerdem eine Hierarchie. Senden ist in der Markenfarbe gefüllt, weil es die Aktion ist, für die Leute kommen. Anfordern und Aufladen sind schlicht, sie sind da, ohne zu schreien. Die Buttons sind breit und damit leicht zu treffen, und das Label steht neben dem Icon statt darunter.

Fix 3: Transaktionen nach Tag gruppieren, Farbe mit Bedeutung nutzen

Vorher

Nachher

Eine flache Liste mit fünf Transaktionen, jede mit farbigem Markenkreis, einem langen Zeitstempel wie „Oct 22, 2026 at 09:41 AM“ und Beträgen in Rot oder Grün, gegenüber zwei Gruppen, Heute und Gestern, jede in einer weißen Karte mit lila Buchstabenkacheln, einer Kategorie unter jedem Namen, schwarzen Beträgen und einem grünen +$2,500.00.

Rot heißt Stopp. Eine Banking-App, die jede Ausgabe rot färbt, macht normales Leben, eine Streaming-Rechnung, eine Fahrt, einen Kaffee, zu einer Reihe kleiner Alarme. Die Korrektur lässt ausgehendes Geld in schlichtem Text und nutzt Grün für das eine, was eine gute Nachricht ist: eingehendes Geld.

Auch die Zeitstempel haben sich geändert. Ein volles Datum mit Uhrzeit in jeder Zeile ist meist wiederholte Information. Die Gruppierung unter „Heute“ und „Gestern“ nennt das Datum einmal, und die zweite Zeile jeder Reihe sagt, wofür die Zahlung war: „Abo“, „Transport“, „Gehalt“. Das ist die Frage, die Leute tatsächlich stellen, wenn sie eine Liste überfliegen.

Auch die Händler haben ihre Markenfarben verloren. Ein rotes N, ein schwarzes U, ein grünes S und ein oranges A wirken lebendig, machen die Liste aber zum Regenbogen ohne Aussage. Eine getönte Kachel mit einem Buchstaben hält die Zeilen ruhig, sodass Beträge und Namen das sind, was man liest.

Fix 4: Vier Tabs, kein schwebendes Plus

Vorher

Nachher

Home, Karten, ein großer schwebender Plus-Button, Statistik und Profil, gegenüber Home, Karten, Zahlungen und Profil mit dem aktiven Tab in Lila.

Der schwebende Plus-Button fragt: „Was hinzufügen?“ In einer Banking-App könnte er Senden, Anfordern, Karte hinzufügen oder Aufladen bedeuten, und man muss ihn öffnen, um es herauszufinden. Außerdem sitzt er über dem Inhalt und teilt die Tab-Leiste in zwei Hälften.

Die Korrektur ersetzt ihn durch einen Tab namens Zahlungen, der sagt, was dahinter steckt. Statistik verlässt die Tab-Leiste, und die Kontokarte trägt jetzt die eine Zahl daraus, die Leute täglich sehen: die Veränderung dieses Monats.

Die kleineren Fixes

• Ein Header mit einem Icon. Der Entwurf hat einen QR-Code, eine Glocke und ein Einstellungs-Icon neben der Begrüßung. Die Korrektur behält nur die Glocke.
• Ein echter Initialen-Avatar. Der lila Kreis mit „AM“ ist volles Marken-Lila, damit er sich vom Untergrund abhebt.
• Ein Rand und eine Abstandsskala. Zeilen sitzen auf einem Rand von 20 Punkt, mit Abständen aus einer kurzen Liste.
• Eine ruhigere Begrüßung. „Good Morning, Alex Moreno!“ mit großem M und Ausrufezeichen wurde zu „Good morning“ und einem Namen.
• Karten, die gruppieren. Die Transaktionen jedes Tages sitzen in einem weißen Container, mit dünner Trennlinie zwischen den Zeilen und keiner zwischen den Gruppen.

Prüfe deine eigene Banking-App

Hol dir die Figma-Datei

Die kostenlose Datei enthält beide Screens, jedes korrigierte Element als Vorher-Nachher-Komponente, die UI-Farbvariablen, die iOS-Textstile und eine Read-me mit den Credits.

Kostenlose Figma-Datei

Banking-Startscreen, vorher und nachher

Beide Screens und jedes korrigierte Element als Figma-Komponenten. Kostenlos, nur Ansicht, dupliziere sie in deine Entwürfe.

In Figma öffnen

FAQ

Was sollte der Startbildschirm einer Banking-App zuerst zeigen?

Den Kontostand, groß, mit einer kurzen Zeile dazu, wie er sich diesen Monat verändert hat. Danach kommen die Schnellaktionen, dann die letzten Transaktionen.

Wie viele Schnellaktionen sollte eine Banking-App haben?

Drei funktionieren gut: Senden, Anfordern und Aufladen. Mach die häufigste gefüllt und die anderen schlicht, und verlege seltenere Aktionen in einen Tab Zahlungen.

Sollten Ausgaben in einer Banking-App rot sein?

Nein. Rot wirkt wie eine Warnung, und normale Ausgaben sind keine. Lass ausgehende Beträge in schlichtem Text und nutze Grün nur für eingehendes Geld.

Wie sollte eine Kartennummer auf dem Startbildschirm einer Banking-App erscheinen?

Maskiert und klein, nur mit den letzten vier Ziffern, damit Leute erkennen, welches Konto sie vor sich haben. Die vollständigen Details gehören auf den Karten-Screen.

Sollte eine Banking-App einen schwebenden Plus-Button haben?

Meistens nicht. Ein Plus sagt nicht, was es hinzufügt, also ersetze es durch einen beschrifteten Tab wie Zahlungen.

Quellen

• Beide Screens sind unsere eigenen, in Figma gestaltet und vermessen. Die Händlernamen sind generische Beispiele.
• Zuerst als Karussell auf App Brainy veröffentlicht.