FÜR FINANZANBIETER UX BEST PRACTICES - UX Best Practices für Finanzanbieter - Brainpath
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
UX Best Practices für Finanzanbieter
UX BEST PRACTICES
FÜR FINANZANBIETER
Brainpath.de
UX Best Practices für Finanzanbieter
Für wen dieser Leitfaden interessant ist:
KREDITWESEN BANKWESEN
‣ Kontoerstellung ‣ Kontoerstellung
‣ Leads (Formulare, ‣ Registrierung für
Anrufe) Finanzprodukte
‣ Zahlende Kunden ‣ Kundeninteraktion
FINANZPRODUKTE KREDITE & KREDITGEBER
‣ Kontoerstellung ‣ Angebote / Leads
‣ Kundeninteraktion (Formulare, Anrufe)
‣ Zahlende Kunden ‣ Empfehlungen
‣ Upselling ‣ Finanzierte Leads
‣ Empfehlungen
UX Best Practices für Finanzanbieter
UX-Prinzipien für reibungslose Erlebnisse entlang des Funnels
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:
1. STARTSEITE / LANDING 4. PRODUKTVERGLEICH / 6. FORMULAR
2. MENÜ & NAVIGATION 3. PRODUKTSEITE 5. KONVERSIONSPROZESS
PAGE PRICING OPTIMIERUNG
UX Best Practices für Finanzanbieter
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.
UX Best Practices für Finanzanbieter
Startseite / Landing Page
UX Best Practices für Finanzanbieter
#1 ZEIGEN SIE EINEN KLAREN, NUTZERORIENTIERTEN CTA „ABOVE THE FOLD“
ginmon.de getsafe.de n26.de
UX Best Practices für Finanzanbieter
RESEARCH: NUTZUNGSORIENTIERTE CALL-TO-ACTIONS
Original: Variante 1: Writework.com (eine auf Abonnements basierende Bildungs-
Webseite für Studenten) hat durch Änderung der CTA einen
Umsatzanstieg von 31% erzielt.
Konto erstellen &
Mein Konto erstellen loslegen
Original: „Mein Konto erstellen“
31% mehr Conversions Test: „Konto erstellen & loslegen“
Stat. Konfidenz: 98%
Quelle: https://beemdigital.com/case-study-31-03-increase-in-sales-by-tweaking-the-call-to-action-copy-on-a-payment-page/
UX Best Practices für Finanzanbieter
#2 ZEIGEN SIE EIN KLARES, NUTZERORIENTIERTES WERTEVERSPRECHEN „ABOVE THE FOLD“
wefox.de quirion.de verivox.de
UX Best Practices für Finanzanbieter
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. spezifische 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/
UX Best Practices für Finanzanbieter
#3 PRIORISIEREN SIE DIE WICHTIGSTEN CTA (DURCH KONTRAST, FARBE, STILE)
revolut.com/de clark.de treefin.deUX Best Practices für Finanzanbieter
#4 BEI MEHREREN PRODUKTEN/DIENSTLEISTUNGEN: STELLEN SIE DIESE AUF DER STARTSEITE DAR
check24.de verivox.de financescout24.deUX Best Practices für Finanzanbieter
#5 NUTZEN SIE SOCIAL PROOF, UM VERTRAUEN ZU GEWINNEN
finanzcheck.de check24.de weltsparen.deUX Best Practices für Finanzanbieter
#6 VERMEIDEN SIE AUTOMATISCHE SLIDER. BESSER: NUTZER-INITIIERTE SLIDER
transferwise.com/de dkb.deUX Best Practices für Finanzanbieter
RESEARCH: AUTOMATISCHE SLIDER FUNKTIONIEREN KAUM
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
Hochauflösende Bilder verlangsamen Ihre Website (2
Sekunden beeinflusst Ihre Conversion-Rate um 7%).
Quelle: http://blog.lemonstand.com/designing-ecommerce-store-without-carousel-slider/UX Best Practices für Finanzanbieter
Menü & NavigationUX Best Practices für Finanzanbieter
#7 STELLEN SIE DAS MENÜ AUF EINER SEITE DAR, NUTZEN SIE DYNAMISCHE ODER AUSKLAPPBARE MENÜS
dkb.de holvi.com transferwise.com/deUX Best Practices für Finanzanbieter
#8 WENN ANRUFE WICHTIG SIND, BIETEN SIE EINEN CLICK-TO-CALL BUTTON AN (HAUPTNAVIGATION)
smava.de clark.de zinsgold.deUX Best Practices für Finanzanbieter
#9 BIETEN SIE SUPPORT UND AFTER-SALES-HILFEN IM MENÜ AN (LOGIN)
zinsgold.de weltsparen.de clark.deUX Best Practices für Finanzanbieter
#10 FÜR GROßE MENGEN AN INHALT: INTEGRIEREN SIE EINE INT. SUCHE AUF DER STARTSEITE ODER IM MENÜ
santander.de check24.de postbank.deUX Best Practices für Finanzanbieter
#11 BEI DER SUCHE: NUTZEN SIE AUTOCOMPLETE, ERGEBNISSORTIERUNG & FILTERFUNKTION
check24.de dkb.de postbank.deUX Best Practices für Finanzanbieter
ProduktseiteUX Best Practices für Finanzanbieter
#12 BIETEN SIE KLARE, ANSCHAULICHE CTA IM SICHTBAREN BEREICH AN
getsafe.de verivox.de revolut.com/deUX Best Practices für Finanzanbieter
#13 NUTZEN SIE GUT LESBARE SCHRIFTEN - 16PX ODER MEHR, KONTRASTSTARK
VS.UX Best Practices für Finanzanbieter
RESEARCH: GRÖßERE SCHRIFTEN UNTERSTÜTZEN DIE KONVERSION
Ein Text in 18 px Schriftgröße,
im Gegensatz zu 12 px, bringt bis zu
32.68% mehr Klicks.
Quelle: https://vwo.com/blog/ab-test-font-size-case-study/UX Best Practices für Finanzanbieter
#14 STELLEN SIE SICHER, DASS PRODUKTINFOS ANHAND VON BULLETS, ÜBERSCHRIFTEN & MOBIL-SPEZIFISCHER
FORMATIERUNG LESBAR IST
revolut.com/de n26.de wefox.deUX Best Practices für Finanzanbieter
RESEARCH: NUTZER LESEN NICHT, SIE SCANNEN
LESEN SCAN
79% der Nutzer lesen nicht, sie scannen.
Sie lesen Überschriften und hervorstechende Begriffe.
Legen Sie den Fokus auf prägnante und aussagekräftige,
gut zu überfliegende Werteversprechen.
Quelle: https://www.nngroup.com/articles/how-users-read-on-the-web/UX Best Practices für Finanzanbieter
#15 NUTZEN SIE VIDEOS ALS MITTEL, UM NUTZER ZU INFORMIEREN
treefin.de vaamo.de de.scalable.capitalUX Best Practices für Finanzanbieter
RESEARCH:
VIDEOS KÖNNEN EIN STARKER TREIBER FÜR KONVERSION SEIN
Steigerung der CVR in %
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.
Quelle: http://conversionxl.com/how-to-use-video-to-increase-conversions/UX Best Practices für Finanzanbieter
Produktvergleich / PricingUX Best Practices für Finanzanbieter
#16 ERMÖGLICHEN SIE NUTZERN ZU SORTIEREN, FILTERN UND OPTIONEN EINZUGRENZEN
weltsparen.de check24.de verivox.deUX Best Practices für Finanzanbieter
#17 HEBEN SIE ANGEBOTE HERVOR (MARKIEREN SIE ‘BESTE LEISTUNG’, ‚BELIEBTESTES ANGEBOT’, ETC)
check24.de finanzcheck.de postbank.deUX Best Practices für Finanzanbieter
#18 ERMÖGLICHEN SIE VERGLEICHE DURCH KONSISTENTE KATEGORIEN
transferwise.com/de check24.de finanzcheck.deUX Best Practices für Finanzanbieter
RESPONSIVES BEISPIEL: CHECK24 (PRODUKTVERGLEICH AUF KLEINEM BILDSCHIRM)
MOBILE DESKTOPUX Best Practices für Finanzanbieter
RESPONSIVES BEISPIEL: FINANZCHECK (PREISVERGLEICH AUF KLEINEM BILDSCHIRM)
MOBILE DESKTOPUX Best Practices für Finanzanbieter
KonversionsprozessUX Best Practices für Finanzanbieter
#19 VERMITTELN SIE LEISTUNGSVERSPRECHEN IN JEDEM SCHRITT DES FUNNELS
HOMEPAGE PRODUCT DETAIL CONVERSION FUNNEL
source: verivox.deUX Best Practices für Finanzanbieter
#19 VERMITTELN SIE LEISTUNGSVERSPRECHEN IN JEDEM SCHRITT DES FUNNELS
STARTSEITE PRODUKTKATEGORIESEITE PRODUKTSEITE
source: check24.deUX Best Practices für Finanzanbieter
#20 WENN ANRUFE WICHTIG SIND, ERMÖGLICHEN SIE DIESE IN JEDEM SCHRITT
finanzcheck.de clark.de zinsgold.deUX Best Practices für Finanzanbieter
#21 INTEGRIEREN SIE FORTSCHRITTSBALKEN/PAGINATION UM NUTZER ZU LEITEN
getsafe.de zinsgold.de quirion.deUX Best Practices für Finanzanbieter
RESEARCH:
ZEIGEN SIE DIREKT FORTSCHRITTE, ANSTATT BEI NULL ZU BEGINNEN
Vielen Dank, dass Sie sich registriert haben.
Weiter so! Sie haben bereits 2 von 6 Schritten geschafft!
Menschen neigen dazu,
motivierter zu sein,
Dinge zu erledigen,
je näher sie am Ziel sind.
Vielen Dank, dass Sie sich registriert haben.
Sie haben 0 von 6 Schritten geschafft.UX Best Practices für Finanzanbieter
#22 BEGRENZEN SIE AUSSTIEGSMÖGLICHKEITEN WÄHREND DES KONVERSIONSPROZESSES
n26.de dbk.de clark.deUX Best Practices für Finanzanbieter
#23 NUTZEN SIE ANSCHAULICHE CTA
source: getsafe.deUX Best Practices für Finanzanbieter
#24 ZEIGEN SIE, WIE SICHER IHRE SEITE/PRODUKT IST
ginmon.de finanzcheck.de clark.deUX Best Practices für Finanzanbieter STUDIE: WELCHEM SIEGEL VERTRAUEN DIE NUTZER AM MEISTEN?
UX Best Practices für Finanzanbieter
#25 TESTEN SIE UPSELLING WÄHREND DES KONVERSIONSPROZESSES
getsafe.deUX Best Practices für Finanzanbieter
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“UX Best Practices für Finanzanbieter
FORMULAROPTIMIERUNGUX Best Practices für Finanzanbieter AUF DEM SMARTPHONE TIPPEN IST SCHWER UND ANSTRENGEND hans-joachim.ringelschnatz_1@
UX Best Practices für Finanzanbieter
#26 NUTZEN SIE INLINE-VALIDIERUNG & AUTOFILL
check24.de getsafe.de n26.deUX Best Practices für Finanzanbieter
#27 NUTZEN SIE AUTOCOMPLETE
Name on card
CVCUX Best Practices für Finanzanbieter
#28 REDUZIEREN SIE DIE ANZAHL DER FELDER
n26.de getsafe.deUX Best Practices für Finanzanbieter
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
Quelle: https://www.formstack.com/blog/2015/industries-increase-conversion-rates/UX Best Practices für Finanzanbieter
#29 SCHAFFEN SIE VERTRAUEN: ERKLÄREN SIE, WARUM KUNDENDATEN NÖTIG SIND
n26.de clark.de getsafe.deUX Best Practices für Finanzanbieter
#30 VERMEIDEN SIE DROPDOWN-LISTEN BEI WENIGER ALS 3 OPTIONEN
VS.UX Best Practices für Finanzanbieter
RESEARCH: NUTZEN SIE DROPDOWNS ALS LETZTE MÖGLICHKEIT
Ihre Optionen:
Dies Das Jenes Etwas anderes Versuchen Sie Optionen anzuzeigen,
anstatt sie zu verstecken.
Ihre Optionen:
Option wählen
Dies
Das
Jenes
Etwas anderesUX Best Practices für Finanzanbieter
#31 VERMEIDEN SIE DROPDOWNS FÜR GEBURTSDATEN
VS.UX Best Practices für Finanzanbieter
#32 NUTZEN SIE NUMERISCHE EINGABEN FÜR GEBURTSDATEN
n26.de dkb.de verivox.deUX Best Practices für Finanzanbieter
#33 NUTZEN SIE DIE KORREKTE TASTATUR
VS.UX Best Practices für Finanzanbieter
#34 STELLEN SIE SICHER, DASS DER KORREKTE INPUT TYPE VERWENDET WIRD
Input type HTMLUX Best Practices für Finanzanbieter
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 filling
out mad libs.UX Best Practices für Finanzanbieter
Wer macht’s am besten?UX Best Practices für Finanzanbieter
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 KategorienUX Best Practices für Finanzanbieter Konversionsprozess - Getsafe
UX Best Practices für Finanzanbieter
Konversionsprozess - Getsafe (Fort.)
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 für Finanzanbieter
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 für Finanzanbieter
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
Seitennummerierung / SchrittanzeigeUX Best Practices für Finanzanbieter Vergleich - Check24
UX Best Practices für Finanzanbieter
Vergleich - Check24 (Fort.)
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 BereichUX Best Practices für Finanzanbieter
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 AnsichtUX Best Practices für Finanzanbieter
Alle UX Prinzipien auf einen Blick
1. STARTSEITE / LANDING 4. PRODUKTVERGLEICH / 6. FORMULAR
2. MENÜ & NAVIGATION 3. PRODUKTSEITE 5. KONVERSIONSPROZESS
PAGE PRICING OPTIMIERUNG
Klarer CTA im sichtbaren Menü kompakt auf einer Seite Klare, anschauliche CTA im Sortier-, Filterfunktionen und Werteversprechen in jeder Inline-Validierung und Autofill
Bereich („above the fold“) darstellen sichtbaren Bereich („above Eingrenzen von Phase des Funnels anzeigen. nutzen
the fold“) anbieten Produktoptionen anbieten.
Klares, Nutzen-orientiertes Dynamisches oder Wenn Anrufe wichtig sind, Anzahl der Felder reduzieren
Leistungsversprechen im ausklappbares Menü nutzen Lesbare Schriftgrößen und Vorteile von Produkten und Direktkontakt in jedem Schritt (Entfernung aller optionalen,
sichtbaren Bereich große Bedienflächen nutzen Preisen hervorheben (z.B. ermöglichen Nutzung von Adressen-APIs,
Wenn Anrufe wichtig sind: Beliebtestes Angebot) etc)
Priorisierung der wichtigsten Anruf-CTA in der Visuelle Icons, Überschriften Fortschritt/Pagination
CTA durch Farbe, Kontrast, Hauptnavigation anzeigen und Stichpunkte nutzen, um Konsistent gleiche Kategorien integrieren, um Nutzer zu leiten Erklären, warum spezifische
Größe das Überfliegen zu erleichtern anzeigen, um besser Daten benötigt werden, um
Support und After-Sales- vergleichen zu können Ausstiegsmöglichkeiten Vertrauen zu stärken
Bei mehreren Produkten/ Hinweise im Menü anzeigen Videos einsetzen, um Nutzer während der Konversion
Dienstleistungen: Wichtigste (Login) besser zu informieren Horizontales Scrollen vs. begrenzen Keine Dropdowns nutzen,
Kategorien und Angebote vertikales Swipen testen wenn weniger als 3 Optionen
prominent anzeigen, um Bei großen Webseiten ggf. Anschauliche CTA nutzen angezeigt werden
Navigation zu erleichtern eine interne Suche zum Menü Auf Darstellung bei
hinzufügen responsiven Webseiten Sicherheitsaspekten auf den Numerische Eingaben für
Social Proof nutzen achten Seiten aufzeigen Geburtstage nutzen anstatt
Die Suche durch Dropdowns.
Automatische Slider Autocomplete, Anzahl der Upsell während der Konversion
vermeiden. Besser: Nutzer- Ergebnisse und Filterfunktion Korrekte Tastatur anzeigen
initiiertes sliden ermöglichen vereinfachenUX Best Practices für Finanzanbieter
BENÖTIGEN SIE BERATUNG ZU UX &
CONVERSION OPTIMIERUNG?
Kontaktieren Sie uns: info@brainpath.de
Besuchen Sie unsere Webseite: brainpath.deVIELEN DANK!
Brainpath.deSie können auch lesen
