Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Ratgeber

5 Gründe, warum du auf Platzhalter im Web verzichten solltest

(Grafik: medium.com)

Platzhalter sind im Webdesign überall zu finden, aber wie sinnvoll sind sie wirklich? Tragen sie wirklich zu einem besseren User-Interface bei oder sind sie nur Störer?

Seitdem Platzhalter im Web verwendet werden, dienen sie auch als ein User-Interface-Element (UI), das Anweisungen und Hinweise bereitstellt. Im ersten Moment mag das nach einer guter Lösung klingen – praktisch bringen Platzhalter gravierende Probleme mit sich.

Eine Zeile, zwei Werte

Dieses Problem kennt fast jeder Internetnutzer bei Webformularen: Sobald man beginnt, seine Daten in ein Eingabefeld zu tippen verschwindet der Platzhalter. Wurde jetzt noch mal nach der Straße oder auch nach der Hausnummer gefragt? Und das ist leider nur eins von vielen Problemen mit Platzhaltern.

Fehlender Inhalt

Sobald der erste Buchstabe getippt wird, verschwindet der Platzhaltertext. Und ganz ehrlich: Wer liest sich erst ein ganzes Formular durch, bevor er mit dem Schreiben beginnt? Kaum mit der Eingabe angefangen, steht man also schon auf dem Schlauch. Was war jetzt gefragt? Ohne oder mit Vorwahl? Mit Hausnummer? Wie soll das Geburtsdatum aussehen?

Default-Inhalt

Eine nicht selten gesehene Form ist auch der„Default Content“. In dem Feld steht also nicht „Bankleitzahl“, sondern bereits eine achtstellige Nummer. Das kann teilweise schnell für Verwirrung sorgen. Die acht Zahlen könnten genauso gut als Telefonnummer oder ähnliches wahrgenommen werden.

Platzhalter in der Praxis
Apple wird oft als Vorreiter bezeichnet. Was Platzhalter angeht, leider nicht.

1 von 4

Limitierter Platz

Formularfelder haben eine feste Breite. So wird es spätestens bei langen Straßeneingaben oder Vor- und Nachnamen zur Hürde, einen Buchstabendreher zu korrigieren. Auch hier können die fehlenden Labels zum Verhängnis werden: Nach der Eingabe des Straßennamens, der ohnehin schon nicht mehr innerhalb des Eingabefeldes sichtbar ist, kommt die Frage auf, ob auch nach der Hausnummer gefragt wird.

Screenreader

Die Lesbarkeit von Platzhaltern durch Screenreader ist nicht gewährleistet. Hier kann also für den Leser ein weißes leeres Feld erscheinen. Benutzerfreundlich ist anders. Man sollte sich immer im Klaren darüber sein, dass das Web für jeden ist und von jedem verwendet wird.

Lesbarkeit

Der Kontrast zwischen den Platzhaltertexten und Eingabefeldern ist leider oft miserabel. Die Textfarbe ist im Vergleich zum Hintergrund nur wenige Farbtöne dunkler. Durch die verschiedenen Bildschirmauflösungen wird nicht immer das beste Ergebnis erzielt und im schlimmsten Fall ist der Platzhaltertext gar nicht zu erkennen.

Fazit

All diese und weitere Argumente sprechen gegen die Verwendung von Platzhaltern, und für die Verwendung von Labels. Ein gutes Design bekommt auch Labels in eine ordentliche und anschauliche Position, womit die oben aufgelisteten Probleme vermieden werden. Aber auch hier bitte auf eine klare Beschreibung achten – das Wort „Datum“ alleinstehend reicht nicht aus. Es sollte so verständlich wie möglich sein: „Don't make me think“, lautet hier das Motto – „Lass mich nicht nachdenken.“

Für Designer bedeutet „simple“, Content oder Elemente auf ein Minimum zu reduzieren. Leider passiert das oft auf ziemlich drastische Art und Weise. Gutes Design dient aber dazu, Probleme mühelos zu lösen.

Hinzu kommt, dass Platzhalter von vielen, aber nicht von jedem Browser unterstützt werden. Der Internet Explorer unterstützt sie erst ab Version 10 und der Opera Mini gar nicht.

Bitte beachte unsere Community-Richtlinien

9 Reaktionen
sparkly

Man muss jetzt aber nicht deshalb entweder Placeholder oder Labels verwenden. Wir verwenden einfach das hier: http://clubdesign.github.io/floatlabels.js/

