UX Best Practices für Mobile (Finance)

Tina Banerjee Growth Marketing Jetzt kommentieren

Lesezeit: ca. 12 Min.

Die 34 Top UX Best Practices für Mobile der Finanzbranche in Deutschland zur Steigerung deiner Conversion Rate und Verbesserung deiner User Experience! 

Nutze die Insights für mehr Kundenzufriedenheit und als Treiber für nachhaltiges Wachstum.

Mobile Commerce in der Finanzbranche wächst und wächst. Immer mehr Anbieter stürmen den Markt, einige verschwinden und andere bauen ihre Produktpalette aus. Die Dienstleistungen schießen wie Pilze aus dem Boden.

Ob ein Produkt tatsächlich angenommen wird, hängt maßgeblich von der User Experience ab. Wir haben uns gefragt, welche UX Principles und Best Practices es aktuell im Finance gibt.

Analysiert haben wir u.a. CTA, Autocomplete, Advanced Search, Progress Bar, Navigation Bar, Chat Bots, Geburtsdatum, Konsistenz, Farben, Kontrast, Conversion, Checkout und die besten Anbieter aufgelistet.

Hier ein Überblick von Finanzanbietern von paymentandbanking.com (Stand: Februar 2019):

German Fintech Overview Februar 2019 – Paymentandbanking.com

Um besser vergleichen zu können, haben wir uns auf B2C-Anbieter der Bereiche Payment (Zahlungsanbieter), Banking (Online-Banking), Savings (Vermögenssicherung- und Aufbau) sowie Insurance (Versicherer) und Credit (Kreditanbieter) konzentriert.

Wir möchten dir einen Einblick über den aktuellen Stand und die Best Practices geben.

UX in der Finanzbranche

Das Produkt definiert die Ziele. Für unser Finanzsegment sind (je nach Produkt oder Dienstleistung) folgende Ziele relevant:

  • Kontoerstellung
  • Leads (Formulare, Anrufe)
  • Zahlende Kunden
  • Registrierung für Finanzprodukte
  • Kundeninteraktion
  • Upselling
  • Empfehlungen
  • Finanzierte Leads

Ein paar Beispiele und Anbieter:

UX Best Practices Mobile: Finanzbranche in Deutschland
Finanzbranche und ihre Ziele (UX & Conversion)

UX Prinzipien für REIBUNGSLOSE Erlebnisse 

Das Suchen, Filtern, Navigieren, Anschauen, Vergleichen, Testen, Informieren und Entscheiden ist auf einem Smartphone bicht immer einfach, oder? Ein reibungsloses Nutzererlebnis für alle Kunden gut hinzubekommen, ist daher die Kür.

Reibung entsteht, wenn Hindernisse Widerstand erzeugen und der Nutzer mehr Energie aufwenden muss, um diese zu bewältigen.

Sein „Investment“ ist die z.B. seine Zeit, die er aufbringt. Je mehr Hindernisse du ihm also in den Weg stellst, desto länger wendet er Zeit und Energie auf, um an sein Ziel zu kommen. Je geringer seine Motivation ist, desto schneller wird er aufgeben.

Die Ladegeschwindigkeit einer Website zum Beispiel ist daher ein maßgebliches Kriterium für UX und Usability und demnach für Conversion:

Laut Neil Patel hat eine Sekunde Ladezeit-Verzögerung etwa 7% Conversion-Rate Einbuße zur Folge. Nutzer erwarten schnelle und intuitive Websites.

Teste deine Seite mit testmysite.thinkwithgoogle.com:

UX Page Speed Optimierung: GoogleTestMySite
GoogleTestMySite

Auf mobilen Endgeräten ist dies noch ernster zu nehmen. Wenn die Seite unterwegs nicht lädt, ist der Kunde weg.

Für die Finanzbranche gilt: Sicherheit, Vertrauen und Kundenservice sind enorm wichtig und entscheidende Faktoren für erfolgreiche Conversion.

Diese sollte der Kunde auf dem gesamten Funnel wahrnehmen!

Wir haben die Best Practices entlang des Funnels in folgende Phasen und Bereiche eingeteilt:

