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
- Kontrast: Hebe das Feld ab
- Platzhalter und User-Text
- Icons
- Hover-State
- Focus-State
- Fehlerhafte Daten
- Checkboxen
- Hilfstexte
- 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.


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


Nachher


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.


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â).


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.


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.

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 âŠ


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.



9. Labels in mobilen Formularen
Wenn es um Smartphones geht, solltest du zusÀtzlich 2 Punkte im Hinterkopf behalten:
- Wie Nutze ich die deutlich kleinere FlĂ€che des Bildschirms? (die geöffnete Tastatur nimmt oft einen groĂen Teil davon ein.)
- 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! đ