Fintech-App-UI-Design: Finanzaufgaben klar und ruhig gestalten

Machen Sie Kontostände im Kontext lesbar

Eine große Zahl ist nicht selbsterklärend. Identifizieren Sie das Konto, zu dem es gehört, und zeigen Sie die Währung mit einem vertrauten Symbol oder Code an. Wenn das Produkt zwischen aktuellen, verfügbaren, ausstehenden oder investierten Beträgen unterscheidet, kennzeichnen Sie diese Konzepte direkt und erläutern Sie sie bei Bedarf. Vermeiden Sie es, zwei unterschiedliche Balance-Typen mit nahezu identischem Stil und ohne Definition zu präsentieren.

Der Kontext kann auch umfassen, wann der Betrag zuletzt aktualisiert wurde oder welche Aktivität noch aussteht. Wählen Sie das Detail, das jemandem hilft, den Bildschirm zu interpretieren, anstatt dekorative Zahlen hinzuzufügen. Verwenden Sie eine konsistente Zahlenformatierung und genügend Abstände, um Ziffern, Dezimaltrennzeichen und Minuszeichen leicht zu unterscheiden. Behalten Sie bei langen Kontonamen genügend Text bei, um die Konten voneinander zu unterscheiden, anstatt sich nur auf die Farbe oder ein Symbol zu verlassen.

• Verwenden Sie neben dem Betrag eine eindeutige Kontobezeichnung und Währung.
• Erklären Sie Fachbegriffe wie „verfügbar“ oder „ausstehend“ im Klartext.
• Halten Sie die gleiche Menge und den gleichen Zustand mit größerem Text und unterstützender Technologie verständlich.

Zeigen Sie den Transaktionsstatus als sich ändernden Status an

Eine Transaktion ist ein Prozess, nicht nur eine Zeile in einer Verlaufsliste. Geben Sie für jeden Posten gegebenenfalls einen kurzen Status, ein Datum, einen Betrag und die Gegenpartei oder den Bestimmungsort an. Lassen Sie die Statusbezeichnung im Text sichtbar; Farbe oder ein Symbol können es verstärken, sollten aber nicht die Bedeutung allein vermitteln. Unterscheiden Sie je nach Produktstatus zwischen ausstehenden, abgeschlossenen oder abgelehnten Transaktionen und solchen, die Aufmerksamkeit erfordern.

Beispielsweise könnte eine hypothetische Überweisung von 45,00 EUR an Alex zunächst „Geplant für den 4. November“, dann „In Bearbeitung“ und später „Abgeschlossen“ lauten. Wenn eine Verbindung nach der Übermittlung abbricht, verkünden Sie Erfolg oder Misserfolg nicht ohne Beweise. Sagen Sie, dass der Status noch nicht verfügbar ist, erklären Sie, wie Sie die Überprüfung erneut durchführen können, und machen Sie deutlich, ob ein erneuter Versuch zu einer weiteren Anfrage führen könnte. Der genaue Wortlaut und die verfügbaren Aktionen hängen vom tatsächlichen Transaktionsverhalten des Produkts ab.

Entwerfen Sie Finanzformulare, die vermeidbare Verwirrung verhindern

Fragen Sie nach Informationen, wenn sie für die Aufgabe benötigt werden, und gruppieren Sie verwandte Felder, damit das Formular in einer sinnvollen Reihenfolge gelesen wird. Verwenden Sie dauerhafte Bezeichnungen wie „Empfänger“ oder „Betrag“. Ein Platzhalter ist ein Beispiel und kein Ersatz für eine Beschriftung. Wenn ein Feld ein bestimmtes Format erwartet, geben Sie es vor der Eingabe an – zum Beispiel, ob ein Betrag Cent akzeptiert oder welche Kennung in das Feld gehört. In den Dateneingaberichtlinien von Apple wird empfohlen, die angeforderten Informationen klar zu formulieren, unnötige Eingaben zu minimieren und Werte zu validieren, wenn sie von Personen eingegeben werden.

Wählen Sie Eingabesteuerelemente, die zu den Informationen passen und es Benutzern ermöglichen, Eingaben zu korrigieren. Halten Sie optionale Felder sichtbar optional und erforderliche Felder erkennbar. Wenn eine Auswahl Konsequenzen hat, beschreiben Sie die Optionen im Klartext, anstatt die Leute aus Kurzcodes auf ihre Bedeutung schließen zu lassen. Die Feldführung sollte nah genug an der Steuerung sein, um verständlich zu bleiben, wenn der Bildschirm umfließt oder vergrößert wird.

Geben Sie den Leuten einen nützlichen Überprüfungs- und Bestätigungsschritt