Einteilung in sechs Website-Bereiche

Die Kategorien:

  1. Startseite / Landing Page
  2. Menü / Navigation
  3. Produktseite
  4. Produktvergleich / Pricing
  5. Konversionsprozess
  6. Formularoptimierung

Eine Anmerkung:

Best Practices können ein möglicher Weg sein – aber nicht in jedem Fall. 

Daher: Immer gegen die bestehende Variante testen.

UX Conversion Best Practices: Empfehlungen A/B Testen
Alle Empfehlungen A/B testen.

Los geht’s mit den Best Practices :

Startseite / Landing Page

Startseite oder Landingpages werden darauf geprüft, ob das primäre Ziel der Weiterleitung auf konversionsrelevanten Content gut zu erreichen ist.

Als Landingpage kann auch eine Produktseite sein. Sie ist dann mit den gleichen Herausforderungen konfrontiert, die eine Startseite bewältigen muss.

Zu beachten ist hier, dass das Gesamtkonzept Einfluss auf die Kaufentscheidung hat.

Markenbild, gesellschaftliche Trends, das (persönliche) Weltbild des Kunden beeinflussen die Entscheidung.

In jedem Falle gilt: Der Weg muss erkennbar sein.

#1 Zeige einen klaren, nutzerorientierten CTA im sichtbaren Bereich („above the fold“)

UX Best Practices Mobile: Nutzerorientierter CTA
Klarer, nutzerorientierter CTA „above the fold“

RESEARCH: NUTZUNGSORIENTIERTE CALL-TO-ACTIONS

Laut Beemdigital hat Writework.com (eine auf Abonnements basierende Bildungs-Webseite für Studenten) durch Änderung der CTA einen Umsatzanstieg von 31% erzielt.

Original: „Mein Konto erstellen“

Test: „Konto erstellen & loslegen“

#2 Zeige ein klares, nutzerorientiertes Werteversprechen im sichtbaren Bereich („above the fold“)

UX Best Practices Mobile: Werteversprechen above the Fold
Klares, nutzerorientiertes Werteversprechen im sichtbaren Bereich

RESEARCH: NUTZUNGSORIENTIERTE WERTEVERSPRECHEN ALS ELEMENT, DAS DER NUTZER ALS ERSTES SIEHT

Ein Werteversprechen ist eine klare Aussage, die

  • erläutert, wie Ihr Produkt die Probleme Ihrer Kunden löst oder ihre Situation verbessert
  • spezifische Vorteile liefert
  • dem idealen Kunden mitteilt, warum sie Ihre Dienstleistung nutzen sollten anstatt die des Wettbewerbs

#3 Priorisiere die wichtigsten CTA (durch Kontrast, Farbe, Stile)

UX Best Practices Mobile: CTA Priorisierung
Priorisierung der wichtigsten CTA

#4 Bei mehreren Produkten / Dienstleistungen: Stelle diese auf der Startseite dar

UX Best Practices Mobile: Menü-Kategorien
Kategorien für bessere Navigation bei vielen Produkten

#5 Nutze Social Proof, um Vertrauen zu gewinnen

UX Best Practice Mobile: Social Proof für Vertrauen
Social Proof, um Vertrauen zu gewinnen

#6 Vermeide automatische Slider. Besser: Nutzer-initiierte Slider

UX Best Practices Mobile: Automatische Slider
Automatische Slider vermeiden

RESEARCH: AUTOMATISCHE SLIDER FUNKTIONIEREN KAUM

Click-Through-Rate bei automatischen Slidern

Bildquelle: Lemonstad

Automatische Slider bieten kaum Vorteile.

1) CTRs der 2-5 Position um 85x kleiner

Nach einer Studie von Erik Runyon über ND.edu sind CTRs bei jedem Slide ab Position 2 etwa 85-mal kleiner.

2) Schlechtere Performance schadet der Conversion Rate

Hochauflösende Bilder verlangsamen deine Website (2 Sekunden beeinflusst deine Conversion-Rate um 7% – siehe Anfang des Artikels).

Menü & Navigation

