Füllen Sie gerne Formulare aus? Wahrscheinlich eher nicht. Es ist nicht das, was wir gerne tun. Man möchte nur ein Ticket kaufen, ein Hotelzimmer buchen, einen Einkauf tätigen und so weiter aber das Ausfüllen eines Formulars ist ein notwendiges Übel, mit dem man sich befassen muss. Wir zeigen Ihnen, wie Sie Ihr Formular gestalten sollten und dabei UX Gesichtspunkte berücksichtigen. Was beeinflusst die Einstellung einer Person zum Absenden eines Formulars?

  • Es könnte zeitaufwendig sein.
  • Komplizierte Formulare sind oft schwer zu verstehen (oder Sie haben einfach keine Lust, sie auszufüllen).
  • Das Formular fragt nach persönlichen Informationen, die Sie nicht teilen möchten: Kreditkartendetails, Handynummer, Privatadresse usw.

Im Folgenden versuchen wir, die häufigsten Fragen rund um die Formularerstellung zu beantworten.

Formular gestalten mit zweispaltigem Layout?

Eye-Tracking-Studien haben gezeigt, dass einspaltige Formen besser sind als mehrspaltige. Warum? Die Art und Weise, wie wir auf einer Website nach unten scrollen, ähnelt der Art und Weise, wie wir ein Formular ausfüllen: von oben nach unten gehen und sich dabei auf den Inhalt konzentrieren. Ein Formular mit parallelen Spalten kann Benutzer leicht in die Irre führen und sie ablenken. Um Benutzer im Fluss zu halten und die vertikale Ausrichtung nicht zu unterbrechen, platzieren Sie Felder untereinander in einer Spalte. Sicher, jede Regel hat ihre Ausnahmen. Wie wir im Beispiel sehen, können kurze oder logisch zusammenhängende Felder (Handynummer, Stadt-, Landes- und Ortsvorwahl) in einer Linie angeordnet werden.

Wenn das Formular eine komplizierte Struktur aufweist (z. B. die Checkout-Phase in einem Online-Shop oder die Registrierungsphase in einer Kredit-Plattform), kann es visuell in semantische Gruppen unterteilt werden, wobei zwischen ihnen Weissraum oder Zwischen Headlines hinzugefügt werden. Dies gibt den Benutzern das Gefühl, durch das Formular Fortschritte zu machen, ohne sich überfordert zu fühlen.

Wo sollten Labels platziert werden?

Beschriftungen teilen den Benutzern mit, welche Informationen in einem bestimmten Formularfeld enthalten sind. Diese befinden sich normalerweise außerhalb des Formularfelds. In letzter Zeit gab es nur zwei Varianten für die Platzierung von Labels: über den Feldern und linksbündig. Vor einiger Zeit erschien eine Alternative beim Formular gestalten: Designer begannen, Formen zu animieren und Etiketten in Platzhaltern zu verstecken.

LABELS ÜBER DEN FELDERN

Dies ist die gängigste Platzierung und, wie von Google UX Research bestätigt, aus gutem Grund. Es passt sich besser an die Smartphone-Größen an, was für das responsive Markup unerlässlich ist.

LINKSBÜNDIGE PLATZIERUNG

Linksbündig ausgerichtete Beschriftungen erhalten mehr Aufmerksamkeit. Außerdem wird das Kontaktformular vertikal weniger Platz einnehmen. Aber bedenken Sie, dass ein solcher Ansatz nur für Desktop-Ansichten funktioniert. Für Mobilgeräte ist die Größe ein Problem (der Bildschirm ist zu schmal für eine links platzierte Beschriftung und ein Feld). Dies könnte Probleme für Benutzer verursachen.

PLATZIERUNG VON ETIKETTEN IN FELDERN

