Float Label Pattern: benutzerfreundliches User Interface für Formularfelder
Kommentare

Das Float Label Pattern ist eine intelligente Design-Lösung für eine benutzerfreundlichere Formulareingabe. Vor allem via Smartphone kann das Ausfüllen von Formularfeldern im Web oder den Systemsettings schnell zur Tortur werden, da man aufgrund des verhältnismäßig kleinen Screens in Verbindung mit der Touch-Eingabe nur ein kleines Sichtfeld hat. Ferner werden die Label, die anzeigen, welcher Inhalt in Texteingabefelder eingetragen werden soll, oft schnell überlesen. Hat man dann auf ein Eingabefeld getippt, verschwinden die Labels meist. War man unaufmerksam oder verfügt nur über ein begrenztes Kurzzeitgedächtnis, weiß man unter Umständen nicht mehr, ob man nun seinen Usernamen oder seine E-Mail-Adresse eingeben soll. Das Float Label Pattern des App-Entwicklers Matt D. Smith ist deswegen ein sehr schöner Ansatz, um die Texteingabe benutzerfreundlicher zu gestalten.

Zunächst hatte Smith allerdings folgenden Ansatz gewählt, um die Benutzerfreundlichkeit zu verbessern: 

Float Label

Float-Label-Pattern-Konzept © Matt D. Smith

Wie das GIF oben zeigt, erscheint – sobald man das Eingabefeld berührt – ein Icon am linken Textfeldrand, das grafisch visualisiert, nach welcher Information hier gefragt wird. Arbeitet man oft an unterschiedlichen Projekten, birgt dieser Ansatz allerdings den Nachteil, dass man eventuell regelmäßig neue Icons für neue Eingabefelder gestalten muss. Deswegen überlegte sich Smith den neuen Floating Labels Ansatz.

Wie das folgende GIF zeigt, nutzt dieser nur noch Text. Nachdem man auf ein Eingabefeld tippt, wandert das Label an den oberen Rand und die Schrift ändert sich von Grau zu Blau. Laut Smiths Blogeintrag überlegte der Designer lange Zeit, wie sich diese „micro interaction“ verhalten soll, sprich wann sich die Farbe des Labels ändert und wie schnell der Label-Text animiert an den oberen Rand wandert.

Float-Label-Pattern-Konzept

Float-Label-Pattern-Konzept © Matt D. Smith

Wenn Ihr selbst App- oder Web-Entwickler seid und Euch das Konzept zusagt, könnt Ihr mit Hilfe dieses Tutorials von webdesign.tutplus.com das Float Label Pattern in Euer Projekt implementieren.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -