Anzeige
Anzeige
Ratgeber
Artikel merken

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

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?

Von Jessy Kösterke
2 Min. Lesezeit
Anzeige
Anzeige

(Grafik: medium.com)

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

Anzeige
Anzeige

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?

Anzeige
Anzeige

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.

Anzeige
Anzeige
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.

Anzeige
Anzeige

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.

Anzeige
Anzeige

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.

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
9 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Michael

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

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
Daniel

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

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
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
Abbrechen

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

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige