it-swarm.com.de

Gute UX für ein Formular

Ich arbeite an einem UI-Design. Ich habe gute CSS/HTML-Kenntnisse. Aber nicht gut in UX.

Das angehängte Bild ist die Benutzeroberfläche, die ich für eine Seite erstellt habe.

enter image description here

Ich habe versucht, es auf fast 10 Arten zu ändern, aber mein Kunde sagt, es sieht komisch aus.

Ich kann Felder einzeln erstellen. Das Problem ist, dass eine Bildlaufleiste angezeigt wird.

Wie kann ich die UX dieses Formulars verbessern?

Jede Probe oder https://gomockingbird.com/ Art von Drahtrahmen/Vorschläge sind willkommen

Das Formular hat eine feste Breite von 960 Pixel.

16
Billa

Sie haben viele Informationen in dieser Form - sie sind nicht sehr gut organisiert. Unterteilen Sie die Formularfelder in logische Gruppen, um den Benutzer zu orientieren und zu führen (das HTML-Feldset und die Legenden-Tags funktionieren hier gut). Präsentieren Sie auch einen einheitlichen visuellen Stil - im Moment sind Ihre Eingaben überall. Richten Sie Ihre Formularfelder so aus, dass das Auge des Benutzers das Formular problemlos scannen kann. Unten sehen Sie eine Beispieloberfläche (ich habe nicht alle Ihre Felder eingeschlossen, weil ich nicht sicher war, wie ich sie kategorisieren soll):

mockup

bmml source herunterladen - Wireframes erstellt mit Balsamiq Mockups

36
Joshua Barron

Das Problem ist, dass Ihre Seite ohne Struktur ist, was es dem Benutzer schwer macht zu wissen, wo er anfangen soll, wohin er als nächstes gehen soll usw.

Es gibt zahlreiche Hinweise darauf, dass die vertikale Ausrichtung aller Felder die Benutzerfreundlichkeit verbessert und Zeit, Belastung und Fehler minimiert.

Sicher, es ist schön, wenn möglich das Scrollen zu vermeiden, aber die Benutzer arbeiten sehr zufrieden mit ihnen. Selbst wenn Sie die Felder so darstellen, wie Sie sie hier haben, gibt es keine Garantie, dass Sie eine Bildlaufleiste aufgrund unterschiedlicher Bildschirm- und Fenstergrößen, Bildschirmauflösungen, Zoomstufen usw. vermeiden.

Joshua's Der Vorschlag, Felder in Abschnitte zu gruppieren, könnte ebenfalls die Erfahrung verbessern. Es gibt jedoch auch Hinweise darauf, dass Personen ihre Entscheidungen darüber, welche Felder ausgefüllt werden müssen, manchmal auf die Relevanz der Abschnittsüberschriften stützen.

Ich würde Ihre Feldetiketten bündig rechts halten (d. H. Gegen das Feld stoßen), anstatt links bündig zu halten, da Joshua sie in seinem Modell hat. Dies erleichtert dem Benutzer das Zuordnen von Beschriftungen zu Feldern.

Alles in allem ist die Ausrichtung für die Benutzererfahrung der Formulare sehr wichtig. Wenn Sie mehr darüber lesen möchten, habe ich ein ausführlicher Beitrag auf meiner Website geschrieben, das über die vier verschiedenen Orte spricht, an denen die Ausrichtung in einer Form ins Spiel kommt.