Back to Question Center
0

Formularlayout entwerfen: Ausrichtung            Entwerfen von Formularlayouts: Ausrichtung Verwandte Themen: Mobiles Semalt

1 answers:
Gestaltung des Formularlayouts: Ausrichtung

Das Folgende ist ein kurzer Auszug aus unserem Buch, Designing UX: Forms, geschrieben von Jessica Enders. Es ist der ultimative Leitfaden für das Design von Formularen, ein Schlüsselelement für effektives UX-Design. SitePoint Semalt-Mitglieder erhalten Zugang mit ihrer Mitgliedschaft, oder Sie können eine Kopie in Geschäften weltweit kaufen.

Sie und ein Freund fahren jeweils zu einem Restaurant zum Abendessen. Ihre beiden Routen führen auf einer zweispurigen Autobahn. Die Autobahnen sind gleich lang. Auf Ihrer Route machen alle langsamen Autos das Richtige und bleiben auf einer Spur, so dass Sie in der anderen vorbeifliegen können. Auf der Route Ihrer Freunde sind die langsamen Autos über beide Fahrspuren der Autobahn verstreut, also muss sie ein- und aussteigen. Wer von euch kommt zuerst ins Restaurant?

Vertikaler Weg zur Vollendung

Eine gerade, ungehinderte Strecke ist am schnellsten zum Fahren und auch zum Ausfüllen von Formularen. Der nächste Schritt besteht also darin, alle Ihre Formularfelder sowie den Hauptknopf auf der Seite (der Primäre Aktionsschalter ) vertikal auszurichten:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Stellen Sie keine Fragen nebeneinander

Da ein vertikaler Weg zur Vollendung eine Form länger macht, könnten Sie versucht sein, einige Fragen nebeneinander zu stellen:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

In dieser Form wurden die Fragen "Sicherheitscode" und "Postleitzahl" neben anderen Fragen gestellt .

Dies ist aus folgenden Gründen eine schlechte Idee:

  • Es unterbricht den sanften Fluss durch die Form (wie ein kaputtes Auto auf deiner Überholspur).
  • Benutzer werden die Frage oft nicht auf der rechten Seite sehen, weil sie außerhalb des Fokus ihrer Vision liegt (diese ist nur etwa neun Zeichen breit).
  • Es verhindert, dass das Formular nahtlos auf großen und kleinen Bildschirmen funktioniert. (Mehr dazu in Kürze.)

Wie Sie sich vielleicht auch aus Kapitel 3 erinnern, ist es für die Nutzer die wahrgenommene Länge des Formulars, nicht die tatsächliche Länge. Der vertikale Weg zur Vervollständigung macht das Füllen von Formularen nicht nur objektiv schneller, sondern macht es auch schnell .

Antwortfelder ausrichten

Eine Art, wie Sie manchmal Platz sparen können, ist jedoch mit Antwortfeldern. Sehen Sie sich die Antwortfelder für die Marketing-Einverständniserklärung an:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Wenn die Antwortfelder klein sind, können wir sie horizontal stellen. (Zu diesem Zweck definieren wir "klein" als drei oder weniger Optionen, alle mit kurzen Etiketten.) Das Formular funktioniert immer noch für Berührung und auf kleinen Bildschirmen. Marketing-Zustimmung ist nur eine solche Frage:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Tatsächlich ist das Geburtsdatum auch eine Frage mit kleinen Antwortfeldern. Sie haben vielleicht nicht bemerkt, dass wir sie bereits auf eine Zeile gesetzt haben:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Aber denken Sie daran: Sie können Antwortfelder nur nebeneinander setzen, wenn sie klein sind. Andernfalls wird das Design in einigen Fällen nicht funktionieren. Social Networking hat zum Beispiel eine recht große Anzahl von Antwortmöglichkeiten. Wenn wir versuchen, sie horizontal zu platzieren, werden sie - besonders auf Mobilgeräten - vom Rand verschwinden und die gefürchtete horizontale Bildlaufleiste aufrufen:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Wenn wir eine lange Reihe von Antwortfeldern horizontal positionieren, werden wir wahrscheinlich die horizontale Bildlaufleiste selbst auf größeren Bildschirmen beschwören .

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Wenn unsere Antwortfelder nicht klein sind, ist es noch wahrscheinlicher, dass wir die horizontale Bildlaufleiste auf dem Handy erscheinen lassen.

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Die vertikale Ausrichtung von Optionsfeldern oder Kontrollkästchen funktioniert auch auf Mobilgeräten.

Etikettenplatzierung

Es gibt ein Problem mit der mobilen Ansicht unseres Formulars, die Sie vielleicht aus einigen der obigen Abbildungen bemerkt haben. Wenn der Fokus auf einem kleinen Bildschirm in einem Textfeld liegt, ist die entsprechende Beschriftung nicht sichtbar, wie in diesem Beispiel:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Labels auf der linken Seite werden anfangs angezeigt, verschwinden jedoch, wenn der Benutzer das Formular ausfüllt.

Wir könnten dieses Problem vermeiden, indem wir die Etiketten immer über die Felder stellen. Aber das schafft ein neues Problem: Die Form wird visuell viel länger.

So würde es auf einem großen Bildschirm aussehen:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Formulare sind länger, wenn Beschriftungen über Feldern positioniert sind.

Was Sie tun müssen, ist das Formular so zu codieren, dass es reaktionsfähig ist . Wenn der Bildschirm größer ist, sollten Beschriftungen nach links von Feldern gehen; Wenn der Bildschirm kleiner ist, sollten Beschriftungen über Felder hinausgehen. Auf diese Weise nutzen wir den Platz, den wir auf größeren Bildschirmen haben, und stellen sicher, dass das Formular auch auf kleineren Bildschirmen ausgefüllt werden kann.