Interaktive Labels, die innerhalb des Feldes platziert werden, werden bei den UX-Designern immer beliebter, da sie vor dem Ausfüllen gescannt werden können. Die Animation kann unterschiedlich sein, aber der Prozess ist der gleiche: Nach dem Klicken auf das Feld mit dem Label-Platzhalter verschwindet das Label nicht, bewegt sich jedoch an den Kopf des Feldes und gibt dem Benutzer die Möglichkeit, die Daten einzugeben.

Die Vorteile dieses Ansatzes liegen auf der Hand: Es spart Platz und die Animation ist für den Benutzer verständlich. Aber Animation in Formularen ist nicht immer die beste Lösung. Es hängt vom Kontext der Form ab. Wenn Sie an einem Formular mit sehr wenigen Feldern (einem Login- oder Newsletter-Feld) arbeiten, sind die oben ausgerichteten Labels nicht so notwendig, da nicht viele Informationen vom Benutzer abgerufen werden müssen. Es funktioniert besser bei komplexen Formen mit mehreren Abschnitten. Trotz der Vorteile dieser Methode, denken Sie auch daran, wie eine Drop-Down-Auswahl aussehen wird und die Animation passt.

Nichtsdestotrotz gewinnen interaktive Etiketten-Platzhalter vor den statischen. Wenn das Feld angeklickt wird, bewegt sich das Label nach oben, bleibt sichtbar, während das statische verschwindet.

Können wir Platzhaltertext anstelle eines Labels verwenden?

Es gibt viele Möglichkeiten, Hinweise zu geben. Eine davon ist eine übliche Implementierung von Anweisungen in Formularfeldern. Leider zeigt das Testen von Benutzern immer wieder, dass Platzhalter in Formularfeldern die Benutzerfreundlichkeit häufig beeinträchtigen. Sie können den Prozess des Ausfüllens eines Formulars erschweren, besonders wenn die Form aus mehr als einem Dutzend Feldern besteht. Verschwundener Platzhaltertext belastet das Kurzzeitgedächtnis der Benutzer. Es macht es für Menschen schwierig, sich zu erinnern, welche Informationen in ein Feld gehören, und nach Fehlern zu suchen und diese zu beheben. Es bringt auch eine zusätzliche Belastung für Benutzer mit visuellen und kognitiven Beeinträchtigungen.

Wie wir gesehen haben, besteht die Schwierigkeit darin, den Platzhaltertext außer Sichtweite zu halten, wenn der Benutzer auf das Feld klickt. Ohne Labels kann der Benutzer seine Arbeit nicht überprüfen, bevor er das Formular absendet. Sie könnten leicht vergessen, welche Daten sie im aktuellen Feld ausfüllen müssen und ob die vorherigen fehlerfrei sind. Der Benutzer müsste den Platzhaltertext aufdecken, indem er den Text in jedem Feld einzeln löscht, um zu überprüfen, ob seine Eingabe der Beschreibung entspricht.

Ein solcher Ansatz wäre auch für Benutzer nicht angenehm, die sich durch Drücken der Tab-Taste zwischen Feldern bewegen. Sie werden sich nicht daran gewöhnen, die Daten im nächsten Feld zu analysieren, bevor sie zu ihm wechseln. Platzhaltertext, der verschwindet, wenn der Cursor im Formularfeld platziert wird, irritiert Benutzer, die mit der Tastatur navigieren.

Trotz der Nachteile gibt es Fälle, in denen die Verwendung eines Labels als Platzhalter durchaus angebracht ist. Zum Beispiel könnten wir für ein Newsletter-Abonnement nur das eine Feld „Email“ ausfüllen.

Wie man den mentalen Aufwand eines Formulares verringert

ABSTAND HALTEN

Ein Label und sein Feld sollten visuell gruppiert sein, um Benutzer nicht zu verwirren. Es muss klar sein, welches Etikett zu welchem Feld gehört. Aufgepasst bei den Abständen, damit die Zuordnung der Feldbezeichnungen klar erkennbar ist.

AUTO-FOCUS AUF DAS ERSTE EINGABEFELD

