Mobile UX Best Practices für Finanzanbieter

UX Best Practices für Finanzanbieter
UX BEST PRACTICES
FÜR FINANZANBIETER
Brainpath.de

KREDITE & KREDITGEBER
BANKWESENKREDITWESEN
FINANZPRODUKTE
‣ Angebote / Leads
(Formulare, Anrufe)
‣ Empfehlungen
‣ Finanzierte Leads
‣ Kontoerstellung
‣ Registrierung für
Finanzprodukte
‣ Kundeninteraktion
‣ Kontoerstellung
‣ Leads (Formulare,
Anrufe)
‣ Zahlende Kunden
‣ Kontoerstellung
‣ Kundeninteraktion
‣ Zahlende Kunden
‣ Upselling
‣ Empfehlungen
Für wen dieser Leitfaden interessant ist:

UX-Prinzipien für reibungslose Erlebnisse entlang des Funnels
1. STARTSEITE / LANDING
PAGE
2. MENÜ & NAVIGATION 3. PRODUKTSEITE
4. PRODUKTVERGLEICH /
PRICING
5. KONVERSIONSPROZESS
6. FORMULAR
OPTIMIERUNG
Im Zuge zahlreicher Vergleiche und UX Tests von Finanz-Websites und -Angeboten entstand eine Übersicht der wichtigsten UX Richtlinien
im Finanzbereich. Mit diesem UX-Leitfaden können Sie Ihre mobilen Websites in den folgenden 6 Website-Bereichen verbessern:

Alle Empfehlungen sollten
A/B getestet werden!
Best Practices können ein möglicher Weg sein - aber nicht in jedem Fall.
Daher: Immer gegen die bestehende Variante testen.

Startseite / Landing Page

#1 ZEIGEN SIE EINEN KLAREN, NUTZERORIENTIERTEN CTA „ABOVE THE FOLD“
n26.degetsafe.deginmon.de

RESEARCH: NUTZUNGSORIENTIERTE CALL-TO-ACTIONS
https://beemdigital.com/case-study-31-03-increase-in-sales-by-tweaking-the-call-to-action-copy-on-a-payment-page/Quelle:
Writework.com (eine auf Abonnements basierende Bildungs-
Webseite für Studenten) hat durch Änderung der CTA einen
Umsatzanstieg von 31% erzielt.
Original: „Mein Konto erstellen“
Test: „Konto erstellen & loslegen“
Original: Variante 1:
Mein Konto erstellen
Konto erstellen &
loslegen
31% mehr Conversions
Stat. Konﬁdenz: 98%

#2 ZEIGEN SIE EIN KLARES, NUTZERORIENTIERTES WERTEVERSPRECHEN „ABOVE THE FOLD“
verivox.dequirion.dewefox.de

RESEARCH: ZEIGEN SIE NUTZERORIENTIERTE WERTEVERSPRECHEN ALS
ERSTES ELEMENT DAS DER NUTZER SIEHT
Ein Werteversprechen ist eine klare Aussage, die
1. erläutert, wie Ihr Produkt die Probleme Ihrer Kunden löst oder ihre Situation verbessert
2. speziﬁsche Vorteile liefert
3. dem idealen Kunden mitteilt, warum sie Ihre Dienstleistung nutzen sollten anstatt die des Wettbewerbs
source: http://conversionxl.com/how-to-increase-sales-online-the-checklist/

#3 PRIORISIEREN SIE DIE WICHTIGSTEN CTA (DURCH KONTRAST, FARBE, STILE)
treefin.declark.derevolut.com/de

#4 BEI MEHREREN PRODUKTEN/DIENSTLEISTUNGEN: STELLEN SIE DIESE AUF DER STARTSEITE DAR
financescout24.deverivox.decheck24.de

#5 NUTZEN SIE SOCIAL PROOF, UM VERTRAUEN ZU GEWINNEN
weltsparen.decheck24.definanzcheck.de

#6 VERMEIDEN SIE AUTOMATISCHE SLIDER. BESSER: NUTZER-INITIIERTE SLIDER
dkb.detransferwise.com/de

RESEARCH: AUTOMATISCHE SLIDER FUNKTIONIEREN KAUM
http://blog.lemonstand.com/designing-ecommerce-store-without-carousel-slider/Quelle:
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 CR
Hochauﬂösende Bilder verlangsamen Ihre Website (2
Sekunden beeinﬂusst Ihre Conversion-Rate um 7%).