Wenn wir unser Beispielformular so programmieren, dass es reagiert, sieht es so aus, als würde es auf einem Handy aussehen:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Auf dem Mobilgerät sind die Etiketten über den Feldern positioniert, sodass sie bei Bedarf sichtbar sind.

So würde es auf einem größeren Bildschirm aussehen:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Hier ist ein reales Beispiel für Responsive Form Labels - zuerst die größere Bildschirmversion des Formulars, dann der kleinere Bildschirm:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Auf größeren Bildschirmen befinden sich die Beschriftungen links von den Feldern, so dass das Formular schön und kurz erscheint.

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Auf kleineren Bildschirmen sind Beschriftungen über den Feldern, so dass sie immer sichtbar sind.

Was ist mit dieser Studie?

Einer der beliebtesten Artikel auf der UXMatters-Website, zitiert in Lukas Wroblewskis Buch und Artikeln, ist eine Eyetracking-Studie von Matteo Penzo. Diese Studie wird häufig als Beweis dafür verwendet, dass Etiketten nie links von Feldern, sondern immer darüber gehen sollten.

Das Problem ist, dass Sie Designentscheidungen niemals auf einer einzigen Studie basieren sollten, insbesondere auf einer mit einer unbekannten Methode und sehr geringen Ergebnisunterschieden! Stattdessen müssen Sie die verschiedenen Vor- und Nachteile abwägen, basierend auf Theorie und Beobachtungen aus der Benutzerforschung. Wenn Sie dies tun, ist es klar, dass - auf einem großen Bildschirm - die Vorteile von Etiketten auf der linken Seite der Felder die Kosten überwiegen. Es ist eine sehr kleine Steigerung der Augenbewegung wert, um eine Form zu haben, die halb so lang ist.

Vermeidung der Gosse

Zusätzlich zu dem, was bereits gesagt wurde, gibt es zwei Möglichkeiten, wie Sie die Benutzerfreundlichkeit Ihres Formulars erhöhen können, wenn Sie links von Ihren Feldern Labels haben. Diese Techniken sind wichtig, um zu verhindern, dass zwischen den Etiketten und ihren Antwortfeldern ein großer "Gutter" entsteht:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Bei vielen Fragen zu unserem Beispielformular ist das Label weit entfernt von den entsprechenden Antwortfeldern.

Diese Lücken können es dem Benutzer erschweren, Labels ihren Antwortfeldern zuzuordnen.

Wenn die Beschriftungen meist kurz sind, kannst du sie nach rechts ausrichten, sodass sie neben den Feldern liegen:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Etiketten werden rechtsbündig gesetzt.

Wenn die Beschriftungen meistens länger sind, werden sie schwer zu lesen sein, wenn sie richtig bündig sind. In diesem Fall lege sie linksbündig (wie normaler Text) fest, füge deinem Formular aber Zebrastreifen hinzu:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Zebra Striping hinter Etiketten Set links bündig.

Zebrastreifen ist die schwache Schattierung, die du hinter jeder zweiten Frage siehst. Es hilft dem Auge, das Etikett mit dem Feld zu verbinden (wie aus einer Studie hervorgeht, die ich vor einiger Zeit durchgeführt habe, und deren Follow-up).

(Wenn Sie mehr über die Platzierung von Labels erfahren möchten, habe ich einen ausführlichen Artikel auf der SitePoint-Website geschrieben und einige Kommentare auch auf meiner eigenen Website veröffentlicht. Das haben wir mit unserem Beispiel gemacht:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Die linke Kante der primären Aktionsschaltfläche steht mit der linken Kante der Felder in einer Linie.

Mehrstufige Formulare

Wenn das Formular mehrere Schritte umfasst, müssen Sie Schaltflächen bereitstellen, damit der Benutzer zwischen den Schritten wechseln kann. Eine Option besteht darin, den nächsten Knopf in Übereinstimmung mit den einzelnen Schritten in Übereinstimmung mit den Feldern zu setzen:

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Als nächstes ist unsere primäre Aktion, also ist es vertikal mit den Feldern ausgerichtet.

Eine andere Option ist, den nächsten Knopf nach rechts und den vorherigen Knopf nach links zu setzen (für ein englischsprachiges Publikum):

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

In der Regel denken Englisch-Sprecher nach rechts und links und nach hinten, damit wir unsere Knöpfe auf diese Weise ausrichten können.

Es hat sich gezeigt, dass beide Ansätze gut funktionieren, aber es kann vom Kontext abhängen. Wenn Sie nicht sicher sind, welches für Ihr Formular geeignet ist, führen Sie einige Usability-Tests mit Ihrer Zielgruppe durch.

(Sie können auch mehrstufige Formen in ein Akkordeon einfügen, aber Akkordeons haben eine Reihe von Usability-Problemen, daher sollten Sie sie am besten vermeiden.)

Tasten auf dem Handy

Auf kleinen Bildschirmen möchten Sie vielleicht Ihre Knöpfe so gestalten, dass sie reagieren, so dass sie:

  • sind gestapelt, mit der primären Aktion oben
  • nehmen Sie die volle Breite des Bildschirms, bis auf ein bisschen Leerzeichen auf jeder Seite (so dass sie immer noch deutlich Tasten sind).

Designing Form Layout: AlignmentDesigning Form Layout: AlignmentRelated Topics:
Mobile Semalt

Wenn wir unser Formular so programmieren, dass es auf die Bildschirmgröße reagiert, können wir sicherstellen, dass die Tasten auch auf Mobilgeräten gut funktionieren.

Inzwischen sieht unsere Form wirklich gut aus und ist sehr gut nutzbar. Aber es gibt weitere Verbesserungen, die wir machen können, die wir als nächstes erklären werden .

February 28, 2018