Usability-Richtlinien für Submit-Buttons in Formularen
14. September 2007 von Sebastian PreussEine in der Praxis häufig gestellte und viel diskutierte Frage bezüglich der Gestaltung von Online-Formularen ist die, wo der Submit-Button stehen (links oder rechts) und ob er sich grafisch vom Cancel-Button unterscheiden soll.
Gerade habe ich dazu erste Ergebnisse einer neuen und sehr guten Studie gelesen, an der u.a. Luke Wroblewski mitgearbeitet hat, ehemaliger Lead User Interface Designer bei eBay und Yahoo und mit jeder Menge wissenschaftlicher Credits beladen. Bei dem Test wurden von den Usern verschiedene grafische Varianten genutzt, es wurden alle herkömmlichen Daten erhoben (Task Completion Time, Success Rate, Satisfaction Survey) plus Eyetracking-Daten. Hier die wichtigsten Ergebnisse zusammengefasst:
- Sicherheit statt Geschwindigkeit
Grundsätzlich geht es den Usern beim Ausfüllen eines Formulars um Sicherheit, nicht um Geschwindigkeit. Sie wollen keine Fehler machen, ob sie zwei Minuten früher oder später fertig sind, ist ihnen egal. - Submit-Button nach links
Der Submit-Button sollte links stehen und es sollte eine klare vertikale Achse geben, an der sich der Blick orientieren kann. Diese Designs erhalten die besten Kommentare und werden explizit gelobt. Die Blicke der User wandern außerdem zuerst auf den linken Button, wenn zwei Buttons direkt nebeneinander stehen. - Kein Cancel-Button – wenn, dann grafisch modifiziert
Cancel-Buttons (sowie alle anderen sog. “Buttons of Secondary Action”, also Buttons, die nicht dem primären Ziel, dem Ausfüllen des Formulars, dienen), sollten nur verwendet werden, wenn es unbedingt notwendig und sinnvoll ist. Wenn sie verwendet werden, sollten sie sich grafisch vom Submit-Button unterscheiden, entweder durch eine Ausgrauung oder durch eine Darstellung als Textlink, nicht als Button.
Am 14. September 2007 um 09:30 Uhr
Kein Cancel-Button: Wozu auch? Wenn ich das Formular nicht absenden will, kann ich ja zurücknavigieren oder das Browserfenster schließen. Jede zusätzliche Schaltmöglichkeit verleitet dazu, Fehler zu machen.
Am 14. September 2007 um 09:33 Uhr
Der Sinn des Reset-Buttons ist tatsächlich beschränkt. Man könnte ihn als in dem Wunsch nach Datenschutz begründet ansehen. Allerdings ist wirklich fraglich, wer ein Formular ausfüllt, den Vorgang abbricht und dann unbedingt alle Daten wieder löschen möchte.
Am 14. September 2007 um 18:58 Uhr
Wenn man mal darüber nachdenkt, macht ein “Abbrechen”-Button auch keinen Sinn. Denn: Was wird denn abgebrochen? Ein “Zurück zur Startseite” ist klar definiert.
Und: Hat irgendwer schon mal auf Reset absichtlich geklickt?
Wenn man sich die ganzen Blogs ansieht, ist das auch auffällig. Da gibt es ggf. mehrere Arten zu Speichern, aber ansonsten nur Submit: sonst nix.
Am 8. Oktober 2007 um 17:55 Uhr
“Submit-Button nach links”
Schön, das sich dieses Formular nicht daran hält
Am 8. Oktober 2007 um 19:16 Uhr
Und so schnell wird man selbst vorgeführt. Ist aber aufgenommen.
Am 2. November 2007 um 22:55 Uhr
In einem Buch blättert man auch rechts weiter, daher finde ich persönlich rechts ganz gut.
Im Browser ist das Vorblättern ja auch rechts und nicht links.
PS: Die Validierung bedarf schon gewisser mathematischer Grundkenntnisse wie Punkt vor Strich. Ist das eine Art Qualitätscheck
Am 14. August 2008 um 10:58 Uhr
[...] Der Submit-Button sollte links stehen und es sollte eine klare vertikale Achse geben, an der sich der Blick orientieren kann. (Quelle) [...]
Am 18. Mai 2009 um 10:40 Uhr
[...] Formulargestaltung (PDF/0,9 MB) Der Bestellvorgang: Was häufig schiefgeht und was User frustriert Usability-Richtlinien für Submit-Formulare in Formularen Interaktions-Design: Auf die Feinheiten kommt es an Dieser Eintrag wurde am Montag, den 18. [...]