Menü & Navigation

#7 STELLEN SIE DAS MENÜ AUF EINER SEITE DAR, NUTZEN SIE DYNAMISCHE ODER AUSKLAPPBARE MENÜS
transferwise.com/deholvi.comdkb.de

#8 WENN ANRUFE WICHTIG SIND, BIETEN SIE EINEN CLICK-TO-CALL BUTTON AN (HAUPTNAVIGATION)
zinsgold.declark.desmava.de

#9 BIETEN SIE SUPPORT UND AFTER-SALES-HILFEN IM MENÜ AN (LOGIN)
clark.deweltsparen.dezinsgold.de

#10 FÜR GROßE MENGEN AN INHALT: INTEGRIEREN SIE EINE INT. SUCHE AUF DER STARTSEITE ODER IM MENÜ
postbank.decheck24.desantander.de

#11 BEI DER SUCHE: NUTZEN SIE AUTOCOMPLETE, ERGEBNISSORTIERUNG & FILTERFUNKTION
postbank.dedkb.decheck24.de

Produktseite

#12 BIETEN SIE KLARE, ANSCHAULICHE CTA IM SICHTBAREN BEREICH AN
revolut.com/deverivox.degetsafe.de

#13 NUTZEN SIE GUT LESBARE SCHRIFTEN - 16PX ODER MEHR, KONTRASTSTARK
VS.

RESEARCH: GRÖßERE SCHRIFTEN UNTERSTÜTZEN DIE KONVERSION
https://vwo.com/blog/ab-test-font-size-case-study/Quelle:
Ein Text in 18 px Schriftgröße,
im Gegensatz zu 12 px, bringt bis zu
32.68% mehr Klicks.

#14 STELLEN SIE SICHER, DASS PRODUKTINFOS ANHAND VON BULLETS, ÜBERSCHRIFTEN & MOBIL-SPEZIFISCHER
FORMATIERUNG LESBAR IST
wefox.den26.derevolut.com/de

RESEARCH: NUTZER LESEN NICHT, SIE SCANNEN
https://www.nngroup.com/articles/how-users-read-on-the-web/Quelle:
79% der Nutzer lesen nicht, sie scannen.
Sie lesen Überschriften und hervorstechende Begriﬀe.
Legen Sie den Fokus auf prägnante und aussagekräftige,
gut zu überﬂiegende Werteversprechen.
LESEN SCAN

#15 NUTZEN SIE VIDEOS ALS MITTEL, UM NUTZER ZU INFORMIEREN
de.scalable.capitalvaamo.detreefin.de

RESEARCH:
VIDEOS KÖNNEN EIN STARKER TREIBER FÜR KONVERSION SEIN
Das Video ist das Format, mit dem der Kunde das Produkt am
besten betrachten kann (besser als Bilder).
Mit nur 30 Sekunden Video können Sie eine Menge Informationen
präsentieren - das entspricht einer halben Textseite.
Das Diagramm zeigt den Anstieg der Konversionsrate für
Käufer, die Produktvideos angesehen haben.
http://conversionxl.com/how-to-use-video-to-increase-conversions/Quelle:
Steigerung der CVR in %

Produktvergleich / Pricing

#16 ERMÖGLICHEN SIE NUTZERN ZU SORTIEREN, FILTERN UND OPTIONEN EINZUGRENZEN
verivox.decheck24.deweltsparen.de

#17 HEBEN SIE ANGEBOTE HERVOR (MARKIEREN SIE ‘BESTE LEISTUNG’, ‚BELIEBTESTES ANGEBOT’, ETC)
postbank.definanzcheck.decheck24.de

#18 ERMÖGLICHEN SIE VERGLEICHE DURCH KONSISTENTE KATEGORIEN
finanzcheck.decheck24.detransferwise.com/de

RESPONSIVES BEISPIEL: CHECK24 (PRODUKTVERGLEICH AUF KLEINEM BILDSCHIRM)
MOBILE DESKTOP

RESPONSIVES BEISPIEL: FINANZCHECK (PREISVERGLEICH AUF KLEINEM BILDSCHIRM)
MOBILE DESKTOP

Konversionsprozess