Wenig Raum, kleines Display, schlechter Empfang… Die Navigation auf mobilen Geräten ist eine Herausforderung. Klare Begriffe, die genau das aussagen, wo sie hin verlinken, sind ein Muss!

Wenn der Nutzer bereits 5x klicken muss, um in einem Untermenü-Punkt erst das zu finden, was er sucht, hat er möglicherweise bereits die Lust verloren, weiterzugehen und zu konvertieren.

Das Motto hier: Weniger ist mehr.

#7 Stelle das Menü auf einer Seite dar, nutze dynamische oder ausklappbare Menüs

UX Menü Mobile
UX Menü Mobile

#8 Wenn Anrufe wichtig sind, biete einen Click-to-Call-Button an (Hauptnavigation)

Mobile UX Best Practices: Click-to-Call-Button Mobile UX

#9 Biete Support und After-Sales Hilfen im Menü an (Login)

UX Menü Hilfe
Biete Support und After-Sales-Hilfen im Menü an (Login)

#10 Für große Mengen an Inhalt: Integriere eine interne Suche auf der Startseite oder im Menü

UX Mobile Interne Suche in Menü
Integriere eine interne Suche bei großen Mengen an Inhalten

#11 Bei der Suche: Nutze Autocomplete, Ergebnis-Sortierung & Filterfunktion 

UX Mobile Best Practices: Suche, Autocomplete, Filterfunktion
Suche: Nutze Autocomplete, Ergebnissortierung & Filterfunktion

Produktseite

Bevor der Kunde kauf, wägt er ab. Je nach Anlass sind für ihn unterschiedliche Informationen notwendig, um eine Entscheidung zu treffen.

Preis, Produkt-Farbe, Status-Symbole, Rabatte, Accessoires, Garantien, Datenschutz, Funktionsumfang und Features, Nachhaltigkeit oder Marke. Die Liste ist lang.

Das Wissen um die richtigen Infos auf der Produktseite ist meist nur durch intensives Testen herauszubekommen.

Tip: Erstelle Käufer Personas mit psychografischem Profil: Psychographic Personas.

Damit versetzt du dich in die Käufer und kannst Fragen, Hürden, Wünsche besser einschätzen, testen und tappst nicht im Dunkeln.

Es ist immer besser, Prototypen und Wireframes zu testen, bevor sie von der IT entwickelt werden, um dann festzustellen, dass Key Features fehlen oder schlichtweg unnötig sind.

#12 Biete klare, anschauliche CTA im sichtbaren Bereich an

Klare CTA im sichtbaren Bereich

#13 Nutze gut lesbare Schriften – 16px oder mehr & kontraststark

UX Best Practices Mobile: Schriften Fonts min 16px
Schriften auf mobilen Geräten sollten lesbar sein

RESEARCH: GRÖßERE SCHRIFTEN UNTERSTÜTZEN DIE CONVERSION

Tests von VWO zeigen, dass ein Text in 18 px Schriftgröße, im Gegensatz zu 12 px, bis zu 32.68% mehr Klicks bringt.

#14 Stelle sicher, dass Produktinfos anhand von Bullets, Überschriften und mobil-spezifischer Formatierung lesbar ist

UX Best Practices Mobile: mobil-spezifische Formatierung, Bullets, Headlines für bessere Produktinfos
Nutze mobil-spezifische Formatierung, Bullets, Headlines für bessere Produktinfos

RESEARCH: NUTZER LESEN NICHT, SIE SCANNEN

UX Best Practices Mobile:Content-Lesen-Scannen
Nutzer lesen nicht, sie scannen.

Eine Studie der NNGroup zeigt, dass 79% der Nutzer nicht lesen, sondern scannen.

Sie lesen Überschriften und hervorstechende Begriffe.

Lege daher den Fokus auf prägnante und aussagekräftige, gut zu überfliegende Werteversprechen.

#15 Nutze Videos als Mittel, um Nutzer zu informieren

UX Best Practices Mobile: Videos für Produktpräsentation
Informiere Nutzer mithilfe von Videos

RESEARCH: VIDEOS KÖNNEN EIN STARKER TREIBER FÜR CONVERSION SEIN

