Usability-Techniken für bessere Formularpräsentation

Question

Ich versuche, ein Formular (mit ASP.NET MVC, aber ich denke, das kann irrelevant sein) mit vielen Feldern zu vereinfachen. Mein erster Gedanke war, es in Tabs zu teilen, aber dann las ich irgendwo, dass dies Usability-Hölle wäre. Außerdem würden die erforderlichen Felder auf verschiedene Registerkarten aufgeteilt, so dass die Validierung eine Herausforderung darstellen würde. Was sind einige Möglichkeiten, um Formulare auf eine nette Art zu präsentieren, so dass es nicht eine lange Seite von Feldern ist?

Answer 1

Persönlich denke ich, "eine lange Seite von Feldern" zu zeigen, ist nicht nur die nützlichste, sondern auch die schönste Art, ein Formular zu präsentieren.

Es gibt ein Argument, dass die Nutzer eher in einer langen Form zu füllen, die mehrere Seiten aufgeteilt sind vorbei, aber als persönliche Vorlieben, wie ich zu sehen, was ich bin und was ausgefüllt werden muss.

(aus meiner eigenen Erfahrung mit mehrseitigen Formularen, normalerweise endet ich Ende der Hälfte durch, weil ich nicht in der Lage war abzuschätzen, wie lange es dauern würde, um das Formular auszufüllen und ich habe etwas anderes, das getan werden muss .)

Eine Sache, die ich tun möchte, ist die relevanten Bereiche mit <fieldset> 's zu trennen und diese dann zu stylen, um eine saubere und klare Form anzubieten. Dies macht es für den Benutzer einfach zu sehen, welche Daten sie ausfüllen müssen (getrennt in logische Felder) und bietet dem Entwickler die Möglichkeit, jeden Bereich so zu gestalten, dass das Formular weniger abschreckend wirkt.

Answer 2

Mehrere Registerkarten sind in Ordnung, aber anstelle von "submit" haben Sie "Next", bis zum letzten Tab, wo Sie "Finish" haben. Geben Sie auch an, wo Sie sich befinden, mit einem "Teil 2 von 5" oben auf dem Formular.

Sie können in der Tat mit den Tabs zerstreuen, aber es ist schön, wenn Sie zurückgehen und Dinge reparieren können, wenn nicht Tabs, dann ist eine "Vorherige" sowie eine "Weiter" -Taste erforderlich.

Mit nur Tabs, und eine Absenden-Taste auf jeder Registerkarte, und die erforderlichen Felder überall wäre sehr ärgerlich. :) Das ist noch schlimmer, als wenn man eine riesige Form hat, in der man hoch und runter scrollen muss.

Answer 3

Ich denke, der Schlüssel ist, die Erwartungen des Benutzers zu respektieren.

• Tabs haben ihren Platz, aber ich denke, die meisten Benutzer die Erwartung, dass Sie zu einer anderen Registerkarte gehen, ist eine andere Aufgabe zu tun, anstatt zu müssen mehrere Tabs gehen, um ein einziges Formular ausfüllen.

• Ein Assistent-Ansatz kann für eine lange Form nützlich sein, vor allem, wenn Sie Feedback über den Fortschritt des Benutzers geben.

• Wenn einige Fragen nur auf die Antworten auf andere Fragen zutreffen, ist es auf jeden Fall nett, die bedingten Fragen zu verbergen, bis sie relevant sind.

• Manchmal ist es möglich, Fragen während der Interaktion des Benutzers mit der Site zu streuen, anstatt sie alle gleichzeitig beantworten zu lassen.

• Schließlich fühle ich mich als Entwickler, dass ich eine Verantwortung habe, für den Benutzer zu befürworten, indem ich dem Kunden vorschlage, dass er nicht so viele Informationen verlangen muss.

Answer 4

Ich muss sagen, dass ich das Formular auf StackOverflow Careers wirklich mag, wo Sie Ihren Lebenslauf schreiben/bearbeiten.Es ist eine ziemlich lange Form auf einer Seite, aber es wird kein Problem, da Sie immer wissen, wo Sie sind und was zu tun ist.

Persönlich ist eine einzelne Seite mit dem ganzen Formular, was ich bevorzuge. Auf diese Weise können Sie schnell einen Blick auf das Formular werfen und was Sie tun müssen, um es zu vervollständigen.

Answer 5

Es klingt wie Accordion Forms könnte Ihren Bedürfnissen entsprechen.

Anstatt Ihre Felder als Assistenten oder eine Reihe von Registerkarten anzuzeigen, wird das Formular auf einer Seite dargestellt, aber mit ausgeblendeten Abschnitten, die bei Bedarf erweitert werden oder wenn der Benutzer auf "Weiter" klickt.

Das Fallbeispiel zeigt die Verwendung von Apple durch Apple.

Answer 6

Wenn Sie die Wizard-ähnliche Methode verwenden, ist es besser, jede Seite nach dem Drücken von Next zu validieren, anstatt auf der letzten Seite nach dem Drücken von Finish.