Das Empty State Problem bei Multibanking Apps


In der Multibanking-Studie von eresult wurden fünf UX-Probleme festgestellt, die in einem Großteil der größeren Multibanking-Apps auftauchen. Eins davon ist das Empty State Problem, auf dass ich hier genauer eingehen möchte.
In Zusammenhang mit Multibanking heißt „Empty State“ nicht, dass das Konto leer ist, sondern es geht in diesem Fall um die User Experience. Apps, die Daten der Nutzer anzeigen und/oder auswerten machen eben nur dann Sinn, wenn diese auch Daten haben auf die sie zugreifen können. Damit Multibanking Apps Sinn stiften, muss der Nutzer ein oder mehrere Bankkonten hinterlegt haben. Der Empty State ist der Zustand der App, bevor das erste Bankkonto eingerichtet wurde. Häufig sieht das dann so aus, wie hier bei der Starmoney App:
Ein Promlem der Multibanking Apps: Empty States

Empty State der Starmoney App


Was ist hier das Problem? Die Nutzer öffnen das erste mal die App und landen dann auf einer Seite, die…

      1. …ihnen nicht sagt was sie als nächstes tun sollen oder können
      2. …kahl, unmotivierend und leer aussieht
      3. …mit „kein Konto eingerichtet“ direkt zu Beginn der Nutzung schon eine negative Aussage macht, die auch noch so klingt, als hätte der Nutzer einen Fehler gemacht

Nutzer sind nicht immer so zielstrebig, wie das App-Konzept es ihnen unterstellt

Am liebsten stellt man sich seine Multibanking-Nutzer so vor:

Fröhliche Online-Banker

Solche Nutzer gibt es nicht!
Copyright: fotolia.de / Antonioguillem

Schon klar, alle Nutzer haben seit Jahren auf diese eine Multibanking-App gewartet, wissen schon vor der Nutzung ganz genau was sie tun möchten und zücken also lachend Ihre EC- und Kreditkarten, um direkt loszulegen.
Meine Variante der Nutzer, an die Entwickler von Multibanking-Apps denken sollten, ist ein wenig anders. Folgende (realistischere) Ausgangslagen helfen etwas mehr:

  • Viele werden die Informationen zur App auf der Webseite oder im Appstore/Playstore nicht gelesen oder nur grob überflogen haben.
  • Die Nutzer haben möglicherweise nur eine sehr vage oder eine nicht korrekte Vorstellung davon, was die App überhaupt kann.
  • Im Multibanking-Bereich gibt es viele (!) Konkurrenten. Potentielle Nutzer probieren häufig erstmal mehrere Apps parallel aus. Sie werden nicht überall sofort ihre Bankdaten eingeben, sondern sich auf ihr Gefühl und ihren ersten Eindruck verlassen.
  • Wenn potentiellen Nutzern während der ersten Nutzung etwas komisch vorkommt oder unklar ist, wird die App häufig schneller deinstalliert als einem lieb ist oder eine andere App wird erstmal ausprobiert.

Was folgt daraus für das Thema „Empty Screens“? Den Erstnutzern ist oftmals noch nicht klar was eine Multibanking-App alles kann und sie müssen auf einen leeren Bildschirm starren, der ihnen keinerlei Hinweise gibt, was sie tun können. In Usabilitytests sind die Reaktionen auf ungünstig gestaltete Empty States meist sehr eindeutig und einprägsam: „Und jetzt? Passiert jetzt was? Kann ich was machen?“. Nicht vergessen: Es geht hier um äußerst sensible Daten. Bankdaten! Es sollte an jedem Detail der Gestaltung gearbeitet werden, um das Vertrauen der Nutzer zu bekommen. Und dazu gehört ganz klar Orientierung zu bieten.

Drei Vorschläge für die Gestaltung von Empty States

1. Sackgassen verhindern: Zeigen Sie den nächsten Schritt