UX Best Practices Mobile: Videos-starker-Conversion-Treiber
Conversionxl: Steigerung der Conversion Rate in %

Das Video ist das Format, mit dem der Kunde das Produkt am besten betrachten kann.

Mit nur 30 Sekunden Video kannst du eine Menge Information präsentieren – das entspricht einer halben Textseite.

Produktvergleich / Pricing

Im POS können Kunden sich Produkte anschauen, fühlen und ertasten, riechen – also rundum wahrnehmen. Produktvergleiche – zumindest in solch einer großen Masse sind kaum möglich (Auch Kaufhäuser, die relative viele Marken anbieten, bilden nicht den gesamten Markt ab).

Der Vorteil im Onlinestore: Die Vergleiche sind hier mit vergleichsweise wenig Aufwand seitens der Kunden möglich. Natürlich fehlen die haptischen und olfaktorischen Wahrnehmungen.

Das recherchieren und vergleichen ist daher ein Vorteil und sollte auch auf mobilen Geräten gut funktionieren.

#16 Ermögliche Nutzern zu sortieren, filtern und Optionen zu reduzieren

UX Best Practices Mobile: Vergleich - Sortieren & Filtern
Sortieren, Filtern, Optionen reduzieren ermöglichen besseren Vergleich

#17 Hebe Angebote hervor (Markiere mit „Beste Leistung“ etc.)

UX Best Practices Mobile: Heb Produkte ab
Hebe Produkte durch relevante Infos ab

#18 Ermögliche Vergleiche durch konsistente Kategorien

UX best Practices Mobile: Konsistenz in Vergleichen
Konsistente Kategorien ermöglichen Vergleiche

Konversionsprozess

Nachdem wir einzelne Bereiche betrachtet haben, gehen wir jetzt auf den gesamten Prozess ein.

Es gibt Elemente, die sich wie ein roter Faden durch den Funnel durch ziehen und einen messbaren Effekt haben können.

#19 Vermittle Leistungsversprechen in jedem Schritt

UX Best Practices Mobile: Relevante Werteversprechen
Formuliere Leistungsversprechen, die für den jeweiligen Schritt relevant sind

#20 Wenn Anrufe wichtig sind, ermögliche sie in jedem Schritt

UX Best Practices Mobile: Click-to-Call-Buttons für Anrufe
Click-to-Call-Buttons integrieren, wenn Anrufe ein wichtiger Conversion Faktor sind

#21 Integriere Fortschrittsbalken/Pagination um Nutzer zu leiten

UX Best Practices Mobile: Progress Bar Pagination integrieren
Fortschrittsbalken / Pagination integrieren

RESEARCH: ZEIGE DIREKT FORTSCHRITTE, STATT BEI NULL ANZUFANGEN

UX Best Practices Mobile: Progress Bar um Fortschritt zu zeigen
Fortschrittsbalken: Besser ist es, bereits einen Fortschritt anzuzeigen

Menschen neigen dazu, motivierter zu sein, Dinge zu erledigen, je näher sie am Ziel sind.

#22 Begrenze Ausstiegsmöglichkeiten während des Konversionsprozesses

UX Best Practices Mobile: Ausstiegsmöglichkeiten Konversionsprozess begrenzen
Ausstiegsmöglichkeiten begrenzen

#23 Nutze anschauliche CTA

UX Best Practices Mobile: CTA Funnel anschaulich gestalten
Anschauliche CTA entlang des Funnels

#24 Zeige, wie sicher deine Seite/dein Produkt ist

UX Best Practices Mobile: Sicherheitssiegel Zertifikate integrieren
Sicherheitszeichen, Zertifikate etc.

STUDIE: WELCHEM SIEGEL VERTRAUEN DIE NUTZER

Baymard-Studie: Welchen Siegel vertrauen Nutzer online
Baymard-Studie: Welchen Siegel vertrauen Nutzer online

#25 Teste Upselling während des Konversionsprozesses

UX Best Practices Mobile: Upsell Konversionsprozess
Upsell-Beispiel im mobilen Konversionsprozess

