Bestes Design für ein langes HTML-Eingabeformular

Question

Ich bin dabei, ein langes HTML-Eingabeformular zu entwerfen und diskutiere zwischen einigen Gestaltungsmöglichkeiten:

1. Einseitiges langes Formular, bei dem die Benutzer nach unten scrollen müssen
2. Mehrere Seiten, bei denen Sie für jede neue Seite auf "Weiter..." klicken müssen
3. Verwenden Sie einen Tabulator AJAX-Schnittstelle um die Formulareingaben zu organisieren, sondern Registerkarten.

Gibt es dazu Untersuchungen oder bewährte Verfahren?

Answer 1

Bei einem langen Formular, das den ganzen Tag über für die Dateneingabe verwendet wird, gewöhnen sich die Benutzer schnell an das Layout. Diejenigen, die die Tastatur beherrschen, werden nicht gerne mit der Maus zwischen den Steuerelementen navigieren. Wenn Sie die Reihenfolge der Tabulatoren festlegen und ein langes, vertikal scrollendes Formular verwenden, kann dies den Dateneingabearbeitern gefallen. Sie können die Datenfelder viel schneller ausfüllen, als wenn sie mit der Maus zwischen den Registerkarten oder den Schaltflächen "Weiter" herumklicken müssen.

Das Beste aus beiden Welten: Ein interessanter Hybrid, den ich verwendet habe, erlaubte es dem Benutzer, den Anzeigestil zu wählen. Personen, die Daten eingeben, konnten die lange, vertikal scrollende Version sehen. Andere Benutzer, die die Daten nur ansehen (und möglicherweise ausgewählte Felder bearbeiten), konnten eine Version mit Registerkarten sehen, die das vertikale Scrollen vermeidet. Wir nutzten die Personalisierung, um die Präferenz des Benutzers für die Standardansicht festzulegen.

Answer 2

Ich kann zwar keine Forschungsergebnisse zitieren, aber ich habe viele mehrteilige Formulare gesehen, die häufig verwendet werden.

Einige der besten Online-Formulare, die ich gesehen habe, hatten schon immer ein Formular:

1. einfache benutzerfreundliche Validierung
2. wenn sie zu lang war, hatte sie Registerkarten (anstatt endlos nach unten zu scrollen)
3. Eine raffinierte Funktion habe ich nur einmal gesehen: die Möglichkeit, das Formular als Entwurf zu speichern.

Das, würde ich sagen, sollte die beste Praxis sein :)

Answer 3

Kombinieren Sie 2 und 3.

Führen Sie den Benutzer mit den Schaltflächen "Weiter" und "Zurück" durch die Seiten, y Setzen Sie einige Oberflächenelemente (Tabs sind großartig, aber auch Etiketten als Breadcrumbs ), damit der Benutzer direkt zu den Seiten springen kann.

Answer 4

Ich persönlich verwende den mehrseitigen Ansatz, aber er könnte auch an Registerkarten angepasst werden. Hier sind ein paar meiner Gründe:

1. Alle Eingabeelemente in einem einzigen, nicht scrollbaren Ansichtsfenster zu halten, ist für die meisten Benutzer bequemer und weniger einschüchternd.
2. Wenn eine bestimmte Seite Probleme bei der Validierung hat, sind diese leichter zu erkennen und zu beheben, wenn sie sofort auf dem Bildschirm sichtbar sind.
3. Wenn Sie Abhängigkeiten zwischen den verschiedenen Komponenten haben, können Sie einfach auf die früheren Informationen zugreifen, um sie für die späteren Informationen zu verwenden, und Sie können sicherstellen, dass sie in der richtigen Reihenfolge eingegeben werden.
4. Wenn die verschiedenen Teile zu unterschiedlichen Zeitpunkten ausgefüllt werden können, kann der Benutzer das Formular in mehreren Schritten ausfüllen.

Allerdings sollten Sie darauf achten, dass Sie bei einer Seitenzahl von mehr als 2 bis 3 Seiten einen Eindruck davon vermitteln, welche Fortschritte der Nutzer gemacht hat. Sie sollten es möglich machen, sowohl vorwärts als auch rückwärts durch das Formular zu navigieren. Das ist definitiv mehr Arbeit für Sie, aber ich denke, dass es für die meisten Benutzer eine bessere Erfahrung ist.

Wenn Sie sich für ein Formular mit Registerkarten entscheiden. Ich würde AJAX verwenden und Validierung auf Registerkarte Navigation tun. Auf diese Weise validieren Sie eine Registerkarte-zu-einer-Zeit und können leichter zeigen Validierungsfehler. Sie können die Tab-Reihenfolge erzwingen, indem Sie die Tabs nur dann aktivieren, wenn die vorherigen Tabs abgeschlossen sind, falls erforderlich. Ich denke, dass Ihre Registerkarten-Schnittstelle sollte auf die Multi-Seiten-Variante zu degradieren, wenn javascript nicht verfügbar ist.

Answer 5

Ich bevorzuge (1) die Einfachheit von HTML-Seiten mit klar definierten Abschnitten.

Viele kommerzielle Websites bevorzugen den abgespeckten Ansatz von (2), vielleicht mit ein wenig (3), damit die Kunden ihre Optionen überprüfen können. (2) hält alles auf dem Bildschirm und stellt sicher, dass der Nutzer das liest, was er lesen soll.