Die Autofokussierung führt den Benutzer zum Anfangspunkt des Formulars. Wir empfehlen, das erste Feld mit einer Randfarbe, Hintergrundfarbe oder beidem zu betonen. So beschleunigen Sie die Registrierung oder den Kauf.

GROSSBUCHSTABEN ALS LABEL VERMEIDEN

Großgeschriebene Buchstaben als Labels sind schwer zu lesen. Außerdem MÖCHTE NIEMAND GERNE ANGESCHRIEN WERDEN!

Werden Buttons als Teil der UX eines Formulars betrachtet?

Ein Button soll Benutzer dazu bringen, eine Aktion auszuführen. Deshalb sollte beim Button-Design immer auf Erkennbarkeit und Klarheit geachtet werden. Stellen Sie sich Ihre Website oder App als Teil einer Unterhaltung vor, die von einem vielbeschäftigten User gestartet wurde. Der Button spielt eine entscheidende Rolle in diesem Gespräch.

DER BUTTON SOLLTE DIE MASSNAHME ERKLÄREN

Ein gutes Dialogfeld besteht nicht nur darin, die Benutzer zu fragen, welche Aktion ausgeführt werden soll. Es geht auch darum, jede Option so klar wie möglich zu machen. Deshalb ist es so wichtig, für jede Option eine eigene Kennzeichnung zu haben, die als „Just-in-Time“-Hilfe dient und den Benutzern mehr Sicherheit bei der Auswahl der richtigen Aktion gibt.

Benennen Sie die Schaltfläche, um zu erklären, was sie tut, anstatt eine generische Bezeichnung (wie „OK“) zu verwenden. Verwenden Sie wann immer möglich ein Verb anstelle von „Ja“ oder „OK“, damit Ihre Schaltflächen außerhalb des erklärenden Texts oder Titels Sinn ergeben. Beachten Sie, dass Ihr CTA die Absicht des Benutzers widerspiegeln sollte. Wenn es Registrierung ist, dann benennen Sie den Button „Registrieren“.

HERGVORHEBEN VON PRIMÄREN CTAs

Die primäre Aktion, die mit einem Formular verbunden ist, muss ein stärkeres visuelles Gewicht tragen. Sekundäre Aktionen sollten das geringste visuelle Gewicht haben, um das Fehlerrisiko zu minimieren.

BUTTONS GESTALTEN

Aktivieren Sie den Button erst, wenn alle Formularfelder ausgefüllt sind. Dies kann eine großartige Lösung sein, um dem Benutzer beim Überprüfen seiner Daten vor dem Senden zu helfen.

Ist es möglich, das Ausfüllen eines Formulares zu erleichtern?

AUTO-FILL HINZUFÜGEN

Die Automatisierung der Benutzereingabe verhindert Fehler, indem die Anzahl der Felder, die sie ausfüllen müssen, verringert werden. Laut der Google-Studie hilft Auto-Filling auch, Formulare 30% schneller auszufüllen. Wenn der Nutzer bereits bei Ihrem Service registriert ist, füllen Sie seine Daten in den relevanten Feldern beim Check-out automatisch aus. Beachten Sie außerdem, dass Sie Stadt- und Regionstextfelder basierend auf der Postleitzahl oder den Geolocation-Daten automatisch ausfüllen können. Vergessen Sie nicht, diese Felder zur Bearbeitung verfügbar zu lassen, um den Benutzern die Kontrolle zu geben.

MASKIERTE EINGABEFELDER

Dies ist ein Plugin, das ein Feld automatisch formatiert. Solch eine Lösung passt gut zu Daten, Zeiten, Mobilfunknummern und mehr. Dieses Plugin erleichtert das Ausfüllen eines Formulars.

SEI ERFINDERISCH

Verwenden Sie zum Beispiel die Feldlänge als Hinweis für die Antwort. Dies ist sinnvoll für Felder mit einer begrenzten Anzahl von Zeichen, wie z. B. das Mobiltelefonfeld, die Adresse und die Postleitzahl.

