Benutzerfreundliche Microcopy-Texte
Part Three: So machst du deine Formulare benutzerfreundlicher
Nur noch einen Klick entfernt …
Formulare haben es in sich: User:innen sollen damit ohne Umwege eine Handlung ausführen können. Zwischen einer tollen Content-Strategie und den kleinen Buttons „Registrieren“, „Anmelden“ und „Kaufen“ liegen nur ein paar Felder, die ausgefüllt werden sollen. Und genau diese Felder frustrieren unter Umständen Kund:innen so sehr, dass sie im allerletzten Moment von deiner Website abspringen.
Wie schafft man es also Formulare so einzurichten, dass sie ansprechend sind, aufkommende Fragen beantworten und abgeschlossen werden? Neben einem attraktiven Design und der Funktionalität sind Microcopy-Texte die Antwort. Wir verraten dir, wie du deine Formulare damit besser aufbereiten kannst.
Check das UX Design!
Wenn du das Gefühl hast, dass du jeden Abschnitt deines Formularprozesses mit zeilenlangen Texten erklären musst, scheitert es möglichweise am UX Design. Hilfestellungen in Textform sollten das Design lediglich dort unterstützen, wo es zwingend notwendig ist. Zum Beispiel bei der Erstellung eines Passwortes oder der korrekten Schreibweise einer E-Mail-Adresse.
Eine Überarbeitung der Formularvorlage kann meist viele Unklarheiten beseitigen.
Statisch
Die Kurztexte sind für die User:innen von Anfang an sichtbar und verschwinden bis zum Absenden des Formulars auch nicht. Da sie die Übersichtlichkeit verringern, sollten sie nur für wichtige Informationen, die nicht verpasst werden dürfen, eingesetzt werden.
Dabei werden die assistierenden Textschnipsel so im Formular platziert, dass sie nicht übersehen werden können. Jedoch sollen sie auch die Übersichtlichkeit deiner Website so wenig wie möglich beeinträchtigen.
Einsatzmöglichkeiten:
- Entscheidende Hinweise, ohne die das Formular nicht erfolgreich abgesendet werden kann. Zum Beispiel Hinweise zur Datenschutzerklärung und zur AGB.
- Wichtige Informationen, die User:innen nicht übersehen sollten. Zum Beispiel der letzte Hinweis auf den bevorstehenden Abschluss einer kostenpflichtigen Bestellung.
Anzeige bei Bedarf
Die Hinweise erscheinen erst, wenn sie mit Absicht aufgerufen werden. Dazu eignen sich kleine Info-Buttons, die per Mouseover oder Mausklick ein kleines Fenster mit den entsprechenden Informationen öffnen. Hier kannst du längere Informationen verpacken, die andernfalls das Formular unübersichtlich machen würden.
Die Vorteile dieser Art der Anzeige liegen klar auf der Hand: Während Stammkund:innen das Formular rasch abschließen, stehen für Neukund:innen gegebenenfalls relevante Informationen zur Verfügung. So bleibt das Formular sowohl aufgeräumt und ansprechend als auch informativ. Ein Nachteil ist, dass diese Hinweise nicht sofort auffallen. Verwende diese Funktion also nicht, wenn es sich um unverzichtbare Informationen handelt!
Einsatzmöglichkeiten:
- Während einer Hotelzimmerbuchung, bei der Interessent:innen angeben können, ob sie privat oder geschäftlich reisen.
- Im Zuge einer Onlinebestellung, bei der Kund:innen im letzten Schritt auswählen müssen, ob die Rechnungsadresse von der Lieferadresse abweicht.
Automatische Anzeige
Im Gegensatz zu Hinweisen, die bei Bedarf aufgerufen werden, öffnen sich diese Hinweise automatisch, sobald User:innen Formularfelder auswählen. Diese Art von UX Writing bewährt sich vor allem bei längeren und komplizierteren Formularen oder Prozessen.
Ein Vorteil ist, dass diese Hinweise nicht übersehen werden können. Allerdings sollte diese Funktion nur bei Formularen eingesetzt werden, die ausschließlich einmalig ausgefüllt werden. Bei Handlungen, die User:innen öfter ausführen, kann das automatische Öffnen der Hinweise auf Dauer nerven. Zum Beispiel bei Bestellungen oder dem Versenden von Nachrichten als registrierte:r Benutzer:in.
Einsatzmöglichkeiten:
- Während einer Registrierung: Sobald das Feld für die Passwortvergabe angeklickt wird, öffnet sich ein Tooltip, das die Kriterien des Passworts aufzählt.
- Die Cookie-Bar, die sich beim erstmaligen Besuch einer Website automatisch öffnet.
Platzhalter
Diese nützlichen Hinweise befinden sich in den Formularfeldern und verschwinden automatisch, sobald die Felder befüllt werden. Sie erhöhen die Übersichtlichkeit des Formulars und begleiten deine Kund:innen Step by Step. Allerdings dürfen Platzhalter keine wichtigen Informationen enthalten, die ein:e User:in bei Bedarf nocheinmal aufrufen möchte.
Achte darauf, dass sich die Schriftfarbe der Platzhalter deutlich vom echten Text unterscheidet. Am besten eignet sich eine etwas hellere Farbe, als das Formularfeld selbst hat.
Einsatzmöglichkeiten:
- In einem Registrierungsformular: Platzhaltertexte für Vorname und Adresse könnten „Kim Mustername“ (genderneutral) und „Musterstraße 1“ lauten.
- Im Kontaktformular: Ein kleiner, freundlicher Anstoß, wie eine Nachricht an dein Unternehmen beginnen könnten. Damit hilfst du deinen User:innen außerdem, den richtigen Ton anzuschlagen. Zum Beispiel „Hallo liebes punkt-&-komma-Team, ich fände es super, wenn …“ oder „Sehr geehrtes Team von punkt & komma, ich möchte …“.