Artikeleinführung von Wulin.com (www.vevb.com): Eine kurze Diskussion über das Formell Design im täglichen Webdesign.
Das Eingangsfeld (Eingabe) sollte logisch in Gruppen unterteilt werden, damit das Gehirn die Beziehung zwischen großen Bereichen gut bewältigen kann. - "Autoritative HTML -Handbuch"
Webanwendungen verwenden immer Formulare, um die Dateneingabe und -konfiguration zu verarbeiten, aber nicht alle Formulare sind konsistent. Die Ausrichtung des Eingabebereichs, der jeweiligen Etiketten, Betriebsmethoden und der umgebenden visuellen Elemente wirkt sich mehr oder weniger auf das Verhalten des Benutzers aus.
Formlayout
Wenn man bedenkt, dass der Benutzer das Formular so kurz wie möglich ausfüllen sollte und die gesammelten Daten dem Benutzer vertraut sind (wie Name, Adresse, bezahlte Informationen usw.), können vertikal ausgerichtete Beschriftungen und Eingabefelden als die besten bezeichnet werden. Jedes Paar von Tags und Eingangsboxen ist vertikal ausgerichtet, um das Gefühl zu vermitteln, dass es beider ist, und eine konsistente linke Ausrichtung verkürzt die Augenbewegung und die Verarbeitungszeit. Der Benutzer muss sich nur in eine Richtung bewegen: unten.
In diesem Layout werden fettgedruckte Etiketten empfohlen, die ihr visuelles Gewicht erhöhen und ihre Bedeutung erhöhen können. Wenn nicht mutig, ist der Text des Tag- und Eingabefelds aus Sicht des Benutzers fast gleich.
Wenn die Daten in einem Formular nicht vertraut oder logisch gruppiert sind (z. B. mehrere Komponenten einer Adresse), können links ausgerichtete Tags die Informationen des Formulars leicht lesen. Benutzer müssen nur auf das Etikett in der linken Spalte nach oben und unten schauen, ohne ihr Denken durch den Eingabefeld zu unterbrechen. Auf diese Weise wird der Abstand zwischen dem Etikett und dem entsprechenden Eingabefeld normalerweise durch eine längere Etikette verlängert, die die Zeit zum Ausfüllen des Formulars beeinflussen kann. Der Benutzer muss hin und her springen, um die beiden entsprechenden Tags und Eingabefelder zu finden.
Dadurch wird eine alternative Lösung für das rechtsgerichtete Layout der Tags erstellt, wodurch die Verbindung zwischen den Tags und den Eingangsboxen genauer wird. Das Ergebnis ist jedoch, dass die ungleichmäßigen Rohlinge und Beschriftungen auf der linken Seite es den Benutzern schwierig machen, schnell das, was das Formular ausgefüllt werden muss, schnell abzurufen. In westlichen Ländern sind die Menschen daran gewöhnt, von links nach rechts zu schreiben, sodass dieses rechtsgerichtete Layout für Benutzer Lasthenie verursacht.
Mit Hilfe von visuellen Elementen
Aufgrund der Vorteile des links ausgerichteten Layouts des Etiketts (leicht zu abrufen und vertikaler Höhe) ist es verlockend, die Hauptnachteile zu korrigieren (die Trennung des Etiketts und des Eingabefeldes).
Eine Lösung besteht darin, Hintergrundfarben und geteilte Linien hinzuzufügen. Unterschiedliche Hintergrundfarben erzeugen eine Spalte mit vertikalen Beschriftungen und eine Spalte vertikaler Eingangsboxen. Jeder Satz von Beschriftungen und Eingangsboxen wird durch klare horizontale Linien getrennt. Obwohl das gut klingt, gibt es immer noch Probleme.
Vergleiche die vorherige Form (subjektive visuelle Unterscheidung des Benutzers) und fügt 15 visuelle Elemente hinzu: mittlere Linien, Hintergrundfarben und horizontale Linien. Diese Elemente lenken die Aufmerksamkeit des Benutzers ab und erschweren es dem Benutzer, sich auf wichtige Elemente wie Tags und Eingabefelden zu konzentrieren. Wie Edward Tufte betonte: Es gibt Unterschiede in der Information selbst, was zwangsläufig zu sensorischen Unterschieden führt. Mit anderen Worten, jedes visuelle Element, das für das Layout nutzlos ist, stört das Layout ständig. Wenn Sie versuchen, die Tags links zu durchsuchen, werden Sie feststellen, dass Ihr Sehvermögen immer unterbrochen wird, halten Sie an, um über diese horizontalen Linien, Zellen und Hintergrundfarben nachzudenken.
Dies bedeutet natürlich nicht, Hintergrundfarben und Linien aufzugeben. Sie sind immer noch sehr effektiv bei der Aufteilung relevanter Bereichsinformationen. Beispielsweise kann eine dünne horizontale Linie oder eine helle Hintergrundfarbe visuell mit relevanten Daten kombiniert werden. Hintergrundfarben und -Leitungen sind besonders effektiv für die Hauptbetriebstasten, die die Form unterscheiden.
Primär- und Sekundäroperationen
Der Hauptbetrieb eines Formulars (normalerweise einreichen oder sparen) erfordert ein relativ starkes visuelles Gewicht (im obigen Beispiel, hellen Töne, fetthaltigen Schriftarten, Hintergrundfarben usw.). Dies entspricht dem Benutzer eine Eingabeaufforderung: Sie haben das Formular ausfüllen.
Wenn ein Formular mehrere Operationen aufweist, z. B. Fortsetzung und Rückkehr, ist es erforderlich, das visuelle Gewicht der Sekundäroperationen zu verringern. Dies minimiert das Risiko potenzieller Betriebsfehler für Benutzer.
Obwohl der oben genannte Inhalt es besser ermöglicht, Formulare zu entwerfen und Layout zu kombinieren, müssen visuelle Elemente und Inhalte weiterhin Benutzertests und Datenanalyse (Abschlussbewertung, Fehlerberichterstattung usw.) erfordern.