Die 34 Top Mobile UX Best Practices 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 UX Best Practices es aktuell im Finanzwesen 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):
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 UX Best Practices geben.
UX Best Practices 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 für unsere UX Best Practices:
UX Prinzipien für reibunglose Erlebnisse
Das Suchen, Filtern, Navigieren, Anschauen, Vergleichen, Testen, Informieren und Entscheiden ist auf einem Smartphone nicht 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.
UX Best Practices Tipp:
Teste deine Seite mit testmysite.thinkwithgoogle.com:
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 UX Best Practices entlang des Funnels in folgende Phasen und Bereiche eingeteilt:
Einteilung in sechs Website-Bereiche
Die Kategorien:
- Startseite / Landing Page
- Menü / Navigation
- Produktseite
- Produktvergleich / Pricing
- Konversionsprozess
- Formularoptimierung
Eine Anmerkung: Best Practices können ein möglicher Weg sein – aber nicht in jedem Fall.
Daher: Immer gegen die bestehende Variante testen.
Los geht’s mit den UX 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“)
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“)
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)
#4 Bei mehreren Produkten / Dienstleistungen: Stelle diese auf der Startseite dar
#5 Nutze Social Proof, um Vertrauen zu gewinnen
#6 Vermeide automatische Slider. Besser: Nutzer-initiierte Slider
RESEARCH: AUTOMATISCHE SLIDER FUNKTIONIEREN KAUM
Click-Through-Rate bei automatischen Slidern
Bildquelle: Lemonstad. (Da Lemonstad im Juni 2019 vom Netz gegangen ist, schaut doch gern mal bei Digital.com vorbei.)
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
#8 Wenn Anrufe wichtig sind, biete einen Click-to-Call-Button an (Hauptnavigation)
#9 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ü
#11 Bei der Suche: Nutze Autocomplete, Ergebnis-Sortierung & Filterfunktion
Produktseite und Produktdetailseite
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
#13 Nutze gut lesbare Schriften – 16px oder mehr & kontraststark
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
RESEARCH: 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
RESEARCH: VIDEOS KÖNNEN EIN STARKER TREIBER FÜR CONVERSION SEIN
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
#17 Hebe Angebote hervor (Markiere mit „Beste Leistung“ etc.)
#18 Ermögliche Vergleiche durch konsistente Kategorien
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
#20 Wenn Anrufe wichtig sind, ermögliche sie in jedem Schritt
#21 Integriere Fortschrittsbalken/Pagination um Nutzer zu leiten
RESEARCH: ZEIGE DIREKT FORTSCHRITTE, STATT BEI NULL ANZUFANGEN
Menschen neigen dazu, motivierter zu sein, Dinge zu erledigen, je näher sie am Ziel sind.
#22 Begrenze Ausstiegsmöglichkeiten während des Konversionsprozesses
#23 Nutze anschauliche CTA
#24 Zeige, wie sicher deine Seite/dein Produkt ist
STUDIE: WELCHEM SIEGEL VERTRAUEN DIE NUTZER
#25 Teste Upselling während des Konversionsprozesses
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
#27 Nutze Autocomplete
RESEARCH: VEREINFACHE FORMULARE
Formstack hat über 650.000 Formulare und ihre Nutzung getestet. Sie stellten fest, dass die Konversionsraten erheblich steigen, wenn:
- Input-Felder auf mehrere Webseiten verteilt sind
- Formulare größere Schriftarten enthalten.
- Optionen „Speichern und fortsetzen“ und
- Fortschrittsbalken enthalten sind
#28 Reduziere die Anzahl der Felder
#29 Schaffe Vertrauen: Erkläre, warum Kundendaten nötig sind
#30 Vermeide Dropdown-Listen bei weniger als 3 Optionen
RESEARCH: NUTZE DROPDOWNS ALS LETZTE MÖGLICHKEIT
Versuche Optionen anzuzeigen, anstatt sie zu verstecken.
#31 Vermeide Dropdowns für Geburtsdaten
#32 Nutze numerische Eingaben für Geburtsdaten
#33 Nutze die korrekte Tastatur
#34 Stelle sicher, dass der korrekte Input Type verwendet wird
Wer macht’s am besten?
Aus all den 34 UX 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
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.)
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)
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
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
Responsive UX 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
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.
Den gesamten Leitfaden gibt es natürlich als PDF zum Download:
Zum Abschluss:
UX Best Practices und Prinzipien sind nicht in Stein gemeißelt.
- Bleibt am Ball
- Nutzt eigene Ideen
- Testet alles!
Du suchst Unterstützung im Bereich UX-Analysen und UX-Optimierung? BRAINPATH ist führend auf dem Gebiet.
Tina ist geschäftsführende Gesellschafterin bei Brainpath.de und General Partner bei Userpeek.com. Sie ist spezialisiert auf Growth Marketing, Produkt Management, UX, Design, Research und Brand.
