9 Tipps fĂŒr benutzerfreundliche Formulare – Teil 1: UX Design

9 Tipps fĂŒr benutzer­freundliche Formulare – Teil 1: UX Design

Heute lernen wir etwas ĂŒber Web-Formulare. Genauer gesagt ĂŒber Verbesserungen, die wir an unseren Formularen durchgefĂŒhrt haben. Teil 1 (das ist dieser) beschĂ€ftigt sich mit dem visuellen Design, den Verbesserungen und den GrĂŒnden dafĂŒr. Im 2. Teil schauen wir uns gemeinsam die Technik dazu an, sprich wie die Programmierung in HTML & CSS dahinter funktioniert – richtig gelesen, wir werden kein JavaScript verwenden.

Teil 1: 9 Tipps fĂŒr benutzerfreundliche Formulare – UX Design (liest du gerade)
Teil 2: 9 Tipps fĂŒr benutzerfreundliche Formulare – HTML & (S)CSS

Inhalt

  1. Kontrast: Hebe das Feld ab
  2. Platzhalter und User-Text
  3. Icons
  4. Hover-State
  5. Focus-State
  6. Fehlerhafte Daten
  7. Checkboxen
  8. Hilfstexte
  9. Labels in mobilen Formularen

Verbesserungen der Bedienbarkeit

Ich empfehle ein paar allgemeine Verbesserungen fĂŒr Text-Eingabefelder, wie es zB. das E-Mail-Feld eines ist. Falls du dich mehr fĂŒr Checkboxen interessierst, findest du diese weiter unten bei Weitere Verbesserungen.

1. Kontrast: Hebe das Feld ab

Ganz wichtig ist, dass Formular-Felder auch solche erkannt werden. DafĂŒr sollten sich diese vom Hintergrund abheben. Eine gute Möglichkeit ist natĂŒrlich eine Farbe fĂŒr das Feld zu wĂ€hlen, die sich abhebt. Wir haben zusĂ€tzlich einen Rahmen dafĂŒr benutzt, da zum Hintergrund farblich kein sehr großer Kontrast besteht.

Vorher: Wenig Kontrast zum Hintergrund
Nachher: Feld zeichnet sich gut vom Hintergrund ab

2. Platzhalter und User-Text

Zuerst: Verwende immer einen Platzhalter-Text. Gib deinen Besuchern einen Hinweis was du von ihr/ihm möchtest. Das kann ein Beispiel sein („thomas@mustermann.com“), wie wir es verwenden. Oder auch ein Call-to-Action sein, beispielsweise als Frage formuliert: „Was ist deine E-Mail-Adresse?“ Sei ruhig kreativ.

Zweiten: Verwende einen ausreichend großen Kontrast zwischen Platzhalter Text und der Eingabe des Benutzers. In unserem Fall haben wir uns dafĂŒr entschieden, die Transparent des Platzhalter-Texts zu erhöhen. Es ist hier auch gar nicht so einfach den „Sweet Spot“ zu finden, sodass der Platzhalter-Text weiterhin gut leserlich bleibt.

Vorher
Vorher: Nicht ausgefĂŒllt – Platzhalter-Text allein sichtbar
Vorher: AusgefĂŒllt – Wenig Kontrast zum Platzhalter-Text
Nachher
Nachher: Platzhalter-Text ist dunkler
Nachher: Besserer Kontrast zwischen Platzhalter und Benutzer-Eingabe

3. Icons

ZusĂ€tzlich zum Platzhalter-Text nutzen wir Icons, um die Intension des Feldes besser zu kommunizieren. Hierbei handelt es ist natĂŒrlich um eine Empfehlung; uns ist bewusst, dass die Auswahl der passenden Icons schwierig sein kann und die technische Einbindung in ein fertiges System wie WordPress umso mehr.

Vorher: Ohne Icon
Nachher: Feld erhÀlt mit Icon ein zusÀtzliches Unterscheidungsmerkmal

4. Hover-State

Das Feld sollte dem Benutzer signalisieren, dass es interaktiv ist, sobald die Maus ĂŒber das Feld bewegt wird. Wir erreichen das durch eine subtile Änderung der Rahmenfarbe und des Icons: Das Feld ist im sogenannten Hover-State.

Nerd-Fact: Im Browser ist das Eingabefeld auch erreichbar durch Klick auf die dazugehörige Beschriftung („Label“).

Keine Änderung im Hover-State bzw. „normaler“ Status
Eingabefeld signalisiert dem Benutzer InteraktivitÀt

5. Focus-State

Wenn man das Feld befĂŒllen kann, soll das durch das Feld unmissverstĂ€ndlich kommuniziert werden. Das kannst du durch eine Ă€hnliche Idee erreichen wie du sie beim Hover-State eingesetzt hast. In unserem Fall Ă€ndern wir die Rahmenfarbe auf ein Blau mit hohem Kontrast.

