Im Kurs von Frank Rausch: “Gute Formulare gestalten” haben wir uns kritisch mit Formularen aller Art auseinandergesetzt – vom Papiervordruck bis zur interaktiven Dateneingabe.

Wir haben uns damit befasst, was ein gutes Formular ausmacht. Wie wir Formulare so gestalten, dass sie verständlich strukturiert, selbsterklärend und eindeutig sind. Wie können wir Frustration bei der Erfassung strukturierter Daten vermeiden?

Lernziel des Kurses war es, sowohl den Sinn von Formularen für den jeweiligen Einsatzzweck zu hinterfragen als auch die bestmögliche Lösung gestalten und umsetzen zu können.

Deutsche Kreditbank

Die vierwöchige Hauptaufgabe bestand darin ein Redesign eines bestehenden Formulars zu gestalten. Man sollte relativ nah an der Vorlage bleiben, sodass eine Evolution zu erkennen ist. Meine Wahl fiel dabei auf die DKB — Deutsche Kreditbank AG.

Ich bin bereits langjähriger Kunde der Bank. Sie hat sehr gute Konditionen und ist für Kunden, die sie aktiv nutzen völlig kostenlos. Zudem kann man mit der Kreditkarte überall in Deutschland und auf der ganzen Welt kostenlos Bargeld abheben.

Die DKB ist eine reine online Bank und hat keine Filialen. Das sieht man ihr aber leider nicht an. Das User Interface ist sehr veraltet, teilweise unlogisch und unübersichtlich aufgebaut. Es gibt neben der responsiven Webseite eine Android und eine iOS App, die aber leider nur eine Webview der normalen Seite sind. Hier wird das Potential von nativen Apps nicht ausgenutzt. Deswegen habe ich mich bei dem Redesign auf die momentane iOS App konzentriert und versucht sie dahingehend zu verbessern.

Usecases

Da ich in der Zeit nicht alles neu gestallten konnte, habe ich mir vier Usecases ausgesucht, bei denen es Sinn machte die Formulare bzw. Input Felder neu zu gestalten.

• Login
• Bankkonto eröffnen
• Persönlicher Bereich
• Überweisung

Login

Eines der essentiellen Input Funktion einer Banking App ist der Login Prozess. Da die meisten die, die App installieren bereits Kunden sind, wäre der Login zum persönlichen Bereich um den Finanzstatus zu checken die zentrale Funktion der App. Sie müssten nicht mehr davon überzeugt werden Kunde zu werden oder sich von Neuigkeiten der Bank ablenken zu lassen.

Neben der Überarbeitung der Input Felder wäre das Nutzen von Apples Touch ID / Face ID nach dem ersten Login eine weitere Funktion die das einloggen vereinfachen würde. Falls diese fehlschlagen sollte oder vom Nutzer nicht erwünscht ist, wäre es gegebenenfalls möglich fortan eine sechsstellige Pin zu verwenden.

Bankkonto eröffnen

Neben dem Login habe ich auch den Prozess zum eröffnen eines Bankkontos überarbeitet. Die DKB bietet dazu eine Übersichtsseite, die alle Vorteile ihres Kontos auflistet. Leider doppeln sich dort Angaben und die ganze Seite wirkt durch die Vielzahl von Informationen unübersichtlich. Deswegen habe ich unnötig wirkende Informationen weggelassen und die restlichen Informationen gekürzt.

Sollte einem diese Punkte überzeugen folgt nach der Übersichtsseite eine Formularseite, die den Nutzern alle notwendigen Angaben auf einer Seite abfragt. Die Hemmschwelle für den Nutzer ist sehr hoch, weil eine Vielzahl von Informationen auf einmal abgefragt werden. Es gibt keine Möglichkeiten zwischenzuspeichern. Die Seite beansprucht die kognitiven Fähigkeiten des Nutzers sehr, sodass die Dropout Rate wahrscheinlich relativ hoch ist. Es ist besser diesen Prozess in mehrere kleinere übersichtlicher Schritte zu unterteilen, die den Nutzer nicht abschrecken und die leichter zu vervollständigen sind.

Mit einer Progress Bar nutzte ich den Zeigarnik Effect, der besagt, dass unvollendete Aufgaben eher vervollständigt werden.

Eine Methode um den Prozess zu vereinfachen ist progressive disclosure.

