it-swarm.com.de

Formularlayout. Vertikale Beschriftungen vs horizontale Beschriftungen. Bilder im Inneren

Nach dem Lesen von http://www.lukew.com/ff/entry.asp?1502 und http://www.uxmatters.com/mt/archives/2006/07/label -placement-in-forms.php Das Platzieren von Beschriftungen über Eingabefeldern ist vorzuziehen. Wenn Sie sie jedoch links von Eingabefeldern platzieren möchten, müssen Sie sie mindestens rechtsbündig ausrichten.

Ich muss ein Formular für einen Benutzer entwerfen, um Kundendatensätze zu erstellen. Ich meine, viele Felder und der Benutzer muss diesen Vorgang mehrmals täglich an seinem Tag ausführen.

Zuerst verwende ich horizontale Beschriftungen und zentriere das Formular auf dem Bildschirm enter image description here

Dann entscheide ich mich, die maximale horizontale Größe des Bildschirms zu verwenden, also habe ich mich dafür entschieden enter image description here

Und nachdem ich die Artikel gelesen hatte, habe ich das getestet enter image description here

Immerhin denke ich, dass die 1 die beste und die 3 die schlechteste ist. Was denkst du? Könnten Sie mir bitte einen Rat zum Layout eines Formulars mit vielen Steuerelementen geben, das täglich mehrere Stunden von einem Benutzer verwendet wird?.

7
fjrr

Sie sollten Ihr Formular in sinnvolle Abschnitte unterteilen. Ein langes Formular ist für einen Benutzer unglaublich anstrengend und wirft Probleme auf, falsche Informationen einzugeben und dann das gesamte Formular erneut ausfüllen zu müssen.

Wenn Sie ein detailliertes Schritt-für-Schritt-Formular mit einem Hinweis darauf, was vor Ihnen liegt, und möglicherweise einfachem Zugriff auf das, was der Benutzer in der Vergangenheit bearbeitet hat, bereitstellen, wird das Ausfüllen des Formulars weniger mühsam und zielgerichteter. Wenn Sie das Formular verkleinern, hat der Benutzer das Gefühl, mehr zu erreichen, selbst wenn er dieselben Informationen ausfüllt. Teilen Sie Ihr Formular jedoch nicht zu stark auf, sondern erhöhen Sie auch die Zeit, die zum Ausfüllen des Formulars benötigt wird.

Ich weiß, dass ich dieses Buch bereits erwähnt habe, aber es ist eine wirklich gute Lektüre, und jeder sollte es lesen. Ich denke, ich werde es bald wieder lesen. 100 Dinge, die jeder Designer über Menschen wissen muss

Wenn Sie ein einseitiges Formular verwenden möchten, ist dies die beste Option:

