Back to Question Center
0

Gestaltung des Formularlayouts: Abstand Entwerfen von Formlayout: Abstand Verwandte Themen: Mobiles Design Logo Semalt

1 answers:
Gestaltung des Formularlayouts: Abstand

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 - 1 grain is.

Wir können auf subtile Weise mit dem Benutzer durch ein paar Abstandsänderungen kommunizieren.

Nähe

Menschen sehen Dinge, die nahe beieinander liegen, als verwandt. Umgekehrt haben Dinge, die nicht verwandt sind, normalerweise etwas Abstand zueinander.

Diese Prinzipien sagen uns, dass wir die Teile eines Fragezeichens, der Frage-Ebene-Hilfe und der Antwortfelder eng zusammenlegen müssen. Dafür ist unsere Form bisher ziemlich gut, aber lasst uns die Labels ein wenig nach rechts verschieben, damit sie näher an ihren Feldern sind:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Flush right-Labels sollten in der Nähe ihrer Felder sein.

Auf der anderen Seite muss zwischen jeder Frage ein gewisser Abstand bestehen:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Fragen sollten so weit auseinander liegen, dass klar ist, wo das eine endet und das nächste beginnt.

Denken Sie daran, wie der Fokus der Vision eines Benutzers etwa neun Zeichen breit ist? Nun, das bedeutet, dass Hilfe auf Fragenebene, die sich auf der rechten Seite eines Feldes befindet, oft nicht gesehen wird:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Ihre Konzentration auf Felder bedeutet, dass viele Benutzer die Frage-Ebene-Hilfe in dieser Form nicht einmal sehen werden.

Wir könnten die Frage-Ebene-Hilfe unter das Feld verschieben, aber das bedeutet, dass die Benutzer sie erst sehen, nachdem sie geantwortet haben. Es ist auch weniger zugänglich.

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Hilfe auf Fragenebene unter dem Feld ist nicht besonders nützlich oder zugänglich.

Der beste Platz für Hilfe auf Fragenebene ist zwischen dem Etikett und dem Feld (wie im Bild unten gezeigt). Formatierungsanweisungen - wie das TT MM YYYY am Geburtsdatum - sollten über das Feld hinausgehen:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Formatierungsanweisungen über dem Feld positioniert

Andere Frage-Ebene-Hilfe sollte unter dem Etikett gehen. Beispiele dazu finden Sie in den Fragen ABN, Mitarbeiter und Marketing:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Andere Hilfe auf Fragenebene unterhalb des Labels.

Schließlich, wenn wir Kontrollkästchen und Optionsfelder verwenden, müssen wir sicherstellen, dass die Labels in der Nähe der rechten Schaltfläche oder Box sind. Wenn sie zu weit weg sind, werden die Dinge verwirrend, besonders wenn du den Touchbereich nicht schattierst:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Der Abstand zwischen den Bezeichnungen "Ja" und "Nein" und den entsprechenden Optionsfeldern bedeutet, dass der Benutzer stehen bleiben und nachdenken muss.

Hier ist eine noch extremere Darstellung von schlecht beabstandeten Etiketten auf Radiobuttons:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Es ist wahrscheinlich, dass viele Benutzer angesichts der geringen Abstände hier eine unbeabsichtigte Bewertung abgeben werden.

Textfeldbreiten

Während wir den Abstand anpassen, lassen Sie uns die Breite unserer Textfelder anpassen.

Abgesehen von den Textfeldern für das Geburtsdatum haben alle unsere Textfelder dieselbe Breite:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Die Breite eines Textfelds teilt dem Benutzer jedoch mit, welche Art von Information benötigt wird. Die Benutzererfahrung wird besser, wenn wir die Größen proportional zu den erwarteten Informationen machen (wie wir es bereits mit dem Geburtsdatum getan haben):

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Beachten Sie, dass wir hier über visuelle Breite sprechen, nicht akzeptable Anzahl an Zeichen. Das Feld für die E-Mail-Adresse kann wie abgebildet eine sichtbare Breite haben, sollte jedoch bis zu 256 Zeichen lang sein.

Leere Textfelder

Ein anderer wichtiger Aspekt des Textfeldabstandes ist der Raum, den sie innen haben . In diesem leeren Raum wissen die Benutzer, dass sie etwas eingeben müssen.

Viel zu viele Formen haben Textfelder, die nicht leer sind.

Keine Hintergrundfarbe

Gib deinen Feldern keine Hintergrundfarbe . Hintergrundfarbe in Feldern lässt sie wie Schaltflächen aussehen (genauso wie Schaltflächen ohne Hintergrundfarbe wie Felder aussehen):

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

In diesem Formular sieht die Hintergrundfarbe Felder wie Schaltflächen aus und umgekehrt.

Eine einfache Umrandung an vier Seiten reicht aus, um den Benutzern zu zeigen, wo sie tippen müssen:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Sie brauchen nicht viel, um den Benutzern zu zeigen, wohin ihre Antworten gehen.

Achte nur darauf, dass deine Grenze zu sehen ist:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Die Feldgrenzen auf dieser Form sind so leicht, dass sie fast unmöglich zu sehen sind.

Kein Platzhaltertext

Noch schlimmer als eine Hintergrundfarbe ist das Einfügen von Text in das Feld. Der einzige Text, der in einem Feld erscheinen sollte, ist die Antwort des Benutzers!

Ein solcher Text, auch bekannt als Platzhaltertext , ist leider viel zu häufig. Manchmal ist es das Feldlabel:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Manchmal ist es Hilfe auf Fragenebene:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Hilfe auf Fragenebene, die in Feldern angezeigt wird.

Manchmal ist es einfach nur nutzlos:

Designing Form Layout: SpacingDesigning Form Layout: SpacingRelated Topics:
Mobile DesignLogo Semalt

Sinnlose Information innerhalb von Feldern.

Es ist so wichtig, dies nicht zu tun, ich werde es noch einmal sagen. Fügen Sie niemals Text in Ihre Felder ein . Es verschlechtert die Formularerfüllung dramatisch, da viele Benutzer Folgendes tun werden:

  • denke, dass die Frage bereits beantwortet wurde und Fehler ausgelöst hat
  • Lassen Sie den Platzhaltertext dort liegen und vermasseln Sie Ihre Daten
  • den Platzhaltertext nicht sehen, bevor er verschwindet (besonders wenn er beim Tippen auf die Tastatur schaut)
  • nicht in der Lage, den gesamten Platzhaltertext zu sehen, da er durch die sichtbare Breite des Feldes begrenzt ist
  • vergiss was das Label sagte
  • vergiss, was die Frage-Ebene-Hilfe gesagt hat
  • finde den Text zu klein zum Lesen
  • nicht in der Lage sein, ihre Antworten zu überprüfen
  • haben größere Probleme bei der Fehlerkorrektur.

Darüber hinaus ist Text innerhalb von Feldern oft nicht zugänglich, und das Platzhalterattribut wird nicht in allen Browsern genau unterstützt. (Es war einmal der Fall, dass der Platzhaltertext für die Zugänglichkeit benötigt wurde, da die Bildschirmleser das Formularfeld nicht immer ankündigten. Jetzt verwenden Bildschirmleser konsistent das -Element , um den Zweck anzugeben eines Feldes.)

"Aber es spart Platz!", Werden einige Designer protestieren. Das ist richtig. Aber dieser Raum wird eingespart auf Kosten der Tatsache, dass er das Formular tatsächlich ausfüllen kann . Tu es nicht. Setzen Sie Ihren Text einfach außerhalb Ihrer Felder.

February 28, 2018