RESEARCH: UPSELL-TAKTIKEN

Probiere verschiedene Ansätze aus:

  • Personalisierte Empfehlungen wie „weil Sie … gekauft haben“ oder „Vielleicht gefällt Ihnen auch…“
  • Anreiz für einen größeren Kaufwert, z.B. „Rabatt beim Kauf von 2 Paketen“

Formularoptimierung

Die Königsklasse der Conversion Optimierung ist im mobilen Bereich immer noch das Eingeben – und somit die Optimierung der Formulare.

Solange Voice Agenten nicht zu 100% akkurat funktionieren, werden Tastatur- und Eingabe-Optimierung UX und Conversion-Themen mit hoher Priorität sein.

#26 Nutze Inline-Validierung & Autofill

UX Best Practices Mobile: Inline-Validierung & Autofill
Inline-Validierung & Autofill

#27 Nutze Autocomplete

Mobile UX: Autocomplete

RESEARCH: VEREINFACHE FORMULARE

Formstack hat über 650.000 Formulare und ihre Nutzung getestet. Sie stellten fest, dass die Konversionsraten erheblich steigen, wenn:

  1. Input-Felder auf mehrere Webseiten verteilt sind
  2. Formulare größere Schriftarten enthalten.
  3. Optionen „Speichern und fortsetzen“ und
  4. Fortschrittsbalken enthalten sind

#28 Reduziere die Anzahl der Felder

UX Best Practices MobileMobile UX: Anzahl der Input- Felder reduzieren
Mobile UX: Anzahl der Input- Felder reduzieren

#29 Schaffe Vertrauen: Erkläre, warum Kundendaten nötig sind

UX Best Practices Mobile: Schaffe Vertrauen: Erkläre, warum Infos abgefragt werden
Schaffe Vertrauen: Erkläre, warum Infos abgefragt werden

#30 Vermeide Dropdown-Listen bei weniger als 3 Optionen

UX Best Practices Mobile: Dropdowns sinnvoll einsetzen
Weniger Dropdowns nutzen

RESEARCH: NUTZE DROPDOWNS ALS LETZTE MÖGLICHKEIT

UX Best Practices Mobile: Optionen sichtbar anbieten, anstatt in Dropdowns verstecken
Optionen sichtbar anbieten, anstatt in Dropdowns verstecken

Versuche Optionen anzuzeigen, anstatt sie zu verstecken.

#31 Vermeide Dropdowns für Geburtsdaten

UX Best Practices Mobile: Dropdowns bei Geburtstagen vermeiden
Dropdowns bei Geburtstagen vermeiden

#32 Nutze numerische Eingaben für Geburtsdaten

UX Best Practices Mobile: Numerische Eingaben bei Geburtsdaten verwenden
Numerische Eingaben bei Geburtsdaten verwenden

#33 Nutze die korrekte Tastatur

UX Best Practices Monile: Die richtige Tastatur wählen
Die richtige Tastatur wählen

#34 Stelle sicher, dass der korrekte Input Type verwendet wird

UX Best Practices Mobile: Verwende den korrekten Input Type
Verwende den korrekten Input Type

Wer macht’s am besten? 

Aus all den 34 Best Practices küren wir natürlich auch die Besten der jeweiligen Klasse.

And the winner is…

Startseite & Navigation – DKB

Zu lösendes Problem:

Wie helfe ich Nutzern, einen Überblick über unsere Produkte und Dienstleistungen zu erhalten?

  • Abgegrenzte, kontraststarke Primär-CTAs für Kategorien
  • Vom Benutzer initiiertes Scrollen vs. automatisches Karussell
  • Optionen sind gut strukturiert und leicht zu finden im kurzen Menü
  • Einfach zu nutzende interne Suche mit Autocomplete
  • Mögliche Optimierung: Übersichtliche Darstellung der Kategorien
UX Best Practices Mobile: Klassenbester: Startseite & Navigation - DKB
Klassenbester: Startseite & Navigation – DK

Konversionsprozess – Getsafe

Zu lösendes Problem:

Wie kann ich dabei helfen, meine Benutzer zu informieren und sie so schnell wie möglich zum Konvertieren zu bringen?

  • Klares Werteversprechen (In Stichpunkten)
  • Übersicht der Hauptprodukte /-kategorien
  • Angepasstes Werteversprechen an jedem Schritt
  • Klare CTA, sekundäre CTA, „Alle Leistungen“
  • Helfen Sie den Benutzern, das beste Produkt zu finden (Leistungen, Zusatzoptionen usw.)
UX Best Practices Mobile: Klassenbester: Konversionsprozess - Getsafe
Klassenbester: Konversionsprozess – Getsafe

Registrierung – Transferwise

Zu lösendes Problem:

Wie kann ich Hürden bei der Registrierung reduzieren? 

  • Werteversprechen in der Nähe des Formulars
  • Registrierung mit sozialen Netzwerk-Konten ermöglichen
  • Vermeiden Sie doppelte Abfragen von persönlichen Daten
  • Bieten Sie Passworthilfen an
  • Klare Option zum Login
  • Nur notwendige Informationen abfragen (Anzahl von Feldern reduzieren)
UX Best Practices Mobile: Klassenbester: Registrierung - Transferwise
Klassenbester: Registrierung – Transferwise

Formularoptimierung – Quirion

Zu lösendes Problem:

Wie führe ich Benutzer durch die Konversionsphase und mache Formulare so einfach wie möglich 

  • Formulare können Spaß machen!
  • Nutzen Sie immer die korrekte Tastatur
  • Einfache Eingabefelder (Nutzen Sie Select-Buttons für weniger als 4 Optionen)
  • Führen Sie den Benutzer durch Pagination / Fortschrittsanzeige
UX Best Practice Mobile: Klassenbester: Formularoptimierung - Quirion
Klassenbester: Formularoptimierung – Quirion

Vergleich – Check24

Zu lösendes Problem:

Wie können Benutzer große Mengen an Daten und Inhalten vergleichen?

  • „Vergleichen“ als CTA
  • Trennen Sie „Vergleichen“ und „Beantragen“ oder „Bestellen“
  • Horizontaler Vergleich zweier Produkte
  • Vergleichende Informationen bleiben konsistent damit die Daten vergleichen werden können
  • Die Möglichkeit, Vergleichsprodukte zu entfernen
  • Optimierung: Zusammenfassung im unteren Bereich 
UX Best Practices Mobile: Klassenbester: Vergleich - Check24
Klassenbester: Vergleich – Check24

Responsive Best Practices – Verivox

Zu lösendes Problem:

Wie kann ich Inhalte für die mobile Ansicht optimal an die Bedürfnisse der Nutzer anpassen?

  • Übersicht der wichtigsten Produkte auf der Startseite
  • Mobil-freundliche Hauptmenüs und Header, Icons, Stichpunkte für Benutzer, die Inhalte überfliegen
  • Hinzufügen der „Whatsapp“-CTA und Login-Icon in der mobilen Ansicht
  • Klare Überschrift und Werteversprechen
  • Re-Priorisierung von sekundären Informationen (TÜV-Siegel, TV-Logos) in der mobilen Ansicht
UX Best Practices Mobile: Klassenbester: Responsive Best Practices - Verivox
Klassenbester: Responsive Best Practices – Verivox

Alle 34 UX Best Practices auf einen Blick

Hier sind alle 33 UX Principles und Best Practices zusammengestellt. Nutzt solche Übersichten gern, um alle Themen im Blick zu behalten – als Leitfaden für A/B Tests und Optimierungen.

UX Best Practices Mobile entlang des gesamten Funnels
UX Best Practices entlang des gesamten Funnels

Den gesamten Leitfaden gibt es natürlich als PDF zum Download:

Mobile UX Best Practices PDF – Download

Download (PDF)

Zum Abschluss:

Best Practices und Prinzipien sind nicht in Stein gemeißelt.

  • Bleibt am Ball
  • Nutzt eigene Ideen
  • Testet alles!

Welche UX Best Practices sind bei euch erfolgreich?
Wir freuen uns auf euer Feedback!

Schreibe einen Kommentar

You have to agree to the comment policy.