uxzentrisch erörtert:
Noch schönere Hilfetexte in Textfeldern

Bisher gab es für mich (a) klassische, (b) nett gemeinte und (c) gute Hilfetexte/Label für Textfelder. Jetzt kommen noch (d) sehr gute hinzu.

Das klassische Label (a) steht vor dem Textfeld und hat hoffentlich auch einen Label-Tag, so dass man es anklicken kann.

Das nett gemeinte (b) zeigt den Labeltext innerhalb des Textfelds, löscht einem dan aber die eigene Eingabe, wenn man erneut in das Textfeld klickt.

Das macht das gute (c) besser, in dem es auch den Fall abdeckt, bei dem Nutzer mit und ohne eigener Eingabe mehrfach in die Textfelder klicken und vielleicht sogar farblich zwischen Hilfetext (Grau) und Eingabe (Rot) unterscheidet.

Bisher war ich damit auch glücklich und zufrieden. Bis 37signals jetzt noch einen drauf setzt und für die Anmeldemaske in ihrem Launchpad zwei sehr schöne Details umsetzt und damit (d) sehr gut ist:

  • Der Hilfetext verschwindet erst bei der Zeicheneingabe. Nicht wie sonst üblich beim Klick in das Textfeld.
  • Sie verwenden eine zweiten helleren Grauton dafür um zu signalisieren, dass jetzt getippt werden kann.

Natürlich machen sie auch all die anderen Details richtig, die ich oben erwähnt habe.

Hier kommt das ganze als kurzer Screencast. Und wer jetzt nochmal sehen möchte, wo genau die Unterschiede sind zum heute sonst üblichen Verhalten (c), dem empfehle ich den A List Apart Artikel zu diesem Thema mit  seiner Demo und dieses jQuery Plugin.

4 Kommentare

Tobias Jordans Autor vor 5 Jahren

Update: Auch auf der MobileMe Login-Seite von Apple wird diese Technik verwendet. https://auth.me.com/authenticate

Und inzwischen gibt es auch ein jQuery-Plugin, mit dem man dieses Verhalten einfach für seine eigenen Seiten nutzen kann: http://fuelyourcoding.com/scripts/infield/

Tobias Jordans Autor vor 5 Jahren

Update: Apple hebt laut littlebigdetails.com jetzt auch das Inputfeld (animiert) hervor: http://littlebigdetails.com/post/2621848830/apple-signup-form-shows-a-lighter-version-of

Tobias Jordans Autor vor 4 Jahren

Update: Jetzt hat haben endlich auch die Eingabefelder in den uxzentrisch-Kommentare »schöne« Labels.
Bitte kommentiert, wenn ihr einen Fehler findet. Danke!

Trackbacks und Pingbacks