Fassen Sie vor einer Folgemaßnahme die Informationen zusammen, die jemand übermitteln möchte: Quelle, Ziel, Betrag, Datum und alle angezeigten Gebühren oder Zeitpunkte, die für den Fluss relevant sind. Fassen Sie die entscheidungskritischsten Details zusammen und machen Sie Bearbeitungsrouten leicht auffindbar. Die primäre Aktion sollte die Aktion beschreiben, z. B. „Übertragung planen“ anstelle eines mehrdeutigen „Weiter“.

Ein Bestätigungsbildschirm sollte mit der Frage „Was ist passiert?“ antworten. und „Was kann ich jetzt tun?“ Eine Referenz- oder Belegansicht kann die spätere Suche unterstützen. Vermeiden Sie es, einen Tastendruck als Beweis dafür zu betrachten, dass der zugrunde liegende Vorgang erfolgreich war. Die Schnittstelle sollte das tatsächlich vom Produkt zurückgegebene Ergebnis widerspiegeln.

• Sorgen Sie dafür, dass die Zusammenfassung mit den eingegebenen Werten und ausgewählten Optionen konsistent ist.
• Durch Wiederherstellungs- und Bearbeitungsaktionen bleibt die Arbeit des Benutzers erhalten, sofern dies sinnvoll ist.
• Geben Sie nach der Einreichung an, ob die Anfrage eingegangen ist, bearbeitet wird oder ein bestätigtes Ergebnis hat.
• Erklären Sie bei einer unsicheren Antwort, wie Sie den aktuellen Status überprüfen können, bevor Sie zu einer weiteren Einreichung einladen.

Machen Sie Fehler und Aktualisierungen zugänglich

Wenn ein Eingabefehler erkannt wird, identifizieren Sie das Feld und beschreiben Sie das Problem im Text. „Ungültiger Betrag“ ist weniger nützlich als eine Meldung, die das akzeptierte Format oder den fehlenden Wert erklärt. Behalten Sie gültige Einträge bei, damit Benutzer ein Problem beheben können, ohne von vorne beginnen zu müssen. Der WCAG 2.2-Leitfaden des W3C fordert, dass erkannte Eingabefehler identifiziert und beschrieben werden und dass bei erforderlicher Eingabe Kennzeichnungen oder Anweisungen bereitgestellt werden.

Auch Statusaktualisierungen sind wichtig. Wenn eine Seite von „In Bearbeitung“ zu „Abgeschlossen“ wechselt, ohne den Fokus zu verschieben, machen Sie diese Aktualisierung auf eine Art und Weise verfügbar, die von unterstützenden Technologien erkannt werden kann. WCAG 2.2 beschreibt Statusmeldungen als Änderungen, die Ergebnisse, Wartezeiten, Fortschritte oder Fehler kommunizieren, ohne dass eine Kontextänderung erforderlich ist. Sorgen Sie für angemessene Benachrichtigungen: Kündigen Sie wichtige Änderungen an, ohne jemanden wiederholt bei jeder visuellen Aktualisierung zu unterbrechen.

Überprüfen Sie den Kontrast, die Textgrößenänderung, den Tastatur- oder Schalterzugriff und die Namen der Bildschirmleseprogramme in der implementierten Benutzeroberfläche. Verwenden Sie klare Überschriften und Kontrollbezeichnungen und signalisieren Sie Erfolg, Fehler oder Transaktionsrichtung nicht allein durch die Farbe. Die Designprinzipien von Apple legen Wert auf klares Feedback und darauf, Menschen dabei zu helfen, sich von Fehlern zu erholen; Dies sind nützliche Ziele, während die tatsächliche Zugänglichkeit die Bewertung des gesamten Produkts erfordert.

Eine Checkliste für die Überprüfung von Fintech-Schnittstellen

Gehen Sie eine typische Aufgabe vom Anfangssaldo bis zum Endstatus durch. Überprüfen Sie den normalen Pfad, eine Korrektur und eine Unterbrechung, z. B. eine langsame Verbindung. Vergleichen Sie verwandte mobile Bildschirme in der Bibliothek, um zu sehen, wie unterschiedliche Schnittstellen Informationen und Aktionen anordnen, und bewerten Sie dann Ihren eigenen Ablauf anhand des tatsächlichen Produktverhaltens.

• Kann jemand sagen, welches Konto und welche Währung ein Saldo beschreibt?
• Werden ausstehende und abgeschlossene Zustände klar benannt und im Text dargestellt?
• Verfügt jedes Feld über eine sichtbare Beschriftung und alle erforderlichen Formatanweisungen?
• Können Personen vor dem Absenden das Ziel, den Betrag und den Zeitpunkt überprüfen?
• Identifizieren Fehler das Problem und bieten sie eine praktische Korrektur an?
• Bleibt ein Update wahrnehmbar, ohne dass Farbe, präzises Sehen oder Fokusverlagerung erforderlich sind?
• Erklärt die Benutzeroberfläche, wie vor einem erneuten Versuch überprüft werden kann, wenn das Ergebnis unsicher ist?