Vorher: Feld bleibt beim Bearbeiten gleich
Nachher: Feld signalisiert, dass es Bearbeitet wird

6. Fehlerhafte Daten

Falls eine Eingabe nicht deinem Wunsch entspricht, sollte das Feld das dem Benutzer mitteilen. Durch eine verĂ€nderte visuelle Darstellung, womöglich eine kurze Nachricht. Wir haben uns dazu entschlossen dem gleichen Schema zu folgen wie bereits beim Hover– bzw. Focus-State: Unsere Wahl fĂ€llt auf die Signal-Farbe Rot.

Nerd-Fact: Hierbei handelt es sich um eine kosmetische Maßnahme zur besseren Bedienbarkeit im Browser, sprich einem besseren Benutzer-Erlebnis (UX). Man darf sich nicht darauf verlassen, dass Daten aus einem Formular „sauber“ sind – diese mĂŒssen immer von der Anwendung/Website serverseitig geprĂŒft werden, bevor sie weiter verarbeitet werden.

Feld signalisiert farblich eine falsche Benutzer-Eingabe

Weitere Verbesserungen

Jetzt lernst du Verbesserungen kennen, die wir zwar angedacht aber nur teilweise umgesetzt haben. Es liegt in deinem Ermessen wie weit du gehen willst und wie wichtig Formulare fĂŒr den Erfolg deiner Webseite sind. Wir nutzen derzeit nur Kontakt- und Kommentar-Formulare, diese sind essentiell fĂŒr uns, aber von der Idee keine große Überraschung fĂŒr unsere Besucher. Bei einem Online-Shop sind Formulare wesentlich wichtiger und gleichzeitig mĂŒssen sie auch komplexere AblĂ€ufe abbilden.

7. Checkboxen

Sei nicht zurĂŒckhaltend, Checkboxen dĂŒrfen ruhig auch etwas grĂ¶ĂŸer sein. Und, wenn du die Extra-Meile gehen willst gib dem Klick-Bereich auch einen Hover/Focus-State. Zugegeben, die Extra-Meile sind wir zum Zeitpunkt des Entstehens dieses Artikels nicht gegangen, aber wir verbessern laufend unsere Webseite â€“ also vielleicht sieht es heute schon anders aus â€Š

Vorher: Standard Checkboxen
Nachher: Standard Checkboxen vergrĂ¶ĂŸert

8. Hilfstexte

Falls die Besucher deiner Webseite dennoch Schwierigkeiten haben, ist es sinnvoll eine kleine Nachricht zu hinterlassen. Gib ein wenig mehr Kontext, wo es notwenig ist.

Ein kleiner Hilfe-Text kann deinen Besuchern im einem schwachen Moment weiterhelfen
Fehlermeldung (vorher): Visuelles Signal
Fehlermeldung (nachher): Visuelles Signal & Text

9. Labels in mobilen Formularen

Wenn es um Smartphones geht, solltest du zusÀtzlich 2 Punkte im Hinterkopf behalten:

  1. Wie Nutze ich die deutlich kleinere FlĂ€che des Bildschirms? (die geöffnete Tastatur nimmt oft einen großen Teil davon ein.)
  2. Wie kommuniziere ich den Kontext des Formulars, wenn der Platzhalter verschwindet?

GrundsĂ€tzlich sollte die Beschriftung ĂŒber dem Eingabefeld platziert sein. Eine zusĂ€tzliche Idee ist, Eingabefelder mit ergĂ€nzenden Infos zu versehen: Zum Beispiel kann eine Beschriftung ein Beispiel enthalten (wie der Platzhalter-Text). Wichtig ist: Teste deine Formulare auf mobilen GerĂ€ten und entscheide dann.

Falls du dich im Detail fĂŒr dieses Thema interessierst, das Baymard Institue hat einen ausfĂŒhrlichen Artikel Labels bei mobilen Formulare und Usability, den ich empfehlen kann.

Fazit

Mach es fĂŒr deine Besucher möglichst einfach Formulare auf deiner Webseite zu verstehen und zu bedienen. Schließlich willst du ja, dass sie Formulare ausfĂŒllen. Erfinde das Rad nicht neu – das Ziel ist es immer das Formular schnell, korrekt auszufĂŒllen.

Im 2. Teil erzÀhle ich dir wie man diese Verbesserungen an Webformularen in der Praxis umsetzt. Sei gespannt.

Hat dir dieser Beitrag geholfen?
Dann bitte teile ihn – das hilft uns besonders 👍.

Wenn du weitere Fragen hast, haben sie andere womöglich auch – hinterlasse uns ein Kommentar! 😉

Das könnte Sie auch interessieren

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert