UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Moderne Formularelemente

9. September 2014, von stephan

picture
Mein erster Blogbeitrag bei Liechtenecker beschäftigte sich vor mittlerweile mehr als 2 1/2 Jahren mit dem grundlegenden Design von Formularen. Während sich bei den damals besprochenen Grundlagen mit der Zeit wenig verändert hat, wird vor allem in letzter Zeit immer mehr versucht, das verstaubte Image von Formularen mit modernen Elementen aufzupeppen. In meinem heutigen Blogbeitrag möchte ich zwei dieser Konzepte, adaptive Placeholder und Natural Language Forms, vorstellen und die Vor- und Nachteile aufzeigen.

Adaptive Placeholder

Jeder der schon einmal ein Formular designed oder gelayouted hat, kennt das leidige Problem: Wie sollen die Formularlabels ausgerichtet sein? Vertikal, Links ausgerichtet oder Rechts? Das Placeholder-Attribut, also die Möglichkeit die Beschreibung des Labels direkt in das Input-Feld zu stecken schien das Label-Problem zu lösen.
blogbeitrag 1
Allerdings eröffnet dieser Attribut eine ganze Reihe an weiteren Problemen: Der Browsersupport ist noch nicht vollständig gewährleistet (Internet Explorer 8 und 9 verstehen das Attribut nicht) und aus Usability-Sicht ist es gerade bei komplexen Formularen fragwürdig, ob es wirklich klug ist, dass die Beschreibung eines Input-Feldes nur sichtbar ist, wenn noch keine Daten vom User eingetragen wurden. Auch aus Accessibilitysicht ist der Einsatz von Placeholder-Attributen höchst fraglich.
Eine Alternative zum klassischen Placeholder sind sogenannte adaptive PlaceholderSie sollen das Problem eliminieren, dass der Beschreibungstext nur vor der Nutzereingabe sichtbar ist, indem dieser bei der Eingabe ins Input-Feld nach oben rutscht und die Aufgabe eines <label> übernimmt.
blogbeitrag 2Anders als der Effekt vermuten lässt sind adaptive Placeholder ohne den Einsatz von JavaScript rein durch CSS machbar. Der Vorteil dieser Methode liegt natürlich vor allem im schlankeren Design von Formularen und der gesteigerten User-Experience.
Der gravierndste Nachteil mit Sicherheit die Accessibility ist. Während der Placeholder-Attribut ein W3C Standard ist, ist die Lösung die adaptive Placeholder einschlägt natürlich meilenweit davon entfernt. Es bleibt abzuwarten ob sich diese Methode auf lange Sicht durchsetzen kann oder ob sie weiterhin ein Nischendasein bei Design- und Frontendenthusiasten fristen wird.

Natural Language Forms

Ein weiterer Trend der letzen Monate sind die Natural Language FormsAnders als bei klassischen Formularen werden hier Daten in der Form von grammatikalisch richtigen Sätzen vom User abgefragt. Das soll einerseits das strikte Layout herkömmlicher Formulare „sprengen“ als auch Spaß machen und den User damit dazu verleiten, das Formular auszufüllen.
blogbeitrag 3
Natural Language Forms bieten sich natürlich vor allem bei kürzeren, wenig komplexen Formularen, also zum Beispiel bei Gewinnspielen, an.
Eine A/B-Studie bei einem Gewinnspiel hat die Version mit Natural Language Form um 19% mehr Einreichungen generiert als ein Standardformular. Ob dies ausschließlich auf das Formular oder auf die Nebeneffekte (Formulare werden kompakter, dadurch sind mehr relevante Inhalte im sichtbaren Bereich) zurückzuführen ist, ist natürlich fraglich.
Natural Language Forms wirken auch einfacher, weil viele Elemente die in einem Standardformular mehrere Input-Felder einnehmen würden, in NL-Forms auf ein Inputfeld reduziert werden müssen: Statt dem Vor- und Nachnamen kann dabei z.B. nur der ganze Namen in einem Feld abgefragt werden. Das eröffnet natürlich vor allem Probleme, wenn die spätere Auswertung und Verarbeitung nicht vom Menschen sondern automatisch passieren soll, weil vie Newsletter ggf. Vor- von Nachname getrennt werden muss.
Die Nachteile liegen natürlich ebenfalls auf der Hand. Was bei wenig komplexen Formularen sehr gut funktioniert wird bei komplexeren Formularen mit Passwort-, Adress- oder anderer Abfrage kompliziert oder sogar nicht mehr verständlich formulierbar. Ohne mich zu weit aus dem Fenster zu lehnen bezweifle ich also sehr stark, dass wir irgendwann unsere Steuererklärungen beim Finanzamt über Natural Language Forms abwickeln werden.
Natürlich ist dieser Art von Formularen nicht nur auf klassische Dateneingabe beschränkt. Vor allem Suchanfragen mit vordefinierten Parametern können über Natural Language Forms sehr schön abgebildet werden.
suche

Fazit

Formulare gibt es fast schon so lange wie das Internet. Da ist es natürlich verständlich, dass viele versuchen, das etwas angestaubte Image mit neuen Ideen aufzupeppen. Beide in diesem Artikel vorgestellte Methoden sind eine nette Art, mehr User Experience in Formulare zu bringen. Beide Methoden haben aber nur sehr begrenzte Anwendungsmöglichkeiten unter realen Bedingungen und werden die bisher bekannten, teilweise ein wenig eingestaubten Formulare mit Sicherheit nicht so schnell ersetzen.

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
1 Kommentar.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
17. September 2014 um 10:53

Also für die adaptiven Placeholder kann ich mich nicht begeistern. Da kann ich gleich ein Label verwenden wenn es nach einer Eingabe sowie erscheint.
Mit einem Javascript Fallback für die normalen Placeholder sind die für mich eigentlich noch immer die schönste Lösung. Aber so richtig komplexe Formulare habe ich auch noch nicht erstellt.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close