Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Redesign – DKB

Bis zu 90 % eines Interfaces besteht aus typografischen Elementen. Wie gut oder schlecht diese jedoch umgesetzt werden können, soll das Beispiel der DKB App für iOS zeigen.

Der Ist-Zustand

Redesign DKB Kopie 2.001.jpegRedesign DKB Kopie 2.001.jpeg

Vier Bildschirmfotos reichen bereits aus, um den aktuellen Stand der DKB App für iOS darzustellen. Prinzipiell handelt es sich um Web Container, die lediglich in eine native App eingebunden wurden. Demnach wird ein Hamburger Menü für sämtliche Funktionen als Hauptnavigation verwendet. Ebenso wird das gesamte Regelwerk der Human Interface Guidelines missachtet, weswegen nur wenige Funktionen nutzerfreundlich und eindeutig verständlich sind. 

Hauptfeatures, wie beispielsweise Überweisungen tätigen, Geld abheben oder Kontostände einsehen, sind häufig in Substrukturen der App versteckt.

Somit stellt die mobile App der Deutschen Kreditbank ein hervorragendes Beispiel dar, um neue Lösungsansätze zu finden und das Interface zu überarbeiten.

Die Herangehensweise

Redesign DKB Kopie 2.002.jpegRedesign DKB Kopie 2.002.jpeg

Während der Umgestaltung der DKB App waren drei Schwerpunkte insbesondere von hoher Bedeutung:

  1. Aufräumen – Auf welche Elemente kann verzichtet werden?
  2. Fokus – Welche Funktionen sind dem Nutzer am wichtigsten?
  3. Struktur – Wie kann das Interface klar strukturiert werden?

Für das Redesign selbst wurde Sketch verwendet, wobei Apple's eigene Komponenten-Bibliothek für iOS als Ausgang diente. Zusätzlich wurden SF Symbols für ikonographische Darstellungen eingesetzt.

Das Ergebnis

Redesign DKB Kopie 2.003.jpegRedesign DKB Kopie 2.003.jpeg

Finanzstatus

Die wohl wichtigste Funktion einer Banking-App ist die Einsicht des aktuellen Kontostands. Ganz nach dem Motto: 

„Wie viel Geld habe ich und wie viel kann ich noch ausgeben?“

Somit wurde dieser Screen als Start-Screen definiert, sobald der Nutzer die App öffnet. Neben des gesamten Kontostands wird eine klare Auftrennung aller Konten und Kreditkarten mit deren Einzelständen aufgezeigt. 

Durch das Einsetzen unterschiedlicher Schriftstärken wird darüber hinaus die Hierarchie der Information zusätzlich hervorgehoben. 

Außerdem werden Farben nur ganz gezielt verwendet. Muss beispielsweise in jeder Ansicht das Eurozeichen gleich stark hervorgehoben werden, wie der eigentliche Betrag? 

In der Detailansicht eines Einzelkontos werden Transaktionen unterschiedlich chronologisch kategorisiert. Statt kryptischer Transaktions-IDs werden intelligente Beschriftungen verwendet. Abbuchungen sind rot, Gutschriften grün.

Redesign DKB Kopie 2.004.jpegRedesign DKB Kopie 2.004.jpeg

Postfächer

Ähnlich wie bei den Kontodetails werden die Arten der Postfächer unterschiedlich gruppiert und angeordnet. 

Kontoauszüge und Kreditkartenabrechnungen werden an oberster Stelle angezeigt, da dort ein monatlicher, also regelmäßiger Informationsaustausch stattfindet. 

Bei ungelesenen Mitteilungen werden diese mit einem blauen Marker versehen.

Redesign DKB Kopie 2.005.jpegRedesign DKB Kopie 2.005.jpeg

Card Control

Mit der Einführung von Apple Pay war die Deutsche Kreditbank eine der ersten Banken deutschlandweit, die den neuen Service unterstützten. Nichtsdestotrotz besitzt man als Kontoinhaber auch weiterhin physische Karten, die im Ernstfall eines Verlusts schnell und unkompliziert verwaltet werden müssen. 

Außerdem sollen weitere kartenspezifische Funktionen, wie Einstellungen zur Benachrichtigung einzelner Kontoaktivitäten, schnell erreichbar sein.

Redesign DKB Kopie 2.006.jpegRedesign DKB Kopie 2.006.jpeg
Redesign DKB Kopie 2.007.jpegRedesign DKB Kopie 2.007.jpeg

Überweisungen

Neben den bereits genannten Funktionen sind Überweisungen ein essentieller Bestandteil einer mobilen Banking-App. Oftmals möchte man schnell von unterwegs aus eine Rechnung begleichen. Dementsprechend müssen mobil getätigte Transaktionen reibungslos und effizient ablaufen.

Um diese Wichtigkeit zu unterstützen befindet sich ein großer „+“-Button in der Tab Bar, sodass die Funktion aus jedem Screen aufgerufen werden kann. Im Anschluss wird dem Nutzer ein Sheet verschiedener Transaktionstypen angezeigt.

Die Schritte einer Überweisung sind nachvollziehbar aufgeteilt und die Eingabe einzelne Inputfelder leicht zu bedienen.

Die dunkle Seite der Macht

Redesign DKB Kopie 2.008.jpegRedesign DKB Kopie 2.008.jpeg

Seit der Einführung von iOS 13 bietet Apple einen systemweiten Dunkelmodus an, der auch von Drittapps verwendet werden kann. 

Demnach war es spannend, alle Interfacekomponenten ebenso für den Dunkelmodus anzupassen und zu schauen, wie sich Schriften, Farben und andere Elemente in dunkel verhalten.

Das Fazit

Während des Prozesses war es spannend, mit der Vielfalt diverser Systemkomponenten weiter vertraut zu werden und dennoch zu schauen, wie sich Schrift dabei verhalten kann. 

Insbesondere das Setzen von Überschriften im Vergleich zu Beschriftungen und Detailinformationen stellt einen schmalen Breitengrad dar, um wichtige Informationen von weniger wichtigen zu trennen. 

Als eigener Nutzer der DKB App wäre es demzufolge wünschenswert, ein überarbeitetes Interface in Zukunft begrüßen zu dürfen. Zumal die Bank selbst mit ihrer digitalen Position um neue Kunden wirbt.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Frank Rausch

Zugehöriger Workspace

Digitale Typografie

Entstehungszeitraum

Wintersemester 2019 / 2020

Keywords