Die Funktion „Konto hinzufügen“ mag im alltäglichen Gebrauch der App nicht so wichtig sein, weil man nicht jeden Tag neue Bankkonten hinzufügt. Dementsprechend ist diese Funktion meist weniger prominent platziert, was auch absolut in Ordnung so ist, sofern denn mindestens schon ein Bankkonto hinterlegt ist. Anders sieht es im Empty State aus. Hier gibt es mehrere Ansätze den Nutzern unmissverständlich klar zu machen, was der nächste Schritt ist, den sie ausführen müssen:

      1. Durch einen Pfeil, Animation, Rahmen oder andere gestalterische Mittel besonders auf den „Konto hinzufügen“ Button aufmerksam machen.
      2. Einen gesonderten, besonders hervorgehobenen „Konto hinzufügen“ Button gestalten. Dieser ist nur so vorzufinden, wenn noch kein Konto hinterlegt ist und steht hierarchisch an erster Stelle, damit er quasi nicht übersehen werden kann.
      3. Den Empty State gar nicht erst zulassen, indem direkt zu Beginn obligatorisch der Prozess zum Hinterlegen eines Bankkontos durchlaufen werden muss. Die eigentliche App bzw. deren Hauptnavigation wird damit erst zugänglich, wenn ein Konto erfolgreich eingerichtet wurde.


Die Sparkasse Plus App (links) und Outbank (rechts) zeigen den nächsten Schritt im Empty State

2. Kurze Texte verwenden

Geben Sie eine kurze, knappe Anleitung, in der Sie dem Nutzer erklären warum die App in dem aktuellen Zustand ist und was er tun kann, um diesen Zustand zu seinem Vorteil zu verändern. Ein paar Vorschläge zur Formulierung:

  • Formulieren Sie positiv. Der Zustand muss nicht als Problem formuliert werden. Statt „Kein Konto vorhanden“ lässt sich z. B. auch sagen „Fügen Sie ein Bankkonto hinzu“. Es geht hier schließlich nicht um eine Fehlermeldung.
  • Kurz und knapp! Eine Überschrift mit 1-3 Worten und/oder ein einzelner kurzer Satz mit einer klaren Handlungsaufforderung reichen aus.
  • Auf die Vorteile für den Nutzer fokussieren. Die technischen Hintergründe, warum auf dem Screen gerade nichts angezeigt wird sind an dieser Stelle nicht das Wichtige. Formulieren Sie nicht, als würden Sie eine Fehlermeldung schreiben, sondern eine Handlungsaufforderung für den Nutzer.

Ein gutes Empty State-Beispiel

Beispiel für einen gelungenen Empty State Screen mit kurzem Text
Quelle: http://emptystat.es/image/154030263345

3. Bilder einsetzen: Machen Sie den Nutzen der App nochmals klar

Ich betone nochmals: Die Nutzer haben zum jetzigen Zeitpunkt nicht zwangsläufig eine klare Vorstellung davon, was Ihre App an Vorteilen bietet. Ein leerer Screen als einer der ersten Erlebnisse in Zusammenhang mit der App verbessert die Lage nicht. Ein Bild sagt aber ja bekanntlich mehr als tausend Worte. Machen Sie den Nutzern also klar, was sie bekommen, wenn sie ihre Daten eingeben. Das kann durch angedeutete Beispiel-Kontoverläufe, Beispiel-Diagramme oder einfach nur skizzenhafte Visualisierungen umgesetzt werden. In jedem Fall muss aber rüberkommen, dass die Nutzer auf diesem Screen zukünftig etwas für sie hilfreiches sehen werden, wenn sie denn ihre Kontodaten hinterlegen.


Beispiele für den sinnvollen Einsatz von Bildern auf Empty State Screens
Quellen: http://emptystat.es/image/146255226652 und http://emptystat.es/image/150771325032

Fazit

Vom Empty State im Multibanking spricht man dann, wenn die Nutzer noch kein Bankkonto hinterlegt haben und somit noch auf keine Daten zugreifen können. So kurz die App auch in diesem Zustand sein mag, können Nutzer im schlechten Fall hier schon viele Fragen haben und verunsichert sein. Nicht gerade ein guter Start! Also ist es sehr wichtig hier durch eine klare Handlungsaufforderung und eine gelungene Bild + Text-Kombination deutlich zu machen, was zu tun ist und was man dafür bekommt.
Weitere häufige UX Probleme von Multibanking-Apps sowie eine ausführliche UX Analyse von sechs Multibanking-Apps (u. a. Deutsche Bank, Sparkasse und Outbank) finden Sie kostenlos in der Multibanking Studie von eresult.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.