#19 VERMITTELN SIE LEISTUNGSVERSPRECHEN IN JEDEM SCHRITT DES FUNNELS
HOMEPAGE PRODUCT DETAIL CONVERSION FUNNEL
source: verivox.de

#19 VERMITTELN SIE LEISTUNGSVERSPRECHEN IN JEDEM SCHRITT DES FUNNELS
STARTSEITE PRODUKTKATEGORIESEITE PRODUKTSEITE
source: check24.de

#20 WENN ANRUFE WICHTIG SIND, ERMÖGLICHEN SIE DIESE IN JEDEM SCHRITT
zinsgold.declark.definanzcheck.de

#21 INTEGRIEREN SIE FORTSCHRITTSBALKEN/PAGINATION UM NUTZER ZU LEITEN
quirion.dezinsgold.degetsafe.de

RESEARCH:
ZEIGEN SIE DIREKT FORTSCHRITTE, ANSTATT BEI NULL ZU BEGINNEN
Menschen neigen dazu,
motivierter zu sein,
Dinge zu erledigen,
je näher sie am Ziel sind.
Weiter so! Sie haben bereits 2 von 6 Schritten geschaﬀt!
Sie haben 0 von 6 Schritten geschaﬀt.
Vielen Dank, dass Sie sich registriert haben.
Vielen Dank, dass Sie sich registriert haben.

#22 BEGRENZEN SIE AUSSTIEGSMÖGLICHKEITEN WÄHREND DES KONVERSIONSPROZESSES
clark.dedbk.den26.de

#23 NUTZEN SIE ANSCHAULICHE CTA
source: getsafe.de

#24 ZEIGEN SIE, WIE SICHER IHRE SEITE/PRODUKT IST
clark.definanzcheck.deginmon.de

STUDIE: WELCHEM SIEGEL VERTRAUEN DIE NUTZER AM MEISTEN?

#25 TESTEN SIE UPSELLING WÄHREND DES KONVERSIONSPROZESSES
getsafe.de

RESEARCH: UPSELL-TAKTIKEN
Probieren Sie 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

AUF DEM SMARTPHONE TIPPEN IST SCHWER UND ANSTRENGEND
hans-joachim.ringelschnatz_1@

#26 NUTZEN SIE INLINE-VALIDIERUNG & AUTOFILL
n26.degetsafe.decheck24.de

#27 NUTZEN SIE AUTOCOMPLETE
<label for="frmNameCC">Name on card</label>
<input name="ccname" autocomplete=„cc-name">
<label for="frmCCNum">Card Number</label>
<input name="cardnumber" autocomplete=„cc-number">
<label for="frmCCCVC">CVC</label>
<input name="cvc" autocomplete=„cc-csc">
<label for="frmCCExp">Expiry</label>
<input name="cc-exp" autocomplete="cc-exp">

#28 REDUZIEREN SIE DIE ANZAHL DER FELDER
getsafe.den26.de

RESEARCH: VEREINFACHEN SIE FORMULARE
Formstack hat über 650.000 Formulare und ihre Nutzung getestet.
Formstack stellte 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
https://www.formstack.com/blog/2015/industries-increase-conversion-rates/Quelle:

#29 SCHAFFEN SIE VERTRAUEN: ERKLÄREN SIE, WARUM KUNDENDATEN NÖTIG SIND
getsafe.declark.den26.de

#30 VERMEIDEN SIE DROPDOWN-LISTEN BEI WENIGER ALS 3 OPTIONEN
VS.

RESEARCH: NUTZEN SIE DROPDOWNS ALS LETZTE MÖGLICHKEIT
Versuchen Sie Optionen anzuzeigen,
anstatt sie zu verstecken.
Ihre Optionen:
Dies Das Jenes Etwas anderes
Ihre Optionen:
Dies
Das
Jenes
Etwas anderes
Option wählen

#31 VERMEIDEN SIE DROPDOWNS FÜR GEBURTSDATEN
VS.

#32 NUTZEN SIE NUMERISCHE EINGABEN FÜR GEBURTSDATEN
verivox.dedkb.den26.de

#33 NUTZEN SIE DIE KORREKTE TASTATUR
VS.

#34 STELLEN SIE SICHER, DASS DER KORREKTE INPUT TYPE VERWENDET WIRD
Input type HTML

FORMULARE KÖNNEN SPAß MACHEN
Quirion and Vaamo
do a great job of making
forms feel personal--
either like talking to a
real person willing to
help, or even like ﬁlling
out mad libs.

Wer macht’s am besten?

Wie helfe ich Nutzern, einen Überblick über unsere
Produkte und Dienstleistungen zu erhalten?
Startseite & Navigation - DKB
Zu lösendes Problem:
‣ 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

Wie kann ich dabei helfen, meine Benutzer zu informieren und sie
so schnell wie möglich zum Konvertieren zu bringen.
Konversionsprozess - Getsafe (Fort.)
‣ 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.)

Wie kann ich Hürden bei der Registrierung reduzieren?
Registrierung - Transferwise
‣ 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)

Wie führe ich Benutzer durch die
Konversionsphase und mache Formulare
so einfach wie möglich
Formularoptimierung - Quirion
‣ 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
Seitennummerierung / Schrittanzeige

Vergleich - Check24

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
Vergleich - Check24 (Fort.)

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
Responsive Best Practices - Verivox

Klarer CTA im sichtbaren
Bereich („above the fold“)
Klares, Nutzen-orientiertes
Leistungsversprechen im
sichtbaren Bereich
Priorisierung der wichtigsten
CTA durch Farbe, Kontrast,
Größe
Bei mehreren Produkten/
Dienstleistungen: Wichtigste
Kategorien und Angebote
prominent anzeigen, um
Navigation zu erleichtern
Social Proof nutzen
Automatische Slider
vermeiden. Besser: Nutzer-
initiiertes sliden ermöglichen
Menü kompakt auf einer Seite
darstellen
Dynamisches oder
ausklappbares Menü nutzen
Wenn Anrufe wichtig sind:
Anruf-CTA in der
Hauptnavigation anzeigen
Support und After-Sales-
Hinweise im Menü anzeigen
(Login)
Bei großen Webseiten ggf.
eine interne Suche zum Menü
hinzufügen
Die Suche durch
Autocomplete, Anzahl der
Ergebnisse und Filterfunktion
vereinfachen
Klare, anschauliche CTA im
sichtbaren Bereich („above
the fold“) anbieten
Lesbare Schriftgrößen und
große Bedienflächen nutzen
Visuelle Icons, Überschriften
und Stichpunkte nutzen, um
das Überfliegen zu erleichtern
Videos einsetzen, um Nutzer
besser zu informieren
Sortier-, Filterfunktionen und
Eingrenzen von
Produktoptionen anbieten.
Vorteile von Produkten und
Preisen hervorheben (z.B.
Beliebtestes Angebot)
Konsistent gleiche Kategorien
anzeigen, um besser
vergleichen zu können
Horizontales Scrollen vs.
vertikales Swipen testen
Auf Darstellung bei
responsiven Webseiten
achten
Werteversprechen in jeder
Phase des Funnels anzeigen.
Wenn Anrufe wichtig sind,
Direktkontakt in jedem Schritt
ermöglichen
Fortschritt/Pagination
integrieren, um Nutzer zu leiten
Ausstiegsmöglichkeiten
während der Konversion
begrenzen
Anschauliche CTA nutzen
Sicherheitsaspekten auf den
Seiten aufzeigen
Upsell während der Konversion
Inline-Validierung und Autofill
nutzen
Anzahl der Felder reduzieren
(Entfernung aller optionalen,
Nutzung von Adressen-APIs,
etc)
Erklären, warum spezifische
Daten benötigt werden, um
Vertrauen zu stärken
Keine Dropdowns nutzen,
wenn weniger als 3 Optionen
angezeigt werden
Numerische Eingaben für
Geburtstage nutzen anstatt
Dropdowns.
Korrekte Tastatur anzeigen
Alle UX Prinzipien auf einen Blick
1. STARTSEITE / LANDING
PAGE
2. MENÜ & NAVIGATION 3. PRODUKTSEITE
4. PRODUKTVERGLEICH /
PRICING
5. KONVERSIONSPROZESS
6. FORMULAR
OPTIMIERUNG

BENÖTIGEN SIE BERATUNG ZU UX &
CONVERSION OPTIMIERUNG?
Kontaktieren Sie uns: info@brainpath.de
Besuchen Sie unsere Webseite: brainpath.de

Mobile UX Best Practices für Finanzanbieter

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Mobile UX Best Practices für Finanzanbieter