Ich bin dabei, ein langes HTML-Eingabeformular zu entwerfen und diskutiere zwischen einigen Gestaltungsmöglichkeiten:
Gibt es dazu Untersuchungen oder bewährte Verfahren?
Zunächst einmal ist ein guter Artikel, wie immer, Nielsen .
Eine gute Analyse findet sich auch in diese Stelle .
Meine eigenen Gedanken (viele Jahre Webapplikationsdesign sowie UI-Design auf Hochschulniveau und Usability-Studien in der Vergangenheit als Grundlage):
1. Pro und Kontra
Lange HTML-Formulare:
Schwer zu navigieren, wenn man auf die Bildlaufleiste klickt (sehr schmal), aber ziemlich einfach zu navigieren, wenn man das Scrollrad einer Maus benutzt.
Mehrere Seiten mit "nächsten" Links
Das Schlimmste aus beiden Welten. Schwer anzuklicken ("Weiter" ist ein kleines Ziel), kein zufälliger Zugriff auf irgendeinen Teil des Formulars (falls dies sinnvoll ist). Diese Option ist NUR sinnvoll, wenn Sie MUSS die Teile des Formulars in einer bestimmten Reihenfolge ausfüllen, und ein Zurückgehen ist nicht möglich.
Registerkarte Schnittstelle
Dies ist eine gute Option, hat aber auch Nachteile. Der einzige Nachteil ist, dass man nicht alle Formularinformationen auf einmal sehen kann (und dass man sich merken muss, welche Frage auf welcher Registerkarte war, wenn man zurück- oder vorwärts navigieren will).
2. Schlussfolgerung
Es ist also eine Entscheidung zwischen Nr. 1 und Nr. 3, je nachdem, was für Ihre Nutzer am einfachsten ist (langes vertikales Scrollen oder Klicken auf Registerkarten).
3. Anmerkungen
Bitte beachten Sie, dass Windows-GUIs fast durchgängig Formulare mit Registerkarten verwenden, so dass die Forschung höchstwahrscheinlich gezeigt hat, dass dies in Bezug auf die Benutzerfreundlichkeit besser ist, obwohl ich im Moment keine Hinweise auf cie habe.
Bitte beachten Sie, dass mit "Gelegenheit zu tun, Validierung / Prüfung / Speichern / etc..." über AJAX-Aufrufe hat so ziemlich NICHTS mit den oben genannten Entscheidungen zu tun - Sie können einen AJAX-Aufruf initiieren, sobald ein beliebiges Element, das Sie auf einem Formular wählen, verliert / gewinnt den Fokus.
Der einzige Vorteil der Registerkarten-Schnittstelle ist, dass es benutzergesteuertes Signal "Ich bin fertig mit diesem Satz von Formular-Elementen" - die intelligent über JS ohne die Registerkarten und ohne den Benutzer sagen, er ist fertig explizit (e.. er konzentriert sich auf das nächste Element) getan werden kann.
Sie können auch die Formularelemente "noch nicht bereit für Sie" deaktivieren, bis alle vorhergehenden erforderlichen Elemente zu 100 % ausgefüllt sind.
4. Randbemerkungen
Warum genau haben Sie ein so langes Formular? Einer der wichtigsten Punkte der Usability-Forschung ist, dass das Ausfüllen von Formularen lang, mühsam und unangenehm für die Nutzer ist. Wenn Sie also die Informationen nicht unbedingt benötigen, sollten Sie sie nicht abfragen. Dies gilt insbesondere für Registrierungsformulare - siehe Nielsen und andere Referenzen.
Die Website usability.gov der US-Regierung hat ein interessanter Artikel über die Ergebnisse einer Studie des National Cancer Institute zur Benutzerfreundlichkeit von Formularen, aber sie deckt nicht genau Ihre Möglichkeiten ab; sie konzentriert sich eher auf die Gestaltung der Formularelemente selbst.
Alsol, Dey Alexander Consulting hat eine Liste von Ressourcen für die Benutzerfreundlichkeit von Formularen die Ihnen weiterhelfen könnten.
Update : Wenn man sich die anderen Antworten anschaut, dann gibt es hier eine Menge "das ist richtig und die anderen Optionen sind falsch". Die ultimative Antwort ist, dass es hier nicht den einen richtigen Ansatz gibt; ein wenig Kontext kann Ihnen jedoch helfen, eine gute Lösung für Sie zu finden. Die Aufteilung eines Formulars in mehrere HTML-Seiten könnte beispielsweise ideal sein, wenn Sie viele Validierungen und Verzweigungen vornehmen müssen (z. B. wenn das, was auf Seite 2 des Formulars erscheint, vollständig von der Antwort abhängt, die ein Benutzer auf eine Frage auf Seite 1 gibt), da Sie so den Validierungs- und Verzweigungscode zu 100 % serverseitig halten können. Aber selbst dann gibt es alternative Optionen, die in Ihrem Fall besser sein könnten, aber es ist schwer zu beantworten, ohne mehr über Ihren Fall zu wissen.
Als Nutzer bevorzuge ich eindeutig Option 1.
Alles andere ist eine Lüge. Sie denken, Sie haben die erforderliche Bürokratie erledigt, und dann kommt noch mehr.
Andererseits möchten Sie als Website-Betreiber den Benutzer oft mit einem einfachen Bildschirm 1 des Formulars zur Registrierung verleiten.
Tabulatorschnittstellen sind für die Navigation von unschätzbarem Wert, aber für sequenzielle Eingaben sind sie IMO fast nie nützlich.
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.
CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.
