Die wichtigsten UX-Tipps für gute Website-Formulare
Eigentlich sollten Conversion-starke Formulare, oder zumindest leicht bedienbare Website-Formulare, mittlerweile gang und gäbe sein.
Sind sie aber nicht…
Dabei sind gute Formulare, die auch konvertieren, gar nicht so schwer zu erstellen und folgen eindeutigen UX-Prinzipien.
Nachfolgend gehe ich Best Practices und Tipps für gute Website-Formulare durch und zeige dir, worauf es ankommt.
Inhaltsverzeichnis
Einfachheit, Relevanz und Vertrauen in Website-Formularen
Website-Formulare sind die Eintrittskarte zur Kontaktaufnahme mit dir, daher solltest du sie nicht lieblos behandeln oder deinen Nutzenden unnötig Steine in den Weg legen.
Das Registrierungsformular von o2, für Forum-User, beantwortet mögliche relevante Fragen der Nutzenden:
- Worum geht es?
- Was habe ich davon?
- Welche Informationen muss ich übermitteln?
Aus der Praxis wissen wir, dass in Website-Formularen häufig kein echter Nutzen herausgearbeitet und kommuniziert wird.
Erzeugen deine Formulare Einfachheit, Relevanz und das nötige Vertrauen?
Beziehungsweise, wie kannst du mit deinen Website-Formularen diese Faktoren erreichen?
Offene Fragen sollten durch deine Kontaktformulare immer beantwortet werden. Prüfe auch die entsprechende Reihenfolge, also, zu welchem Zeitpunkt welche Informationen erscheinen sollten.
Bei dieser Optimierung helfen dir Usability-Tests, also qualitative Analysen, die gar nicht immer so kompliziert und umfangreich sein müssen – du bist hier schließlich bei RapidUsertests ? Für Tests von Website-Formularen reichen zum Beispiel meistens schon 5-Minuten-Tests.
Label-Design: Nachvollziehbare Anordnung und Ausrichtung von Feldern und Labels
Generell gilt, Label-Kennzeichnungen in Website-Formularen sollten:
- gut sichtbar sein
- nachvollziehbar, eindeutig und klar benannt sein
- eindeutig ihrem jeweiligen Feld zugeordnet sein
Inline Labels wirken moderner als Labels getrennt vom Feld. Wenn du Inline-Labels nutzt, solltest du aber darauf achten, dass der Text beim Klick nicht verschwindet, sondern sich verkleinert. Zudem solltest du die Barrierefreiheit berücksichtigen und sicherstellen, dass Screenreader die Texte erkennen können oder, dass Inhalte nicht zu klein oder kontrastarm gestaltet sind.
Oben angeordnete Labels sind für User schneller zu erfassen und können dadurch zügiger ausgefüllt werden. Außerdem sind oben angeordnete Labels in Website-Formularen gut für die Übertragung auf mobile Endgeräte.
Platzhalter-Texte innerhalb der Felder sollten am besten einen Beispieltext im erwarteten Format besitzen (z.B. „Luke Skywalker“, wenn das Feld „Vorname und Nachname“ ist).
Im folgenden Beispiel wurden zwar Platzhalter benutzt, jedoch scheinen die Felder maschinell übersetzt und auch der Intro-Text wirkt etwas holprig.
Wenn du Labels und Felder ausrichtest, sollten diese thematisch passend je Zeile sein (z.B. PLZ und Ort) und per Tabulator im richtigen Eingabe-Kontext umspringen.
Falls du längere Informationen abfragst, kann es platztechnisch auch Sinn ergeben, deine Felder links auszurichten und die Feld-Bezeichnungen entsprechend darüber anzuordnen oder mit Inline-Labels zu versehen.
Ansonsten gilt: Felder und Labels sollten in Website-Formularen untereinander und als linearer Ablauf gestaltet werden. Hier findest du weitere Gestaltungstipps für Input-Field-Labels aus unserem UX-Team.
[box] Tipp der UXperts: Hinterfrage die Anrede-Option. Musst du wirklich immer wissen, welche geschlechtliche Zugehörigkeit ein Mensch besitzt oder kannst du die Abfrage der Anrede einfach weglassen? Biete optional „keine Anrede“ vorausgewählt an.[/box]Nutze aussagekräftige Hinweistexte
Ist deine Validierung bzw. das Fehler-Feedback eindeutig und nachvollziehbar?
Und vermeidest du unnötige Stolpersteine bei der Eingabe?
In der obigen Abbildung siehst du, dass die geforderte Eingabe (gib deine Telefonnummer mit einem + ein) von einer ebenfalls gewohnten Eingabe abweicht (einfach die Nummer einzutragen). Hier könnte ein Hinweis zur geforderten Formulareingabe die Erfahrung verbessern.
Zusätzlich kannst du durch eine Inline-Validation die User motivieren und positiv zum Vertrauen beitragen bzw. Ihnen ein gutes Gefühl geben, keinen Fehler gemacht zu haben.
Beantwortest du auch konkret, was das Problem bei der Eingabe ist und wie es behoben werden kann?
Info-i, Hinweise und der Zugang zu Hilfe-Texten sollten grundsätzlich kontextsensitiv und direkt am Ort der Eingabe platziert werden.
Das Info-i kannst du um ein aussagekräftiges, möglichst spezifisches Label ergänzen und direkt am Ort der Eingabe platzieren. Außerdem solltest du darauf achten, dass es klar als interaktives Element gestaltet ist.
Warnhinweise, die unbedingt gelesen werden müssen, sollten in einem eigenen Schritt (z.B. über ein Pop-up) eingebunden werden.
Auf Desktop-Geräten können Hinweise auch automatisch als Tooltip bei Hover über das jeweilige Element angezeigt werden. Für mobile Geräte empfiehlt es sich, diese Hinweistexte permanent am Ort der Eingabe zu platzieren, bei langen Texten eingeklappt, mit der Option zum Ausklappen.
Behalte den Conversion-Flow im Auge: Autosuggest, Shortcuts & Mobile vs. Desktop
Betrachten wir Hinweistexte und das Ausfüllen von Kontaktformularen noch von einer anderen Ebene.
Auch, wenn du nur selten bei der Eingabe deines Website-Formulars dabei bist, jedes erfolgreich ausgefüllte Feld ist eine Mini-Conversion – ein Mini-Erfolg.
Passt der Flow deiner Datenabfrage mit dem Nutzendenziel zusammen und wie unterstützt du die Eingabe?
Falls du beispielsweise für die Passworteingabe eine bestimmte Formatvorgabe verwendest, kommuniziere sie vorher und eindeutig, statt nachträglich eine Fehlermeldung auszuspielen.
Sensible Daten sollten nur abgefragt werden, wenn sie wirklich notwendig sind. Auch hat sich gezeigt, dass eine Begründung zur Abfrage die Akzeptanz erhöht, z.B. „Wir brauchen deine Telefonnummer, um unseren gemeinsamen Termin zu bestätigen.“
[box] Tipp der UXperts: Das kurze Wort “Optional” wird häufig besser wahrgenommen als das noch kleinere “Sternchen”.[/box]Jetzt mal ehrlich: was würden wir mittlerweile ohne Auto-Fill oder Auto-Suggest-Shortcuts tun?
Autofill is King z.B. bei PLZ- und Ortseingaben. Und Auto-Suggest-Funktionen nach einer Suche auf der Lieblings-Plattform sorgen für bessere Erlebnisse.
Doch Autokorrekturen oder die automatische Eingabe, können Daten auch verfälschen und Conversions killen.
Achte vor allem darauf, dass die Daten in den jeweiligen Feldern platziert werden. Viele Formulare trennen beim Autofill nur schwerlich Adressen und Hausnummern oder setzen Informationen in den falschen Feldern ein. Untersuche daher auch die technische Seite und das Eingabeverhalten beim Autofill.
Wechsle beispielsweise mobile sinnvoll zwischen den Tastaturen (z.B. Telefonnummer, E-Mail-Eingabe etc.), um die User Experience zu verbessern.
Auch Dropdowns sollten mittels Tastatur auf Desktop-Geräten ansteuerbar sein.
Analysiere, wo du Shortcuts nutzen kannst, aber prüfe die Belastbarkeit. Oder sieh dir diese 7 Tipps für nutzerfreundliches Auto-Suggest an.
Teste deine Formulare und finde versteckte Conversion-Hebel
Wie du gesehen hast, gibt es viele Wege, Website-Formulare besser zu gestalten. Aber es existieren auch einige Stolperfallen. Schließlich steckt hinter jeder Kontaktaufnahme eine potenzielle Chance für dein Business, warum also mögliche Anfragen und Conversions verbrennen?
Untersuche daher die unterschiedliche Bedienung auf mobilen und Desktop-Geräten.
Egal ob erstmal im Team, im kleinen Kreis, durch einen Crowd-UX-Test oder einen Usability-Schnelltest.
Sicherlich stolperst du über ungenutztes Potenzial, wenn du einfach testest oder nachfragst.
Prüfe vielleicht direkt, ob auch Leerzeichen erkannt werden. In dem obigen Beispiel warte ich nämlich noch heute auf die Registrierungs-Mail ?
Hinweis: Deinen ersten Usability-Test zur Formular-Optimierung kannst du hier ganz einfach anlegen.
Website-Formular gestalten oder testen: What’s next?
Falls du ein neues Formular entwerfen möchtest, sammle zuerst die nötigen Felder und Informationen. Auch der Sketch auf dem Blatt Papier, also eine kleine Prototyping-Session sind bewährt, um gute Website-Formulare zu erstellen.
Falls du bereits Formulare im Einsatz hast oder bei der Gestaltung noch unsicher bist, hilft dir vielleicht folgende Liste, die alle wesentlichen Punkte nochmal zusammenfasst.
Checkliste: Wichtige Fragen zur Optimierung von Website-Formularen
- Hast du jedes Formular nach der Notwendigkeit beurteilt – ist das Website-Formular relevant für dein Business?
- Erzeugt das Formular für User Nutzen und Relevanz?
- Ist das Website-Formular einfach zu verstehen und zu bedienen?
- Existiert eine deutliche Trennung zwischen notwendigen und optionalen Feldern?
- Funktionieren Labels erwartungskonform?
- Können Einfach- und Mehrfachauswahl leicht vollzogen werden?
- Wurden unnötige Spalten vermieden und wird nur eine Information pro Zeile abgefragt?
- Ist die Datumsauswahl einfach zu bedienen?
- Helfen sämtliche Fehlermeldungen den Nutzenden höflich weiter?
- Ermöglichen Hinweistexte frühzeitig ein richtiges Ausfüllen?
- Trennt das Kontaktformular deutlich zwischen primären und sekundären Aktionen (z.B. Checkout-Flow)?
UX-Designerin bei RapidUsertests – Ari ist im Produkt-Team von RapidUsertests für die Konzeption und Optimierung von verschiedenen Features verantwortlich, unter anderem für die Live-Sessions. Außerdem ist sie unsere Ansprechpartnerin für Voice User Interfaces.