Antworten
Nico

Interessate Technik, doch bin ich mir gerade sehr unsicher, ob mich dies nicht eher stören würde. Warum nicht einfach beides verwenden, wie nun so oft beschrieben? Wird doch alles nur unnötig kompliziert, führt zu mehr Code, mehr Client-Last ...
Label = "Was wird abgefragt?",
Placeholder = "Wie ist die Schreibweise bei einem Beispiel?"
... Ganz einfach ...

Antworten
Markus

Ich bin da ganz anderer Meinung. Platzhalter frischen das Design auf und das Formular wirkt moderner. Das label Attribut ist übrigens mit der HTML 5.1 Spezifikation deprecated, da muss man sich dann sowieso was anderes überlegen. Dass Formularfelder eine feste Breite haben ist seit Responsive Design kalter Kaffee! Ansonsten einfach schlecht umgesetzt. Der letzte Punkt ist der Browser support... wenn ich unbedingt für einen IE8 oder Opera Mini entwickeln will dann muss ich mir halt einen Fallback einfallen lassen. In meinen Augen ist das aber völlig überflüssig da Google Chrome und Firefox zusammen 90% der Nutzer hat und IE edge 8,7% bei steht.

Antworten
Andreas Linnert

Ich glaube, du hast da etwas missverstanden. Es gibt kein label-Attribut. Das Attribut "form" des Elements "label" wird als "deprecated" gekennzeichnet. Das wird bisher nur benötigt, wenn man mehrere "form"-Elemente verschachtelt. Würde man das label-Element entfernen, wäre das eher eine Usability-Katastrophe. Denk bitte auch an Screenreader etc.
Es gilt nach wie vor: "label"-Element verwenden, um zu kennzeichnen, was in das zugehörige Eingabefeld eingegeben werden soll (Name, Straße, E-Mail...), Placeholder als evtl. Hinweise verwenden, wenn es angebracht ist.
Einige IDEs (wie PHPStorm) quittieren ein "input"-Element ohne zugehörigem "label"-Element sogar mit einer Warnung.
Zum visuellen Aspekt: Es kann durchaus sein, dass Placeholder je nach Design hübscher aussehen, aber sie sollten immer sichtbar bleiben (siehe Input-Felder aus Googles Material Design, um es nochmal zu referenzieren.)
Im Übrigen halte ich 8,7 % durchaus für beachtenswert (i. S. v. wert, beachtet zu werden). 8,7 % von 82 Mio. sind immer noch über 7 Mio. Menschen, die du einfach unter den Teppich kehren würdest.

Antworten
Markus

Ja ich meinte Label Element. Da habe ich mich wohl vertippt, sorry. Die 8.7% gelten für den IE Edge, ich habe nie gesagt dass diese ignoriert werden können und der kennt das placeholder Attribut. Aber die übrigen 2,3% (Safari, IE-Versionen und Opera) kann man durchaus vernachlässigen. Bei diesen Browser Versionen kann mann auch arial-label verwenden.

Andreas Linnert

(Kann man ab einer Kommentartiefe von 3 nicht mehr antworten?)
Ok, aber dennoch: das Label ist in HTML 5.1 nicht "deprecated" und sollte auch weiterhin unbedingt verwendet werden.
Ja, bei den Prozent hab ich mich verlesen. Aber an vernachlässigen würde ich erst weit unterhalb von 1 % denken. 2,3 % sind immer noch knapp 2 Mio. Leute.
Ich merke immer wieder, dass Prozent viel zu oft unterschätzt werden.

Antworten
Daniel

Nichts für ungut, aber dann nehmt euch doch ein Beispiel daran und setzt euer Kommentarformular entsprechend um ;)

Antworten
Andreas Linnert

Es wird auch bereits in der HTML-Spezifikation (und auf MDN) festgehalten, dass placeholder *kein* Ersatz für Labels sind, sondern für Beispieleingaben oder Ähnliches gebraucht werden sollen. Allein deswegen sollte dieser Missbrauch des placeholder-Attributs eigentlich gar nicht infrage kommen.
Ich verweise hier auch gerne auf Googles Material Design. Hier wurde einer sehr schöner Kompromiss gefunden, indem das Placeholder-Label zu einem echten Label wird, wenn man einen Text eingibt.

Antworten
Michael

Irgendwie witzig dass das Formular welches ich gerade ausfülle placeholder als Label Ersatz nimmt

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.