(enter image description here

BEARBEITEN:

Die anderen beiden Optionen sind überladen (insbesondere 3), und es sieht so aus, als hätten Sie in Ihrem Prozess, wenn Sie die Richtlinien befolgen, das Formular als Raster angezeigt. Versuchen Sie vielleicht eine Option, bei der sich noch alles in einer Zeile auf der Seite befindet, aber mit den obigen Beschriftungen?

2
NotSimon

Wenn sich alle diese Felder auf derselben Seite befinden müssen, verwenden Sie Feldsatzsteuerelemente, um Gruppen zu erstellen. Wenn Sie beispielsweise Ihren ersten Screenshot betrachten, haben Sie 4 bis 5 klar unterscheidbare Bereiche, die sich auf ihrem eigenen Feldsatz befinden können. Außerdem sollten Sie einige hinzufügen weißer Raum zwischen ihnen.

Wenn Sie für jeden Abschnitt auch einen Titel angeben können, tragen Sie wesentlich zur Benutzerfreundlichkeit des Formulars bei.

Eine andere Sache, Sie sollten keine Formularfelder unter der Aktionsschaltfläche haben. "El cliente es promotor" sollte sich vor der Schaltfläche befinden. Wenn es sich nicht auf einen der vorherigen Bereiche bezieht, können Sie einen Abschnitt nur dafür erstellen, aber nicht. t lass es danach.

Zum Erstellen der Abschnitte können Sie die Rahmeneigenschaft des Feldsatzes verwenden, aber Sie können auch eine helle Farbe verwenden, die ausreicht, um einen visuellen Bereich zu erstellen.

In dem Abschnitt, der sich auf den Standort bezieht, sollten Sie die zweite Spalte etwas nach rechts verschieben und zwischen ihnen etwas freien Platz lassen.

Eine andere Sache, die die Lesbarkeit verbessert, besteht darin, dass alle Eingabefelder und Dropdowns dieselbe Länge haben, was dem Layout Einheitlichkeit oder Konsistenz verleiht.

1
PatomaS

In Situationen, in denen der Benutzer mit dem Formular im Allgemeinen vertraut ist (und dies nach zehnmaligem Ausfüllen sein wird), wird von der Platzierung über dem Feld im Allgemeinen abgeraten.

Rechtsausrichtung wäre per se immer noch sinnvoll.

Eine große Frage ist, ob diese Formulare meistens gelesen oder geschrieben werden.

Vorausgesetzt, es ist viel geschrieben, ist ein wirklich wichtiger Schlüsselfaktor Tastaturbedienung: Es ist einfach viel bequemer, sich den ganzen Tag durch eine große Datenmenge zu bewegen, als auf Dinge zu klicken.

Während dies bei Webformularen nicht der Fall ist, ist es hier so: Die Menschen sind bereit, Dinge zu lernen, wie z. B. die Handhabung der Tastatur, da dies ihr Leben erleichtert, während die Menschen sie bei Websites normalerweise einmal im Leben sehen.

Falls ein Etikett nicht passt, können Sie es kürzen und einen Tooltip bereitstellen, anstatt das Layout zu beschädigen, da Benutzer die Abkürzung höchstens am zweiten Arbeitstag kennen, ihre Augenbewegung jedoch jedes Mal unterbrochen wird.

Es ist wichtig, im Allgemeinen eine einzelne vertikale Ausrichtungslinie für jede Information beizubehalten. Das heißt, die Benutzer sollten in der Lage sein, das Formular vertikal nach den benötigten Feldern zu durchsuchen, ohne nach links oder rechts zu schauen.

Natürlich passt nicht alles in eine einzelne Zeile, aber im Allgemeinen, wenn es Informationen gibt, die irgendwie besonders sind und wahrscheinlich nicht auf die gleiche Weise wie die anderen Informationen (wie eine vollständige Adresse) nachgeschlagen werden, dann kann eine eigene Spalte haben.

Im Allgemeinen müssen Sie die Informationen in Spalten anordnen, sowohl in die Beschriftungen als auch in die Felder, und für jedes Feld eine einheitliche Breite, Dachrinne (Lücke) und Grundlinie (vertikaler Abstand, Zeilenhöhe) beibehalten: Alle Felder sollten die gleiche Breite und alle Beschriftungen haben sollte die gleiche Breite wie die Felder haben, sollte der Abstand zwischen Beschriftung und Feld (bei richtiger Ausrichtung) konsistent sein. Diese werden im visuellen Design als "Gitter" bezeichnet.

Verwenden Sie diese Spalten und die Grundlinie als Einheiten: Sie können eine ganze Spalte oder Zeile weglassen, wenn Sie zwei Formularabschnitte trennen möchten. Sie können Felder mit doppelter Spaltenbreite oder doppelter Grundlinienhöhe verwenden, aber denken Sie immer an diese Einheiten und an ihren Grenzen ausrichten.

Sie müssen keine hyper-strenge Reihenfolge der Feldzeilen einhalten (da Benutzer ohnehin alle Zeilen scannen), obwohl empfohlen wird, die Felder am häufigsten zuerst nachzuschlagen, da sie den Scanvorgang beenden, sobald sie das gefunden haben, was sie gefunden haben gesucht haben, aber Sie müssen absolut trivial logische Gründe haben, um einige Informationen in eine andere Spalte zu setzen: "Ich hatte keinen Platz mehr" schneidet es einfach nicht.

Das Wichtigste ist jedoch: Fragen Sie Ihre Benutzer . Zeigen Sie ihnen Ihre Designideen, beobachten Sie sie, während sie versuchen, sie zu verwenden, zeichnen Sie sie zur weiteren Bewertung auf (sowohl Bildschirm als auch Gesicht), und verwenden Sie Eyetracking, wenn das Budget (das Hacken einer Webcam in ein Tool kostet etwa 200 USD oder gleichwertig) liegt weiß, was sie sehen.

1
Aadaam

Ich würde das gleiche tun und es in Spalten aufteilen. Stellen Sie sicher, dass Ihre Spalten durch Hintergrundfarben oder Rahmen klar gekennzeichnet sind. Es verhindert, dass das Auge vorzeitig in die nächste Spalte fließt.

Es gibt auch eine wirklich PDF da draußen namens Web Forms: Ausfüllen der Lücken

1
Adam C

Wie in Ihren Kommentaren zum Beitrag erwähnt, ist User Experience Stack Exchange (http://ux.stackexchange.com) wahrscheinlich ein besserer Ort dafür.

Um hier ein paar Ausschnitte zu geben ...

Der Zweck der Rechtsausrichtung von Beschriftungen (was keines Ihrer Beispiele tut) besteht darin, den horizontalen Leerraum zwischen Beschriftung und Eingabefeld zu verringern. Dies reduziert die Scanzeit und verbessert die Fähigkeit des Benutzers, die richtige Beschriftung für das zugehörige Eingabefeld besser zu identifizieren.

Durch die Ausrichtung nach rechts werden neben der Eingabe von Beschriftungen über dem Eingabefeld auch die linke Seite aller Eingabefelder an derselben horizontalen Position ausgerichtet. Der Benutzer kann direkt auf der Seite scannen, und die Zeile ganz links in jedem Eingabefeld befindet sich für jede Zeile an derselben Position. Dies verbessert das visuelle Scanmuster der Seite.

Außerdem sollten Felder im Allgemeinen dieselbe Größe haben. Wenn Sie von einer Zeile zur nächsten wechseln, sollte dies kein Eingabefeld ergeben, das länger/kürzer als die anderen ist.

Ein weiterer Punkt ist das Einfügen von Eingabefeldern sowohl in die vertikale als auch in die horizontale Ebene. Der Benutzer muss nun sowohl von oben nach unten als auch von links nach rechts scannen. Das ist nicht ideal. Ein einzelnes visuelles Scanfeld wird bevorzugt.

Natürlich gibt es immer Ausnahmen von den Regeln. Sie finden UX-Leute, die mit anderen nicht einverstanden sind. Als UX-Person stimme ich im Allgemeinen den Artikeln zu, die Sie in der Frage gepostet haben.

1