Progressive disclosure ist eine Interaction Design-Technik zur Sequenzierung von Informationen und Aktionen über mehrere Schritte bzw. Screens um Komplexität zu reduzieren und Überforderung zu vermeiden. Durch die zunehmende Offenlegung von Informationen werden zunächst die grundlegenden und dann die weiterführenden Funktionen dargeboten.

Die Darbietung der Informationen und damit die Sequenzierung von Interaktionen erfolgt vom „Abstrakten“ zum „Spezifischen“. Es ermöglicht ein „Ramping up“ des Nutzers von einfachen zu komplexeren Interaktionen. Selten genutzte Optionen, Informationen und Funktionen werden in einem 2. Schritt/auf einem 2. Screen zugänglich gemacht.

Nach der Formularseite folgte eine Bleiwüste in der die verpflichtenden Allgemeine Geschäftsbedingungen, die Datenschutzbestimmungen, die Bonitätsauskunft sowie die freiwilligen Einwilligung für Werbemaßnahmen und Datenauswertung heruntergeschrieben und mit Check-boxen versehen worden. Da es ein sehr langer Fließtext war, habe ich auch hier die Information auf zwei Seiten aufgeteilt. Ich habe sie in verpflichtende und freiwillige Angaben unterteilt. Auf der Übersichtsseite sind die Einwilligungen kurz und verständlich zusammen gefasst. Die ganzen Rechtstexte lassen sich per Klick erreichen. Dort sind sie einzeln als gut leserliche Fließtexte dargestellt.

Anschließend folgt eine Übersichtsseite, bei der alle eingegeben Information nochmal zur Kontrolle aufgelistet sind. Das Problem beim Original ist, dass man einzelne Informationen nicht schnell bearbeiten kann. Beim Redesign ist dies ohne Problem durch einen Klick möglich.

Zuallerletzt bekommt man beim ursprünglichen Prozess die Vertragsinformationen angezeigt und man bestätigt, dass man das Konto eröffnen will. Diesen Schritt habe ich mit dem davongehenden kombiniert und man eröffnet das Konto bereits nach der Übersichtsseite. Danach bekommt man bei der Neugestaltung eine Bestätigungsseite, wo dem Nutzer eine Rückmeldung gegeben wird, dass alles erfolgreich verlaufen ist und ihm die Möglichkeit gegeben wird die Vertragsunterlagen herunterzuladen.

Persönlicher Bereich

Um den Übergang zur Überweisung zu schaffen, musste ich auch den persönlichen Bereich neu gestalten. Beim Original ist meiner Meinung nach die Hierarchie falsch gelegt. Das Wort “Finanzstatus” nimmt hier die übergeordnete Rolle ein, wobei ja eigentlich der tatsächliche Saldo im Vordergrund stehen sollte. Man muss zunächst ein Girokonto oder eine Kreditkarte auswählen und dann noch auf “Umsätze” klicken damit man die letzten Transaktionen einsehen kann. Der Filter auf der Seite behindert zusätzliche die Informationsaufnahme, weil fast den ganzen oberen Bereich des Screens einnimmt. Die Filter sollte eher als eine Zusatzfunktion gesehen werden, das man verwendet wenn man es braucht. Deswegen habe ich den ganzen Filterprozess hinter einem Icon versteckt, dass dann die Funktionen einblenden lässt. So ist bereits auf den ersten blick auf der Seite klar, was der aktuelle Kontostand ist und was die letzten Transaktionen waren. Um eine Überweisung durchzuführen, eine der meistbenutzten Funktion ist nun nur noch ein Klick notwendig anstatt wie vorher zwei.

Überweisung

Wie auch beim Anmeldeformular habe ich hier den Zeigarnik Effect benutzte, um den Fortschritt anzuzeigen und habe das Prinzip des progressive disclosure verwendet um Kontextbezogen Information ein– bzw. auszublenden um die Komplexität zu reduzieren und den Fokus zu lenken. Im letzten Schritt sieht man wieder alle eingegeben Information aufgelistet und kann diese gegebenenfalls schnell ändern. Der ganze Prozess endet wieder auf der Hauptseite. Man bekommt eine Bestätigungsnachricht eingeblendet, wenn die Überweisung erfolgreich war. Zudem ist es dann bei den letzten Umsätzen sichtbar.

Redesign Screens