Seien wir ehrlich, Formulare machen keinen Spaß. Aber gute Formulare machen mich glücklich. Und ziemlich mürrisch über schlechte Formulare.
So habe ich zum Beispiel bei der Meldung des Wasserstandes versehentlich 20,115 m3 statt 20 m3(!) eingegeben. Ups. Zum Glück konnte ich das mit einem Foto korrigieren, aber das hat dem Wasserwerk zusätzliche Arbeit bereitet.
Hätte ich diesen Fehler auch gemacht, wenn das Formular klarer gewesen wäre? Gute Formulare auf Ihrer Website ermöglichen Ihren Besuchern und Kunden eine reibungslose Interaktion mit Ihrem Unternehmen oder Ihrer Organisation, ohne Frustrationen oder Überraschungen.
Machen Sie sich bereit für eine ausführliche Erkundung von Etiketten in Formularen - und vergessen Sie nicht, diesen Artikel zum Lesen zu speichern! 🙃
Kurzum
Wir beginnen mit der wichtigsten Frage: Wie werden die Etiketten am besten platziert? Die kurze Antwort: Das hängt vom Kontext des Formulars und von Ihrem Zweck ab.
Die 5 wichtigsten Erkenntnisse aus diesem Artikel:
Beschriftungen über Eingabefeldern sind die schnellste und effektivste Form von Beschriftungen.
Verwenden Sie keine Inline-Beschriftungen, wenn Sie eine gute Benutzererfahrung bieten wollen.
Es gibt nur wenige Untersuchungen über die Wirkung von schwebenden Beschriftungen.
Linksbündige Beschriftungen sind nützlich für komplexe Formulare auf Desktop-/Großbildschirmen.
In einer Reihe von Artikeln lüfte ich die Geheimnisse benutzerfreundlicher und konversionsfördernder Formulare und gebe Ihnen praktische Beispiele, um diese Erkenntnisse noch heute auf Ihr eigenes Formular anzuwenden.
Ich beginne mit 5 Best Practices für die richtige Platzierung von Etiketten. Ich verrate Ihnen etwas im Voraus: Es gibt nur 4 beste Praktiken und 1 schlechteste Praxis. Lesen Sie schnell weiter!
Lesen Sie auch Teil zwei dieser Serie über die Gestaltung eines barrierefreien Formulars.
Was sind Etiketten und warum sind sie wichtig?
Beschriftungen sind die Fragen, die Sie Ihren Benutzern stellen, um notwendige Informationen zu sammeln. Ein Label gibt an, welche Art von Informationen in ein Textfeld oder ein Eingabefeld eingegeben werden müssen. Es ist eine Möglichkeit, ein Gespräch mit dem Benutzer zu beginnen.
Ein gut gestaltetes Formular verringert die Frustration, die Zweifel und die Ungewissheit der Nutzer. Und wenn es zudem benutzerfreundlich ist, führt es schneller zu einer Konversion.
Es gibt verschiedene Möglichkeiten, die Etiketten zu platzieren. Kurz gesagt, wo können Sie das Etikett anbringen?
Ein Etikett zu setzen ist doch nicht so schwierig, oder?
Nun, es gibt viele Formulare, die zu Frustration führen. Und lassen Sie das ein Killer für Ihre Konversion/Interaktion sein....
5 bewährte Verfahren: Die Ausrichtung Ihres Etiketts
Wollen Sie, dass die Benutzer das Formular so schnell wie möglich ausfüllen? Oder wollen Sie, dass die Benutzer sich Zeit nehmen und in Ruhe die Eingabefelder durchgehen? Die Platzierung der Beschriftung kann dies beeinflussen.
Die gebräuchlichste Form der Beschriftung ist heute, anno 2023, die Beschriftung über Eingabefeldern und die fließende Beschriftung. Neben diesen beiden Formen können Sie Beschriftungen auch links oder rechts vor Eingabefeldern oder inline ausrichten.
In diesem Leitfaden wird zwischen Inline-Beschriftungen und schwebenden Beschriftungen unterschieden. Schwebende Beschriftungen beginnen wie Inline-Beschriftungen, aber sie werden über den Text verschoben, wenn der Benutzer das Feld aktiviert. Inline-Beschriftungen sind Beschriftungen, bei denen die Beschriftung verschwindet, wenn der Benutzer das Feld aktiviert und zu tippen beginnt.
Um 2010 drehte sich die Diskussion über Labels hauptsächlich um die Ausrichtung von Labels links vor, rechts vor oder über Eingabefeldern. Jetzt geht es bei den meisten Diskussionen um Beschriftungen über Eingabefeldern versus schwebende Beschriftungen.
Sind links- und rechtsbündige Beschriftungen für das Eingabefeld also überflüssig? Nein, wir verwenden sie nur nicht mehr so häufig. Linksbündige Beschriftungen sind jetzt zum Beispiel in Ihrer Steuererklärung auf dem Desktop zu sehen:
Aber welche Platzierung ist am besten? Oben, inline, schwebend, links oder rechts? Schauen wir uns die Vor- und Nachteile der einzelnen Platzierungen von Beschriftungen an und überlegen wir, in welchem Kontext es am besten ist, Beschriftungen für Ihr Formular zu verwenden.
1. Etikett über dem Eingabefeld
Der erste Kandidat ist die Beschriftung über dem Eingabefeld.
Die schnellste Art, ein Formular zu scannen
Die am häufigsten zitierte Untersuchung zur Platzierung von Etiketten stammt von Matteo Penzo aus dem Jahr 2006. Auf der Grundlage einer Eyetrack-Studie mit verschiedenen Tests zur Platzierung von Etiketten kam er zu folgendem Ergebnis:
Die Platzierung einer Beschriftung über einem Eingabefeld funktioniert in den meisten Fällen besser, da die Benutzer nicht gezwungen sind, die Beschriftung und das Eingabefeld getrennt zu betrachten.
Matteo Penzo, 2006
UX-Experte
Mit anderen Worten: Durch die Platzierung der Beschriftung über dem Eingabefeld sehen die Benutzer die Beschriftung und das Eingabefeld gleichzeitig. Sie müssen ihre Augen nicht bewegen, um die Beschriftung und das Eingabefeld zu sehen.
Von den vier verschiedenen Studien füllten die Benutzer das Formular am schnellsten und mit der geringsten kognitiven Belastung aus, wenn sich die Beschriftung über dem Eingabefeld befand.
Die untersuchten Praktika waren*:
Beschriftungen oberhalb des Eingabefeldes
Dicke Beschriftungen über dem Eingabefeld
Linksbündig für das Eingabefeld
Rechtsbündig für das Eingabefeld
Innerhalb von 50 ms bewegten die Nutzer ihre Augen von der Beschriftung über dem Feld zum Eingabefeld. Das war 10x schneller als bei linksbündigen Beschriftungen.
Der Benutzer braucht weniger kognitiven Aufwand, um die beiden Elemente, Beschriftung und Eingabefeld, wahrzunehmen, da sie näher beieinander liegen als eine Beschriftung für das Eingabefeld;
Außerdem muss der Benutzer seine Augen nur in eine Richtung bewegen: nach unten (Luke Wroblewski, 2008, S. 59). So wird ein klarer Weg zum Ausfüllen des Formulars vorgegeben;
* Diese Untersuchung wurde durchgeführt, bevor es fließende Beschriftungen gab. Es könnte interessant sein, eine ähnliche Studie zu wiederholen, in der Beschriftungen über dem Eingabefeld im Vergleich zu fließenden Beschriftungen untersucht werden.
Zusätzlicher Platz für Erklärungen und Übersetzungen
Im Vergleich zu anderen Beschriftungen sind Beschriftungen über Eingabefeldern nicht auf 1-2 Wörter beschränkt. Wie das Forschungsinstitut Baymard zu Recht feststellt, gibt es mehr Raum für deutliche Beschreibungen, und Sie können zum Beispiel Anweisungen in oder unter der Beschriftung hinzufügen. Denken Sie an 'DD/MM/YYYY' nach der Frage 'Geburtsdatum'.
Bei mehrsprachigen Formularen ist die Beschriftung über den Eingabefeldern die günstigste Lösung. Denn dann haben Sie genügend Platz, um Texte in längere Sätze zu übersetzen, die mehr Platz benötigen.
Nachteile von Etiketten gegenüber Eingabefeldern
Ein Etikett über dem Eingabefeld hat einen großen Nachteil: Bei vielen Fragen muss der Benutzer länger scrollen, um das Formular auszufüllen. Dies liegt an dem Leerraum, den Sie zwischen den einzelnen Fragen benötigen;
Sie können dieses Problem lösen, indem Sie ein Formular in Abschnitte auf mehreren Seiten aufteilen. So können Sie nach dem Ausfüllen eines Abschnitts mit Fragen zu einer neuen Seite oder einem neuen Abschnitt weitergehen. Die Unterteilung in Schritte macht ein langes Formular für den Benutzer überschaubar
Im Blog UX Movement wird argumentiert, dass man zusätzlichen Leerraum braucht, um Beschriftungen und Felder zu gruppieren. Auf diese Weise machen Sie das Formular besonders lang und schaffen unnötige Unterbrechungen im Scanfluss des Nutzers.
Allerdings gibt es keine Forschung oder Beweise dafür. Es bleibt also abzuwarten, ob dies die Nutzer tatsächlich stört;
Außerdem gibt es keine Beweise dafür, dass sich das Scrollen in einem Formular negativ auf das Nutzererlebnis auswirkt. Vor allem dann, wenn dem Nutzer klar ist, dass er sein Ziel (das Ausfüllen des Formulars) erreicht, indem er das Formular vollständig ausfüllt.
Quickmark behauptet in einem Blog auch, dass die Beschriftungen über den Eingabefeldern mehr Elemente für die Augen zum Überfliegen bieten und damit die Anzahl der visuellen Fixierungen erhöhen. In diesem Artikel gibt es jedoch keine sachlichen Beweise für diese Annahmen.
TL;DR: Beschriftungen oberhalb des Eingabefeldes zusammengefasst
Vorteile
Sie bietet den Nutzern die schnellste Möglichkeit, ein Formular zu scannen und auszufüllen.
Die Nutzer müssen ihre Augen nur in eine Richtung bewegen, was weniger kognitiv anspruchsvoll ist als links und rechts ausgerichtete Beschriftungen.
Sie haben mehr Platz für Text und zusätzlichen Text, so dass Sie Eingabefelder richtig beschreiben können.
Nachteile
Sie haben mehr Elemente und nehmen daher auch mehr Leerraum in Anspruch, wodurch die Formulare länger werden und die Benutzer weiter scrollen müssen.
2. Inline Labels / Labels als placeholders
Ich komme gleich zum Punkt: Inline-Labels oder Labels als Platzhalter sind in der UX-Welt ein No-Go!
Dennoch sehe ich, dass Designer diese Etiketten immer noch verwenden:
Inline-Beschriftungen sparen zwar Platz auf dem Bildschirm, gehen aber auf Kosten der allgemeinen Benutzerfreundlichkeit. Denn wenn der Hinweis oder die Beschriftung verschwindet, sobald man auf das Feld klickt, vergisst man leicht, was die Frage war.
Es gibt immer Ausnahmen von der Regel. In Formularen, in denen nur nach der E-Mail-Adresse gefragt wird, ist die Wahrscheinlichkeit, dass der Benutzer die Frage vergisst, sehr gering. Oder denken Sie an ein Suchfeld, das ein Suchsymbol enthält.
Warum sind Inline-Labels ein No-Go?
Schwierig zu ermittelnder Zusammenhang, der zu Zweifeln führen kann
Verwechslung mit ausgefüllten Feldern
Verwirrende Fehlermeldungen
Nicht geeignet für Dropdowns
Schwierig, den Kontext zu erkennen
Das größte Problem ist, dass die Beschriftung verschwindet, sobald Sie anfangen zu tippen oder das Feld aktivieren. Der einzige Kontext, den Sie zum Ausfüllen des Feldes hatten, ist verschwunden. Luke Wroblewski betont, dass es für die Nutzer dadurch unklar ist, was sie ausfüllen sollen (Web Form Design 2009, S. 100).
Die Benutzer müssen sich beim Tippen mühsam Bezeichnungen merken. Dies kann zu zusätzlicher kognitiver Belastung und Frustration führen, was das Nutzererlebnis beeinträchtigt.
Verwechslung mit ausgefüllten Feldern
Inline-Beschriftungen können dem Benutzer den Eindruck vermitteln, dass das Feld bereits ausgefüllt ist. Infolgedessen besteht die Möglichkeit, dass der Benutzer das Eingabefeld überspringt und eine Fehlermeldung erhält.
Verwirrende Fehlermeldungen
Da der Benutzer nach dem Ausfüllen von Feldern keinen Kontext hat, ist er auf gut formulierte Fehlermeldungen angewiesen, um seine Eingaben zu korrigieren.
Wenn Fehlermeldungen nicht ordnungsgemäß eingerichtet sind und eine Standardmeldung wie z. B. angezeigt wird: "Dieses Feld ist falsch ausgefüllt", weiß der Benutzer nicht, warum das Feld falsch ausgefüllt ist.
So hat das Baymard Institut in einer seiner Studien über mobile Formulare gezeigt, dass mehrere Nutzer durch eine kryptische Fehlermeldung, die sie ohne Kontext nicht einordnen konnten, frustriert wurden;
Anhand der Fehlermeldung konnten die Benutzer nicht herausfinden, was sie falsch gemacht hatten, und mussten ihre Eingaben löschen.
Nicht geeignet für Dropdowns oder andere Auswahlfelder
Für andere Eingabefeldtypen als Textfelder sind Inline-Labels ebenfalls weniger geeignet. Bei Dropdown-Optionen werden Inline-Labels zu einem Label über dem Feld. Das macht das Design Ihres Formulars inkonsistent.
Außerdem könnten die Benutzer denken, dass die Dropdown-Liste bereits ausgefüllt ist. In der oben erwähnten Studie von Baymard über mobile Formulare wurde festgestellt, dass die Nutzer verwirrt waren;
Tun Sie es einfach nicht
Obwohl Inline-Labels platzsparend erscheinen, überwiegen die Nachteile die Vorteile. Sie schaffen mehr Unklarheit als Klarheit, und das ist genau das, was Sie vermeiden wollen, wenn Ihr Formular das wichtigste Mittel zur Interaktion mit Ihren Kunden ist;
Deshalb: Verwenden Sie keine Inline-Labels, es sei denn, Sie haben nur ein oder zwei Eingabefelder, wie z.B. ein Anmeldeformular oder ein Suchfeld.
3. Schwebende Etiketten
Kommen wir nun zu Kandidat Nummer drei. Ein starker Kandidat, daran besteht laut der riesigen Fangemeinde kein Zweifel.
In der Tat hat Google seit einigen Jahren diesen Stil für alle seine Formulare im Material Design übernommen. Aber was sind "Floating Labels"?
Schwebende Beschriftungen, oder Infield top aligned labels, sind Beschriftungen, die als eine Art "Platzhalter" im Eingabefeld beginnen, um "Platz zu sparen". Beim Aktivieren des Eingabefeldes bewegt sich das Label mit einer kurzen Animation nach oben. Die Nielsen Norman Group (NNGroup) bezeichnet das schwebende Etikett als "adaptiven Platzhalter".
Sie kennen sie wahrscheinlich aus Ihrem Google-Inlog.
Schwimmende Etiketten sind sexy, aber taugen sie auch etwas?
Im Jahr 2013, als Floating Labels neu waren, wurden sie als die Lösung aller Probleme von Inline-Labels gesehen. Während bei Inline-Labels der Nutzer nach dem Aktivieren des Eingabefeldes keine Erinnerung mehr hat, bleibt bei einem Floating Label das Label sichtbar.
Außerdem sorgen die schwebenden Etiketten für ein klares und übersichtliches Design. Im Jahr 2013 gingen Fans sogar so weit, dieses neue Design als sexy zu bezeichnen. Vielleicht können wir einen Moment darüber diskutieren, inwieweit ein Formular sexy sein kann 👀.
Platzsparend mit schwebenden Etiketten
Schwebende Etiketten sind platzsparend, da weniger vertikaler Platz für das Etikett benötigt wird
Und wie UX Movement behauptet, hat der Benutzer weniger Elemente zu sehen. Das liegt daran, dass sich die Beschriftung oft innerhalb des Eingabefeldes befindet, so dass die Benutzer diese Elemente als ein einziges wahrnehmen. Dadurch können sich die Benutzer besser auf die Eingabefelder konzentrieren. Es wurden jedoch keine Studien durchgeführt, um dies zu beweisen.
Wie gestaltet man ein schwimmendes Etikett?
Seit 2017 arbeitet Google Material Design standardmäßig mit schwebenden Beschriftungen in seinen Eingabefeldern. Google führte mehrere Nutzerumfragen durch, um das endgültige Design der fließenden Beschriftungen zu finden.
Im ursprünglichen Design von Google Material Design war es für die Nutzer nicht klar, dass sie darauf klicken können:
In der Zeile wurde es nicht als Eingabefeld erkannt.
Es sah aus wie ein leeres Feld.
Es lud nicht zur Interaktion ein.
Nebenbei bemerkt: Google hat in seinen Nutzerumfragen nur verschiedene Designs für schwebende Etiketten verglichen. Sie untersuchten nicht, ob ein Etikett über dem Eingabefeld oder ein schwebendes Etikett verwendet wurde. Daher können wir nichts über die Auswirkungen von fließenden Beschriftungen sagen.
Ziel der Umfragen war es, den Nutzern ein Formular an die Hand zu geben, das sie fehlerfrei und schnell ausfüllen können.
Bei jeder Variante berücksichtigte Google die folgenden Faktoren:
Wiedererkennbarkeit - die Anzahl der Klicks auf die richtigen Eingabefelder im Vergleich zu den falschen
Durchsuchbarkeit - die Zeit, die ein Teilnehmer benötigte, um das gewünschte Element zu finden
Präferenz - die persönliche Präferenz eines jeden Teilnehmers
Außerdem untersuchte Google verschiedene Designelemente:
Der Stil des Feldes für das Eingabefeld
Platzierung des Etiketts*
Der Kontrast
Edge-Stil.
*Die Platzierung der Beschriftung hängt davon ab, wohin sich die Beschriftung bewegt, nachdem das Feld aktiviert wurde.
Die wichtigsten Ergebnisse der Umfrage:
Geschlossene Eingabefelder mit einer 'Kasten'-Form funktionieren besser als nur eine Linie
Eingabefelder mit einer halbtransparenten Füllung und einer Linie oder ein transparentes Eingabefeld mit einer dicken Linie funktionieren am besten
Elemente von Eingabefeldern sollten ein Mindestkontrastverhältnis von 3:1 zum Hintergrund haben*
Beschriftungstext im Eingabefeld
Eingabefelder mit abgerundeten Ecken
*Nach den WCAG-Richtlinien sollten Elemente einen Kontrastwert von mindestens 4,5:1 haben, um leicht lesbar zu sein.
Einen umfassenden Design-Leitfaden für schwebende Etiketten finden Sie bei Google Material Design. Dort wird erklärt, wie man fließende Beschriftungen einsetzt, von Design-Tipps bis hin zu Hinweisen und Fehlermeldungen;
Sie erklären auch, wie man schwebende Etiketten entwirft, die den WCAG Zugänglichkeitsrichtlinien entsprechen.
Kritik an Floating Labels: Gibt es eine bessere Alternative?
Dennoch gibt es einige Kritik an den schwimmenden Etiketten. Es ist nicht alles rosig.
Laut Jessica Enders im Buch Designing UX Forms (2016) und Interaktionsdesigner Adam Silver haben schwebende Etiketten noch zu viele Probleme. Beide Designer empfehlen, fließende Beschriftungen zu vermeiden.
Die Probleme sind wie folgt:
Formulare sind keine Quelle der Unterhaltung. Das schwebende Etikett wird den Benutzern keine Freude bei der Verwendung von Formularen bereiten. Die Benutzer interessiert das nicht. Sie wollen nur das Ergebnis sehen.
Adam Silver
Interaktionsdesigner
1. Verwirrung durch ausgefüllte Felder
Einer der Hauptkritikpunkte ist, dass ein Eingabefeld mit Platzhaltertext nicht als interaktives Feld auffällt. Dies kann dem Nutzer den Eindruck vermitteln, dass das Eingabefeld bereits ausgefüllt ist. Das kann dazu führen, dass er das Feld überspringt oder den Platzhalter stehen lässt. So erhält er unnötige Fehlermeldungen, weil er das Feld nicht (korrekt) ausgefüllt hat.
2. Sie sind schwer zu lesen
Schwebende Etiketten sind schwer zu lesen, weil die Schriftgröße oft zu klein ist. Dies kann zu Fehlern und Frustration beim Ausfüllen des Formulars führen;
Google selbst verwendet eine Schriftgröße von 12 px für seine Floating Labels, wenn sie aktiv sind. Wenn Sie etwas scannbar machen wollen, ist es ratsam, größere Schriftgrößen zu verwenden. In den Entwürfen von Concept7 verwenden wir eine Mindestschriftgröße von 18px als Standard für Text.
3. Du sparst weniger Platz, als du denkst
Die Beschriftungen brauchen Platz, um nach oben zu wandern, wenn der Benutzer mit der Eingabe beginnt. Dadurch wird sichergestellt, dass um das Eingabefeld herum zusätzlicher Leerraum erforderlich ist. Wenn dies nicht richtig implementiert ist, springt die Seite, wenn das Feld aktiviert wird.
Die Platzersparnis in Eingabefeldern hängt von der Schriftgröße ab. Wenn Sie möchten, dass die Beschriftungen lesbar sind, sollte auch mehr Leerraum im Eingabefeld vorhanden sein. Als Beispiel habe ich das Anmeldeformular von Google Mail verwendet:
4. Animationsprobleme
Floating Labels benötigen eine Animation, um ihre Position zu ändern. Dies kann sich auf die Seitengröße und die Ladezeit auswirken. Außerdem funktionieren Animationen manchmal nicht auf allen Geräten oder in allen Browsern gut;
5. Begrenzter Kontrast und eingeschränkte Lesbarkeit
Da schwebende Beschriftungen als Platzhalter beginnen, haben sie oft eine hellgraue Farbe, die nicht auffällt. Erfüllt die graue Farbe nicht die minimalen WCAG-Kontrastwerte, ist es für die Nutzer schwierig, den Text überhaupt zu lesen.
6. Keine langen Beschriftungen möglich
Fließende Beschriftungen sind auf die Länge des Eingabefeldes beschränkt, und idealerweise sollte vor und nach der Beschriftung etwas Leerraum vorhanden sein. Dies macht es unmöglich, längere Abfragen als Beschriftungen zu verwenden. Dadurch wird Ihre Beschriftung abgeschnitten.
7. Inkonsistente Eingabefelder
Schwebende Beschriftungen sind für Eingabefelder gedacht, in die Sie Text eingeben;
Andere Felder wie Kontrollkästchen, Optionsfelder und Dropdown-Listen passen nicht in den Rahmen der fließenden Beschriftungen, da es keinen Platzhaltertext gibt. Dadurch entsteht ein inkonsistentes Design mit einer Mischung aus Beschriftungen über dem Feld und schwebenden Beschriftungen.
8. Wenig Platz für Hinweise
Ein wichtiger USP für schwebende Etiketten ist, dass sie Platz sparen können. Dadurch wird der Platz für Hinweise oder Anweisungen eingeschränkt. Und die Benutzer können wichtige Zusammenhänge oder Anweisungen übersehen;
Laut World Wide Web Consortium (W3C), einer Organisation, die die Webstandards für das World Wide Web entwirft, ist es gut für die Zugänglichkeit, Hinweise in das Etikett aufzunehmen, wie z. B.:
Außerdem entspricht die Verwendung von fließenden Beschriftungen nicht dem Standard, dass Sie keine Platzhalter und Hinweise als Beschriftungen verwenden sollten.
9. Autofill
Eines der Probleme, auf die Benutzer häufig stoßen, ist, dass das automatische Ausfüllen und fließende Beschriftungen manchmal nicht gut zusammenpassen. Der automatisch ausgefüllte Text erscheint über dem Platzhalter, weil das Eingabefeld nicht korrekt aktiviert ist.
10. Nicht barrierefrei
Es gibt auch einige kritische Aspekte der Zugänglichkeit zu berücksichtigen. Nach Angaben des World Wide Web Consortium (W3C) sehen unterstützende Technologien wie Bildschirmlesegeräte den Text in einem Eingabefeld (Platzhalter) nicht als Beschriftung.
Außerdem werden Platzhaltertexte von assistiven Technologien und einigen Browsern nicht unterstützt.
Sind schwebende Etiketten wirklich so schlimm?
Der Schöpfer und Designer von Floating Labels, Matt D Smith (MDS), ist mit der Kritik nicht einverstanden:
Hinweise können leicht unterhalb des Eingabefeldes eingefügt werden, dies bedeutet jedoch, dass mehr Weißraum benötigt wird.
Kleine Textgröße hat mit dem Designer zu tun, nicht mit fließenden Etiketten. Fließende Etiketten in der gleichen Größe wie Standardetiketten sind kein Problem.
MDS stimmt zu, dass fließende Etiketten wenig Weißraum einsparen.
Niedriger Kontrast hat wenig mit fließenden Etiketten zu tun, aber alles mit Größe und Farbe.
Verkürzte Etiketten sind nicht das Problem, laut MDS ist das Problem, warum man ein langes Etikett braucht. Wenn Sie wirklich eine lange Frage stellen müssen, und es ist keine schlechte Frage, schlägt er vor, keine fließenden Etiketten zu verwenden, sondern einen anderen Typ.
Fazit: Floating Labels, ja oder nein?
Was auch immer Sie interessiert!
Derzeit gibt es keine eingehenden Tests zur Leistung oder Funktionsweise von Floating Labels. Die von Google genannten Vorteile sind hauptsächlich ästhetischer und nicht funktionaler Natur;
Das scheint ein großer Aufwand zu sein, wenn man einfach die Etiketten über die Eingaben setzen kann und alle Vorteile bzw. keines der Probleme hat.
Luke Wroblewski
UX-Experte
Aber wer sagt, dass schwebende Etiketten nicht für Ihr Formular geeignet sind?
Der Schöpfer von Floating Labels, MDS, steht hinter seinem Design und sagt, dass es einen guten Grund geben muss, warum Google dieses Design als Standard verwendet.
Ein Nutzer, der sich unterhalten fühlt, wird sich viel eher an seine Erfahrungen mit Ihrem Produkt erinnern.
MDS
Designer
Ich würde sagen, machen Sie es. Wichtig ist, dass Sie testen, was funktioniert und was nicht, z. B. mit Nutzerforschung oder einem A/B-Test. Erst dann können Sie konkrete Schlussfolgerungen ziehen. Letztlich geht es auch darum, welche Art von Formular die meisten Conversions generiert.
4. Etikett linksbündig vor Ihrem Eingabefeld
Vor mehr als 15 Jahren waren linksbündige Etiketten noch üblich. Jetzt sieht man sie kaum noch. Es sei denn, Sie wollen Ihre Steuererklärung ausfüllen.
Bedeutet dies, dass linksbündige Etiketten schlecht sind und nicht richtig funktionieren?
Die kurze Antwort ist nein!
Links ausgerichtete Etiketten haben ihre Vorteile und können in manchen Situationen gut funktionieren. Immerhin bieten diese Etiketten:
Freiraum
Weniger vertikaler Platz
Effizientes Scannen von Etiketten
Linksbündige Beschriftungen sind jedoch nicht immer praktisch. Die Faustregel der UX-Designerin Jessica Enders lautet: Für große Bildschirme sind links ausgerichtete Beschriftungen in Ordnung, aber auf mobilen Geräten gehören die Beschriftungen über die Eingabefelder.
Bei größeren Bildschirmen sollten die Beschriftungen links von den Feldern stehen, bei kleineren Bildschirmen sollten sie über den Feldern stehen.
Jessica Enders
UX-Experte
Links ausgerichtete Etiketten sind eindeutig
Bei linksbündigen Beschriftungen ist für den Benutzer klar, welches Eingabefeld zu welcher Beschriftung gehört. Die Zeit, die das Gehirn braucht, um dies zu registrieren, ist länger als bei Beschriftungen über Eingabefeldern. 500ms im Vergleich zu 50ms.
Der weiße Raum zwischen der Beschriftung und dem Eingabefeld lenkt den Nutzer auf das Eingabefeld. Aus der Forschung von Matteo Penzo geht hervor, dass die Menschen nicht durch den weißen Raum abgelenkt werden.
Um die visuelle Verbindung zwischen Beschriftungen und Fragen zu verstärken, können Sie Abschnitte farbig gestalten, um die Beziehung zwischen Beschriftungen und Feldern zu betonen. Jessica Enders nennt dies "Zebra Striping".
Weniger vertikaler Platz mit links ausgerichteten Etiketten
Links ausgerichtete Beschriftungen nehmen im Vergleich zu Beschriftungen oberhalb des Eingabefeldes oder zu schwebenden Beschriftungen weniger vertikalen Platz ein. Das bedeutet, dass Formulare kompakter sind und weniger vertikalen Platz auf dem Bildschirm einnehmen.
Hinweis, dies ist nur auf dem Desktop anwendbar, denn in der mobilen Version Ihres Formulars ist es besser, die Beschriftungen über den Eingabefeldern zu platzieren.
Scannbare Formulare
Bei unbekannten Formularen oder bei nicht standardisierten Fragen helfen links ausgerichtete Beschriftungen den Benutzern, das Formular in aller Ruhe durchzusehen (Luke Wroblewski, Web Form Design 2008). Das macht es ihnen leichter zu verstehen, was Sie wann fragen, bevor sie das Formular ausfüllen. Auch wenn es mehr Zeit in Anspruch nimmt, haben die Benutzer aufgrund dieser Ausrichtung keine Probleme beim Ausfüllen des Formulars.
Daher ist es nicht verwunderlich, dass die Fragen im Formular des Finanzamts links ausgerichtet sind. Es handelt sich zwar um ein Formular, das Sie jedes Jahr ausfüllen, aber es sind keine Fragen, denen Sie jeden Tag begegnen. Es sei denn, Sie sind ein Steuerberater. 🙃
Entwurfsüberlegungen
Wir haben in den letzten Jahren aus gutem Grund weniger linksbündige Etiketten verwendet. Mit der Einführung von Smartphones und responsivem Design wurde schnell klar, dass linksbündige Etiketten auf kleinen Bildschirmen nicht anwendbar sind.
Die Nachteile auf einen Blick:
Begrenzter Platz für lange Etiketten
Längere Einfüllzeit
Nicht für Mobiltelefone geeignet
Begrenzter Platz für lange Etiketten
Linksbündige Beschriftungen sind nicht für lange Fragen gedacht. Wenn die Fragen zu lang sind, ist der Leerraum zwischen der Beschriftung & dem Eingabefeld klein. Dadurch wird es für die Benutzer schwieriger, die Beschriftungen zu lesen.
Zu lange Fragen werden in zwei Zeilen aufgeteilt, wenn die Frage zu lang ist. Dies erschwert das Scannen des Etiketts.
Längere Einfüllzeit
Der UX-Forscher Matteo Penzo fand heraus, dass die Benutzer in seiner Studie eine hohe kognitive Belastung erfahren, wenn sie Formulare mit linksbündigen Beschriftungen ausfüllen.
Im Vergleich zu Formularen mit Beschriftungen über den Eingabefeldern dauert es auch länger, bis die Benutzer das Formular ausgefüllt haben;
Luke Wroblewski (2008) weist auch darauf hin, dass die Menschen länger brauchen, um die Formulare auszufüllen, weil sie mehr Elemente vor Augen haben, die sie verarbeiten müssen;
Im Grunde genommen haben die Nutzer keine Probleme, die Etiketten zu verstehen, es dauert nur länger. Und das ist nicht unbedingt ein Nachteil. Manchmal möchte man, dass sich die Nutzer ein wenig mehr Zeit nehmen, um das Formular auszufüllen. So wie bei Ihrer Steuererklärung.
Es gibt also doppelt so viele visuelle Klammern für die Benutzer zu verarbeiten.
Links ausgerichtete Etiketten sind nicht für mobile Geräte geeignet.
Auf kleineren Bildschirmen ist nicht genügend Platz, um die Beschriftung links neben dem Eingabefeld zu platzieren. Wird die Beschriftung dennoch daneben platziert, kann dies zu einer negativen Benutzererfahrung führen. Eingabefelder sind zu klein für die Eingabe und nicht gut sichtbar. Dies erhöht die Fehlerwahrscheinlichkeit.
Oder sind die Eingabefelder nicht mehr sauber aneinandergereiht, sondern versetzt, wie im folgenden Beispiel.
Baymards Untersuchung ergab, dass die Nutzer sogar Schwierigkeiten hatten, diese Fehler zu beheben, weil sie ihre Eingaben nicht richtig sehen konnten.
Sind linksbündige Etiketten noch anwendbar?
Ja, sie sind immer noch relevant. Solange Sie sie im richtigen Kontext verwenden. Haben Sie ein komplexes Formular, in dem Sie keine Standardfragen stellen? Dann könnte es interessant sein, mit diesen Bezeichnungen zu arbeiten
Laut der UX-Expertin Janet M. Six gibt es 2 Fragen, die man sich stellen sollte, wenn man sich für linksbündige oder rechtsbündige Etiketten entscheidet:
Möchten Sie, dass die Benutzer die Beschriftungen in Ihrem Formular zuerst scannen? Dann verwenden Sie linksbündige Beschriftungen.
Möchten Sie, dass die Benutzer leicht erkennen können, welche Beschriftung zu welchem Eingabefeld gehört? Dann verwenden Sie rechtsbündige Beschriftungen. (Siehe Abschnitt unten über rechtsbündige Beschriftungen)
Letztendlich ist es eine Frage des Testens und Experimentierens und des Herausfindens, was für Ihre Form funktioniert.
5. Rechtsbündige Beschriftung für Ihr Eingabefeld
Wenn ich mich von einer der verschiedenen Platzierungsmöglichkeiten für Etiketten verabschieden muss, dann am liebsten von den rechtsbündigen Etiketten. Nicht, weil sie besonders schlecht sind, sondern weil es bereits bessere Möglichkeiten gibt.
Beschriftungen direkt vor dem Eingabefeld haben viele der gleichen Vor- und Nachteile wie linksbündige Beschriftungen. Sie sind jedoch für die Benutzer leichter zu verarbeiten als links ausgerichtete Beschriftungen. Zwischen 170ms und 240ms im Vergleich zu 500ms für linksbündige Etiketten. Und sie stellen eine geringere kognitive Belastung dar.
Laut Luke Wroblewski liegt der Vorteil dieser Platzierung darin, dass die Beschriftungen nahe an den Eingabefeldern sind. Wir in den westlichen Ländern lesen jedoch von links nach rechts und bevorzugen Texte, die links ausgerichtet sind (Web Form Design 2008, S. 94).
Außerdem bietet diese Art der Platzierung von Beschriftungen wenig Flexibilität in Bezug auf die Länge, da zwischen der Beschriftung und dem Eingabefeld kein Platz ist. Wenn Ihre Frage mehr als zwei Zeilen Text umfasst, ist die Beschriftung schwieriger zu scannen.
Wussten Sie, dass es früher eine ISO-Norm für die "richtige Gestaltung von Formularen" gab? In dieser Norm von 1998, ISO 9241-17:1998, müssen Sie die Etiketten rechts ausrichten. Aber wenn die Etiketten gleich lang sind, kann man sie links ausrichten.
Wie ist die richtige Platzierung von Etiketten in Formularen?
Die Platzierung von Etiketten wirkt sich direkt auf die Nutzererfahrung und damit indirekt auf Ihre Konversion aus. Beschriftungen sagen dem Nutzer, welche Informationen er ausfüllen soll. Derzeit gibt es keine allgemeingültige Methode zur Platzierung von Labels;
Die Wahl hängt von Ihrem Kontext und dem Zweck des Formulars ab. Sind die Fragen kurz oder lang? Sind sie komplex? Gibt es viel Platz zum Scrollen? Oder kommen die meisten Besucher über das Handy?
Die 5 Labels zusammengefasst
So haben wir gesehen, dass Beschriftungen über Eingabefeldern und fließende Beschriftungen schnell und effektiv sind, während links ausgerichtete Beschriftungen besonders für komplexe Formulare nützlich sind.
Etiketten über Eingabefeldern scheinen die schnellste und effektivste Methode zu sein, ein Formular zu scannen und auszufüllen. Sie führen jedoch zu längeren Formularen.
Fließende Beschriftungen sind ästhetisch ansprechend, können aber Probleme verursachen. So sind sie z. B. nur begrenzt lesbar und können Verwirrung stiften, weil das Feld bereits "ausgefüllt" ist.
Linksbündige Beschriftungen werden weniger häufig verwendet. Sie sind für die Benutzer übersichtlich und nehmen vertikal weniger Platz ein. Besonders für komplexe Abfragen ist diese Platzierung ideal. Diese Platzierung ist jedoch nicht für mobile Geräte geeignet.
Rechtsbündige Beschriftungen erfordern keine große geistige Anstrengung für die Benutzer, sind aber nach unseren westlichen Lesekonventionen nicht die Norm. Außerdem gibt es keinen Platz für lange Fragen oder Erklärungen.
Inline-Beschriftungen oder Beschriftungen als Platzhalter in einem Eingabefeld empfehle ich nicht. Es ist für die Benutzer schwierig, den Kontext zu verstehen und kann zu Verwirrung und Fehlern führen.
Nur wenn Sie Ihr Formular testen, werden Sie herausfinden, welche Platzierung für Ihre Nutzer am besten geeignet ist.
Bei Concept7 verwenden wir Standardbeschriftungen über den Eingabefeldern, um die Benutzerfreundlichkeit zu erhöhen. Und wir teilen lange Formulare in Abschnitte/Seiten auf, um die kognitive Belastung zu reduzieren. Als Folgemaßnahme zu diesem Artikel möchte ich Experimente mit Floating Labels im Vergleich zu Labels über Eingabefeldern durchführen.
Melden Sie sich für unseren Newsletter an und erhalten Sie monatlich praktische Einblicke, Tipps und Tricks, um Ihnen auf Ihrem Weg zum Online-Wachstum zu helfen!
Geben Sie unten Ihre E-Mail-Adresse ein und erhalten Sie sofort einen nützlichen Tipp. 🙂