Formularetikettenposition für beste Benutzerfreundlichkeit

16

Ich erstelle eine Form , die einen Besucher für ihre fragen firstname, middle initialund lastname. Ich möchte, dass diese Textfelder alle inline sind, aber wo soll ich die Beschriftungen platzieren? Links, oben oder unter den Feldern.

Ich bin auf der Suche nach dem besten Ansatz aus Sicht der Benutzerfreundlichkeit.

html usability user-input forms Shane Stillwell
quelle
Ist dies für uxexchange.com nicht angemessener? ( uxexchange.com )
Bobby Jack
Wow, ich wusste nicht, dass uxechange.com existiert, danke. Gemessen an der Anzahl der abgegebenen Stimmen zu dieser Frage ist dies definitiv ein Problem der Pro-Webmaster.
Shane Stillwell
Ja, es ist ein Problem. Ich glaube, dass uxexchange mit dem alten SO-Modell eingerichtet wurde. Websites, die das neue Modell verwenden, wie z. B. Webmaster, scheinen viel mehr Aufmerksamkeit zu erhalten. Etwas, das für uxexchange relevanter ist, wird also für Webmaster erfolgreicher. Ich bin mir nicht sicher, was die Lösung ist - uxexchange migrieren?
Bobby Jack

Antworten:

10

Schauen Sie sich diese Studie von UXmatters an . Es ist ziemlich ausführlich, enthält Daten zum Eye-Tracking und kommt zu dem Schluss, dass Etiketten oben die beste Lösung sind.

Es gibt einen ähnlichen Artikel von Luke Wroblewski , der auch ziemlich ausführlich ist. Beide Artikel sind lesenswert!

Grant Palin
quelle
+1 Ich wollte genau die gleichen Ressourcen posten. Wirklich, jede Antwort auf diese Frage sollte Studien beinhalten.
Virtuosi Media
Dies ist, was ich gesucht habe, einige Vergleiche von links gegen oben. Ich bin sicher, dass vieles subjektiv ist, aber trotzdem sollte es einige Layouts geben, die etwas besser sind, wenn alle Dinge gleich sind. Vielen Dank.
Shane Stillwell
Interessant an dem Artikel von UXmatters war auch, dass fett gedruckte Etiketten die Besucher ablenkten und ... "Fett gedruckte Etiketten waren für die Benutzer schwieriger zu lesen und wahrzunehmen - wahrscheinlich, weil der fett gedruckte Text und die schweren angrenzenden Ränder visueller verwirrender waren der Eingabefelder. " Gut zu wissen.
Shane Stillwell
keine negative nelly sein, aber uxmatters.com hat keinen "top articles" abschnitt oder benutze sogar google webmaster tools damit ich ihre meistgelesenen artikel finden kann, was nicht sehr benutzerfreundlich ist!
Neil McGuigan
5

Das Wichtigste ist, dass Sie mit dem Rest Ihrer Site übereinstimmen. In der Regel werden auf den meisten Websites die Bezeichnungen links von den Textfeldern angebracht. In diesem Fall wäre es eine lange Beschreibung, also stellen Sie sicher, dass Sie Platz haben und es gut fließt.

Wenn links nicht richtig aussieht oder es keinen Platz dafür gibt, dann würde ich oben tun. Da ist das ganz klar.

Die einzige Methode, die ich vermeiden würde, besteht darin, die Beschriftungen unter den Textfeldern zu platzieren. Wenn sich die Beschriftungen unter den Feldern befinden, ist dies verwirrender.

Ben Hoffman
quelle
3
Vergessen Sie forauf keinen Fall das Attribut.
Pierre-Alain Vigeant
4

Normalerweise ist es für Ihre Situation am besten, oben oder links zu sein. Stellen Sie sicher, dass das Etikett vor dem Eingabefeld für die Barrierefreiheit steht.

Dennoch gibt es viele verschiedene Möglichkeiten, eine Seite zu gestalten und erreichbar zu sein.

Formularbeschriftungen können praktisch überall angezeigt werden, wo Sie sie möchten, solange sie noch vorhanden sind. Dieser Rückgriff ist einen Blick wert, http://patterntap.com/tap/collection/forms

Kevin
quelle
3

Es gibt zwei Optionen, die als am besten angesehen werden:

  • Beschriftungen links vom Feld, rechts gespült, damit sie sich in der Nähe der Eingabe befinden.
  • Beschriftungen über dem Feld selbst

Ein weiterer wichtiger Punkt, den Sie für die Benutzerfreundlichkeit beachten müssen, um sicherzustellen, dass Sie das Attribut for des Etiketts verwenden, damit sich das Klicken auf das Etikett auf das beschriftete Feld konzentriert.

GSto
quelle
1

Antwort: Keine der oben genannten. Verwenden Sie Platzhaltertext innerhalb des Felds. Das Platzhalterattribut ist ein integrierter Bestandteil von HTML-5.

Ansonsten würde ich sagen, linksbündig über die Felder setzen.

Adam L Davis
quelle
0

Dies ist ein bisschen tangential - aber bitte verwenden Sie nicht Vorname / Nachname / Initiale. Nicht jeder Name fällt in diese ordentliche Gruppierung.

Ich zitiere mich über StackOverflow:

In vielen asiatischen Kulturen steht der Familienname an erster Stelle, da die Familie wichtiger ist als der Einzelne.

Da es eine ganze Reihe von Personen gibt, die einen Namen verwenden, der nicht von ihren Eltern vergeben wurde, habe ich das folgende Schema mit einigem Erfolg angewendet:

Vollständiger Name (wie normalerweise für die Adressierung von E-Mails geschrieben); Familienname; Bekannt als (der im Gespräch häufig verwendete Name).

Z.B:

Vollständiger Name: William Gates III; Familienname: Gates; Bekannt als: Bill

Vollständiger Name: Soong Li; Familienname: Soong; Bekannt als: Lisa

Weitere Informationen finden Sie unter /programming/259634/splitting-a-persons-name-into-forename-and-surname/259694#259694 .

Bevan
quelle
Ich sehe den Wert in Ihrer Empfehlung, aber die Schlüsselfrage lautet: "Wer ist Ihre Zielgruppe?" Wenn 99% meiner Zielgruppe Amerikaner sind, würde ich mich für Vorname / MI / Nachname entscheiden. Ich denke, viele Amerikaner würden nicht sofort verstehen, was ein Familienname wäre. Wie @RandomBen sagte, müssen Sie konsistent sein und die meisten US-Sites verwenden Vorname / MI / Nachname.
Shane Stillwell