• what is unbounce
  • KATEGORIE

    Digital Marketing Kickoff 2017

    7 Tipps zur Optimierung von mobilen Formularen (+ Tools, um UX-Probleme auf Smartphones zu ermitteln)

     

    Erfahre, wie Du mit Formularoptimierungen auf mobilen Endgeräten mehr Conversions aus Deinem Traffic holst und zufriedene Nutzer hinterlässt. Bild: Unsplash
    Psst: In diesem Beitrag geben Dir die UX-Professionals Nina Bordet und Lotte Larsen von mindberry Consulting zahlreiche User Insights, um die Conversion Deiner Mobile Visitors zu optimieren und Web-Umsätze zu steigern. Viel Spaß beim Lesen!

    Du hast Dein Telefon in der Hand, bist bereit eine Bestellung zu machen, aber mitten im Checkout gibst Du auf…

    Kommt Dir das bekannt vor?

    Bei Usability-Tests beobachten wir regelmäßig, dass mobile Formulare die Käufer so frustrieren, dass sie – selbst im letzten Schritt der Bestellung – eine Seite kurz vor dem eigentlichen Ziel abspringen.

    Formulare sind oft „das letzte Stück“ Deines Conversion-Trichters.

    In diesem Beitrag zeigen wir Dir einige der häufigsten Gründe sowie Nutzereinwände, warum Käufer Deine Seite verlassen, wenn das Formular nicht ordentlich optimiert wurde.

    Zusätzlich geben wir Tipps, wie diese Conversion-Hindernisse in Formularen entfernt werden können.

    Verbessere die Usability & Conversion Rate auf mobilen Geräten, indem du diese 7 häufigen Hindernisse beseitigst

    Nutzereinwand #1: „Ups, was sollte ich hier eigentlich eingeben?“

    Zur Beschriftung von Formularfeldern werden Labels verwendet.

    Bei mobilen Apps und Webseiten sind Labels, die in Formularfeldern platziert werden, weit verbreitet. Diese sogenannten „Inline Labels“ verschwinden, wenn der Nutzer mit der Eingabe in das Feld beginnt und verursachen dadurch oft Frustration.

    Denn auch schon bei ganz simplen Anmelde-Formularen kann es passieren, dass man sich nicht erinnert, was man eigentlich eingeben sollte.

    Mobile-Formulare-UX-Inline-Labels-unbounce-mindberry

    Benutzer vergessen manchmal, welche Eingabe von ihnen verlangt wurde und sind genervt, wenn sie nicht einfach überprüfen können, ob sie das Feld richtig ausgefüllt haben.

    Floating-Labels können eine Lösung sein, um dieses Problem zu beseitigen. Solche Labels sind Dir bestimmt schon einmal untergekommen, Google setzt sie zum Beispiel bei der Anmeldung zu Google Apps ein.

    Hier sind zwei Beispiele für Floating-Labels in E-Commerce-Checkouts:

    In dem Beispiel auf der linken Seite bewegt sich das Label bei der Eingabe im Feld nach oben. Im Beispiel rechts schwebt es nach oben und bleibt oberhalb des Feldes sichtbar, damit Deine Nutzer immer wissen, was sie machen sollen.

    Nutzereinwand #2: „Hmm, wo ist das @-Zeichen?“

    Stell Dir vor, Du möchtest eine E-Mail-Adresse eingeben. Welche Tastatur würdest Du bevorzugen?

    Links oder rechts?

    Eigentlich eine einfache Antwort 😉

    mobile-form-ux-email-fail-mindberry-unbounce

    Die linke Tastatur besitzt kein @-Zeichen und der Nutzer muss erst die Tastaturansicht umschalten, um eine E-Mail-Adresse eingeben zu können. Bei der für die E-Mail-Eingabe optimierten Tastaturansicht ist das @-Zeichen gleich verfügbar und kein lästiges Umschalten nötig.

    Auf einem mobilen Gerät ist die Eingabe nicht immer einfach, da nicht alle Tasten gleichzeitig auf der Tastatur angezeigt werden. Hier werden häufig Conversion-Potenziale wegen schlechter Nutzerführung verschenkt.

    Es sind viele verschiedene Tastaturansichten verfügbar und jede ist für bestimmte Aufgaben optimiert. So kannst Du vermeiden, dass Deine Besucher ständig die Tastatur wechseln müssen, um alle relevanten Buchstaben, Zahlen, Satz- oder Sonderzeichen zu finden.

    Um die richtige Tastaturansicht für das jeweilige Eingabefeld zu triggern, muss Dein Entwickler das passende type-Attribut wählen.

    Überraschend viele Formulare haben alle ihre Felder auf „Text“ eingestellt, was zu einem schlechten Nutzererlebnis führt.

    Wenn Du HTML5 verwendest, stelle unbedingt sicher, dass die Feldattribute korrekt definiert sind, damit auf mobilen Geräten die jeweils relevante Tastatur auf dem Bildschirm angezeigt wird.

    Nutzereinwand #3: „Ich hasse es, auf meinem Handy zu tippen!“

    Texteingabe auf Smartphones ist schlicht und einfach mühsam.

    Schreiben auf mobilen Geräten ist schwer
    Bild: Giphy

    Wann immer es möglich ist, solltest Du den Schreibaufwand für Deine Nutzer so gering wie möglich halten.

    Hier zeigen wir ein paar clevere Beispiele als Anregung, wie die Eingabe von Text in Formularen eingeschränkt werden kann.

    Beispiel 1: Vorausgefüllte Felder & häufige Suchabfragen

    mobile-form-ux-best-practices-mindberry-unbounce
    Auf booking.com kann die „Umgebungssuche für heute“ ganz ohne mühsames Tippen gestartet werden. Weder Ort noch Datum müssen eingegeben werden.

    Wer bei booking.com nach Unterkünften in der Nähe seines aktuellen Standorts suchen möchte, muss keinen einzigen Buchstaben eingeben. Anstelle eines leeren Feldes ist diese Option vorausgewählt.

    Für die noch bequemeren Menschen unter uns, gibt es ganz unten die Möglichkeit, eine „Umgebungssuche für heute“ durchzuführen. Jene Nutzer, auf die das zutrifft, erhalten so relevante Ergebnisse, ohne einen einzigen Buchstaben tippen zu müssen.

    Eine weitere Erleichterung wird dadurch geboten, dass die gängigsten Auswahlmöglichkeiten, etwa „2 Erwachsene“, vorausgewählt sind, so dass die meisten Benutzer diesbezüglich keine Eingabe machen müssen.

    Beispiel 2: Suchvorschläge

    Autocomplete-Widgets bieten während dem Eintippen von Suchanfragen die gängigsten Suchvorschläge an. Das erspart Besuchern weiteres Tippen und unterstützt sie dabei, schnell den passenden Begriff unter den vorgeschlagenen Suchbegriffen zu wählen.

    mobile-forms-formulare-autocomplete-best-practices-mindberry-unbounce
    Suchvorschläge auf airbnb.com

    Beispiel 3: Merkfunktion für frühere Einträge und Suchbegriffe

    In bestimmten Anwendungsfällen kann es sinnvoll sein, alte Suchanfragen als Suchoptionen anzuzeigen.

    Hier ist ein Beispiel von austrian.com, in dem meine vorherigen Einträge für den Abfahrtsort/Abflugsort gespeichert wurden.

    mobile-forms-formulare-auto-suggest-save-best-practices-mindberry-unbounce
    Austrian.com speichert frühere Einträge, um Benutzern die Suche für den selben Abflugsort zu erleichtern.

    Beispiel 4: Vorausgefülltes Länderfeld

    In vielen Fällen ist es sinnvoll, den Standort Deiner Besucher zu erkennen und vorauszuwählen, um zusätzliche Eingaben zu ersparen.

    mobile-forms-formulare-geo-targeting-best-practices-mindberry-unbounce
    Jcrew.com wählt das Land basierend auf dem für den Benutzer erkannten Standort aus.

    Nutzereinwand #4: „Dieses Formular hat kein Ende!“

    Lange Formulare können Deine Nutzer abschrecken – besonders auf mobilen Geräten.

    Es ist daher meist sinnvoll, die Felder auf die erforderliche Mindestanzahl zu reduzieren.

    Hier ist ein schönes Beispiel von aircanda.com, in dem die Anzahl der Felder clever minimiert wurde, ohne notwendige Optionen zu entfernen.

    Die Mehrheit der Passagiere reist ohne Kinder, daher werden die zusätzlichen Optionen für Kinder nur angezeigt, wenn der Nutzer auf das Dropdown-Menü klickt, um die Anzahl der Passagiere zu erhöhen.

    mobile-forms-formulare-vorauswahl-best-practices-mindberry-unbounce
    Zusätzliche Auswahlmöglichkeiten werden nur angezeigt, wenn sie notwendig sind. Sie erscheinen erst dann, wenn mehr als ein Passagier ausgewählt wird.

    Nutzereinwand #5: „Gutscheincode? Habe ich nicht!“

    Wir haben in vielen Nutzertests festgestellt, dass das Feld für den Gutscheincode im Checkout häufig große Frustration verursacht.

    Manchmal ist es geradezu eine Aufforderung an Nutzer, die Seite zu verlassen, um nach Codes zu suchen, anstatt auf den „Kaufen-Button“ zu klicken.

    Sobald Besucher ohne Promocodes das Eingabefeld bemerken, äußern sie sich typischerweise enttäuscht: „Gutscheincode? Habe ich keinen!“

    mobile-forms-formulare-gutscheincode-best-practices-mindberry-unbounce
    Das Feld im Checkout von eCommerce-Shops, in dem Käufer Gutscheincodes (auch Promo- oder Rabattcodes genannt) eingeben können – vorausgesetzt, sie haben einen – führt oft zu Frustration und kann sogar zum Verlassen des Checkouts führen.

    Vielleicht ging es Dir schon einmal ähnlich?

    Du bekommst ein ungutes Gefühl und fragst dich vielleicht: Bekomme ich den besten Deal?

    In Deinem Kopf wird ein Gefühl des relativen Verlusts erzeugt: „Es geht also noch billiger. Andere, die einen Gutscheinode haben, bekommen es billiger als ich.“

    Für viele ist das Eingabefeld für Promocodes ein Anstoß, um nach Codes und besseren Angeboten auf anderen Seiten zu suchen, anstatt auf den Kaufen-Button zu klicken. Sie verlassen die Webseite oder vertagen die Kaufentscheidung.

    Es gibt verschiedene Taktiken um diesem Phänomen zu begegnen. Sieh Dir am besten unseren Beitrag „Gutscheincode? Habe ich nicht!” – Wie ein Feld im Checkout Conversions ruiniert, an und optimiere Deine Conversion im Checkout.

    Nutzereinwand #6: „Komm schon! Was wollen die von mir?!“

    Deine potentiellen Kunden in Usability-Tests dabei zu beobachten, wie sie sich für ein Konto registrieren kann manchmal schmerzhaft und lustig zugleich sein.

    In der Regel benötigen sie mehrere Versuche, bevor sie ein Passwort eingeben, das auch tatsächlich von der Seite akzeptiert wird. Denn meistens erscheint eine Fehlernachricht mit den Informationen über die Passwortvoraussetzungen erst, nachdem das Passwort abgeschickt wurde.

    MailChimp teilt den Benutzern sofort mit, welche Arten von Zeichen oder Zahlen fehlen; Sobald Benutzer beginnen ihr Passwort einzugeben, sehen sie, was noch fehlt, um sich für die Passwortanforderungen zu qualifizieren.

    mobile-forms-formulare-passwort -eingeben-best-practices-mindberry-unbounce
    In einem dynamischen Hilfebereich erfahren Nutzer, welche Passwortanforderungen sie bereits erfüllen und welche Elemente sie noch in ihr Passwort aufnehmen müssen

    Nutzereinwand #7: „Das ist mir zu mühsam…“

    Komplizierte Registrierungsformulare sind zeitraubend und entnervend, aber auch simple Anmeldeformulare können auf mobilen Geräten mühsam sein und Nutzer davon abbringen, sich anzumelden.

    Alternative Anmelde- oder Registriermöglichkeiten über Facebook, Google, Twitter oder PayPal können das Leben Deiner Nutzer vereinfachen.

    mobile-forms-formulare-ausfüllen -best-practices-mindberry-unbounce
    Ocado bietet Nutzern die Möglichkeit, sich über PayPal und Facebook anzumelden.

    Gleiches gilt für das Ausfüllen von Zahlungsinformationen: Einfache Alternativen wie PayPal und Amazon Pay ersparen Deinen Nutzern die zeitraubende Eingabe von Rechnungsadresse und Kreditkartendaten.

    mobile-forms-formulare-zahlungsbedingungen -best-practices-mindberry-unbounce
    Die Washington Post bietet andere Zahlungsmethoden als Kreditkartenzahlungen an, bei denen weniger Dateneingabe erforderlich ist.

    Hilfreiche Tools, um Hindernisse bei mobilen Formularen aufzudecken

    Wie finden wir heraus, welche Elemente eines Formulars optimiert werden müssen?

    Wir kombinieren dafür gerne Erkenntnisse aus verschiedenen Tools wie beispielsweise:

    Heatmaps

    Heatmaps visualisieren Hotspots auf einer Seite, indem sie uns zeigen, wo Nutzer klicken oder tippen, und wie weit sie auf einer Seite hinunterscrollen. Nicht nur für Heatmaps verwenden wir häufig das Tool Hotjar. Das Tool lohnt sich für gleich mehrere Analysen, wie Du nachfolgend lesen wirst.

    Formularanalyse

    Formularanalyse-Tools wie Hotjar helfen Dir Deine Formular-Abschlussraten zu verbessern. Mit ihrer Hilfe finden wir auch in unseren Tests heraus, welche Felder verwirrend sind oder Probleme verursachen.

    Beispielsweise können wir erkennen, welche Felder viel Zeit in Anspruch nehmen oder nicht ausgefüllt werden.

    Zusätzlich können wir damit ermitteln, an welcher Stelle die Besucher ein Formular vorzeitig verlassen.

    Videoaufzeichnungen von Besuchern

    Durch die Aufzeichnung von Nutzern können wir das tatsächliche Besucherverhalten auf einer Website beobachten.

    Wir sehen, wo Besucher auf ihren Telefonen hin tippen, und können so Usability-Probleme identifizieren.

    Mithilfe der Filteroptionen können wir Videos auswählen, die von besonderem Interesse sind, z.B. Aufnahmen von Besuchern auf bestimmten Geräten. Dies ist besonders hilfreich, wenn man die Benutzerfreundlichkeit von Formularen auf einer Vielzahl von mobilen Geräten mit unterschiedlichen Betriebssystemen, Größen und Browsern beobachten will. Hierfür verwenden wir gerne das gleiche Tool wie für Heatmaps: Hotjar.

    User-Tests

    Für Remote-Usability-Tests mit Testteilnehmern aus einem dedizierten User-Panel verwenden wir gerne Plattformen wie usertesting.comwhatusersdo.com oder den deutschen Anbieter rapidusertests.com.

    Für Remote-Usability-Tests mit selber rekrutierten Testteilnehmern verwenden wir gerne Lookback. Es ist das erste Tool, das wir gefunden haben, das gut für die Aufzeichnung von Remote-Benutzererfahrungen auf mobilen Geräten funktioniert. Es ermöglicht uns, Kommentare zu hören, die Bildschirme, Gesichter und Berührungen von Nutzern zu sehen und Nutzer-Recherche in Echtzeit mit Nutzern auf der ganzen Welt durchzuführen.

    Fazit – teste es einfach

    Formulare sind oft der letzte Schritt im Conversion-Trichter.

    Deshalb ist es doppelt schmerzhaft, potentielle Kunden zu verlieren, die so weit gekommen sind. Unsere Beispiele geben vielleicht Anregungen zur Optimierung von Formularen auf Deiner eigenen Seite. Bitte dabei aber nicht vergessen, dass Websites kontextbezogen sind. Nur weil etwas als „Best Practice“ gilt, bedeutet dies nicht automatisch, dass es die optimale Lösung für Deine eigene Webseite und Nutzer ist.

    Es zahlt sich aus, Nutzerforschung und Tests auf der eigenen Website durchzuführen. Am besten einfach eines oder zwei der oben genannten Tools auswählen – und Du wirst bestimmt im Handumdrehen erste Optimierungsideen bekommen.

    Hier findest Du zusätzlich noch 10 kritische Fragen, die Du dir stellen kannst, wenn Deine Conversion Rate im Keller ist sowie 4 Tipps für eine bessere Mobile Experience bei Instagram Kampagnen.

    Welche Tools verwendest Du, um UX-Probleme auf mobilen Geräten zu entdecken? Wir freuen uns auf Deinen Kommentar.

    – Nina & Lotte


    Über Lotte Larsen
    Lotte Larsen hat zusammen mit Nina Bordet mindberry gegründet. Nach ihrer Zeit bei eBay nutzen die beiden ihre Leidenschaft für zahlenbasierte Conversion-Optimierung, um Webseiten von Unternehmen weltweit benutzerfreundlicher und profitabler zu machen. Ihre Erfahrung in der Conversion-Rate-Optimierung teilen die beiden auch in ihrem Blog und auf Twitter.
    » Mehr Blog Posts von Lotte Larsen