VERMEIDEN SIE DROPDOWN BUTTONS MIT NUR 2 ODER 3 OPTIONEN

Bei nur wenigen Optionen sind Radiobuttons die bessere Variante, um Ihre Nachricht schnell zu vermitteln und den Benutzer nicht zu verlangsamen. Alles ist sofort klar ohne zusätzliche Klicks.

FORMULARE VALIDIEREN

Eine rechtzeitige Eingabevalidierung ist entscheidend. Heben Sie diejenigen Felder hervor, in denen Fehler gefunden wurden, und erklären Sie, warum das Feld nicht validiert wurde.

Erläutern Sie auch alle Anforderungen für die Daten und ihr Format. Wenn das Passwort eines Benutzers sechs Zeichen enthalten muss, erwähnen Sie dies. Lassen Sie die Nutzer nicht raten. Machen Sie den Prozess handlich und verständlich.

KOMFORT HINZUFÜGEN

Dies könnte eine Passwortvorschau oder eine andere Gelegenheit für Benutzer sein, die Daten vor dem Senden zu überprüfen. Wenn Ihr Service besondere Anforderungen an Kennwörter stellt, benachrichtigen Sie die Benutzer darüber, bevor sie das Feld ausfüllen sollen.

Übrigens wird der Benutzer beim Ausfüllen des Passwortfeldes ziemlich oft mit einem bekannten Problem konfrontiert: der Feststelltaste. Wir empfehlen Ihnen, Benutzer über eine gedrückte Feststelltaste zu informieren, um einen Absprung beim Formular sowie eine negative Reaktion auf Ihre Website zu verhindern.

LOGIN ÜBER SOCIAL MEDIA ERMÖGLICHEN

Social Sign-in könnte ein wirklich mächtiges Werkzeug sein; Es spart den Benutzern viel Zeit. Wenn Sie Ihr Formular gestalten und eine schnelle Registrierung über soziale Medien anbieten, vergessen Sie nicht, den Kunden die Sicherheit ihrer Social-Media-Daten zu versichern und genau zu erklären, welche Informationen Sie benötigen. Informieren Sie die Benutzer darüber, dass Sie ihre Daten nicht ohne Erlaubnis verwenden werden. Um das Sicherheitsgefühl zu verstärken, können Sie ein Schlosssymbol hinzufügen.

Hat der Standort des Benutzers Einfluss auf die UX eines Formulars?

Ja, machen Sie sich lokale Unterschiede bewusst. Wenn ein Service für zwei oder mehr lokale Märkte (wie die USA, Europa und Asien) konzipiert ist, sollten Sie auf die Unterschiede zwischen ihnen achten. Es sollte keine Überraschung sein, dass Namen von Feldern, Hinweisen, Eingaben und mehr je nach Region variieren.

Hier sind einige Dinge, auf die Sie achten sollten:

  • Jedes Land hat sein eigenes Zahlenformat, weshalb auch Eingabemasken variieren sollten.
  • Die USA sagt ZIP Code, während es in Europa die Postleitzahl ist.
  • Das Feld „Staat“ wird nur in den USA benötigt.

Fazit

Wie wir sehen können, ist das Entwerfen einer guten Anmeldeform schwierig. UX Design ist wichtig. Um UX zu verbessern, muss sich der Designer in die Lage des Benutzers versetzen. Riskieren Sie nicht, dass Benutzer enttäuscht werden oder wertvolle Zeit damit verschwenden, herauszufinden, wie Ihr Formular funktioniert. Machen Sie Ihr Formular von Anfang an klar und platzieren Sie sichtbare Labels außerhalb leerer Formularfelder. Formulare sind ein wichtiger Bestandteil vieler Conversion-Ziele. Stellen Sie daher sicher, dass Ihre Nutzer sie schnell und präzise erreichen können.

Quelle: smashingmagazine.com