Webdesign

Formulardesign-Strukturen – Teil 2: Registrierungsformulare

22. Dezember 2008
von

Letzte Woche haben wir den ersten Teil unserer Formulardesign-Bestandsaufnahme veröffentlicht. Das Hauptanliegen der Bestandsaufnahme ist, Designern und Entwicklern ein Gefühl dafür zu geben, wie effektive Web-Formulare gestaltet werden. Wir haben dazu auch einige Richtlinien ausgearbeitet, wie benutzerfreundliche Web-Formulare gestaltet werden können.

Im ersten Teil haben wir uns jedes Registrierungsformular der ausgewählten Websites angesehen und analysiert, wie sie aufgebaut sind. Nun folgen die Ergebnisse des zweiten Teils unserer Bestandsaufnahme von 100 beliebten Websites, bei denen Web-Formulare eine wichtige Rolle spielen (sollten). Beachten Sie bitte, dass wir hier keine Checkout-Formulare betrachtet haben.

3. Funktionen der Formulare

Im ersten Teil unserer Bestandsaufnahme haben wir uns auf die Platzierung der Links zu den Registrierungsformularen, den Registrierungsformularen selbst und auf das visuelle Erscheinungsbild der Formulare konzentriert. Mag ein Formular aber noch so schön gestaltet sein — wenn es nicht richtig funktioniert, wird die Abschlussquote des Formulars niedrig bleiben. Lassen Sie uns nun die Funktionen von Registrierungsformularen, typische Probleme, Design-Strukturen und Lösungen betrachten.

3.1. Werden Hover-, Active-, Focus-Effekte genutzt?

Anscheinend vermeiden Designer alle möglichen Arten von Ablenkungen und produzieren klare, eindeutige und einfache Web-Formulare, um die Abschlussquoten zu verbessern. Das ist der Hauptgrund dafür, dass bei der Registrierung visuelle Effekte nur moderat eingesetzt werden, wenn überhaupt.

Screenshot

  • 84% der betrachteten Web-Formulare haben keine Hover-, Active- oder Focus-Effekte.
  • 16% verwendeten Hover-Effekte nur sehr subtil.

3.2. Hilfe, Unterstützung, Tooltips: statisch oder dynamisch?

Manchmal ist die Feldbeschreibung, der Name eines Eingabefeldes, nicht ausführlich genug. Allerdings müssen die Nutzer verstehen, welche Daten sie eingeben sollen. Welche Zeichen sind im Benutzernamen erlaubt? Wie viele Zeichen sollte ein Kennwort haben? Ist die angegebene E-Mail-Adresse für den Login zu verwenden?

Hinweise und Tooltipps bieten Hilfestellung beim Ausfüllen des Formulars. Es gibt nichts nervigeres als ein Eingabefeld, das eine Eingabe nicht akzeptiert, obwohl sie völlig korrekt erscheint. Um das zu vermeiden, geben Designer (meistens) klare Hinweise.

Screenshot

57% der betrachteten Websites boten “statische” Hilfe an. Diese Hilfen sollen erklären, welche Eingaben vom Benutzer erwartet werden und sind gut sichtbar neben dem Eingabefeld platziert. 10% boten bei Bedarf Tooltipps an, normalerweise nach einem Klick auf ein Hilfe-Symbol oder wenn der Nutzer Eingaben in einem Feld gemacht hat.

3.3. Hilfe, Erklärungen, Tooltipps: wo sind sie zu finden?

Es ist aber nicht nur wichtig, Nutzern Hilfe anzubieten. Hilfe muss auch einfach zu finden und verständlich sein. Es ist wichtig sicherzustellen, dass Hilfe zu einem bestimmten Eingabefeld auch vom Nutzer richtig zugeordnet wird. Um das zu erreichen, muss man wissen, wo Nutzer diese Hilfe erwarten. Wo also werden Eingabetipps und -hilfen in einem Web-Formular normalerweise platziert?

Screenshot

Wenn Eingabetipps und -hilfen erscheinen, sind sie

  • unter dem Eingabefeld (57%),
  • rechts vom Eingabefeld (26%),
  • über dem Eingabefeld (13%) oder
  • links vom Eingabefeld (4%)

zu finden.

Man kann einen starken Trend zu über dem Eingabefeld platzierten Hinweisen erkennen. Normalerweise sind diese Hinweise in einer leichteren Farbe geschrieben, verglichen mit normalem Text.

3.4. Eingabeüberprüfung: statisch oder Ajax?

Obwohl Ajax in den letzten Jahren Websites scheinbar regelrecht überflutet hat, konnte es bei beliebten Web-Services bislang keine kritische Masse erreichen. Überraschenderweise konnten wir keinen Trend zu Ajax feststellen. Die “klassische” Validierung, welche die Eingaben nach dem Abschicken überprüft, ist beliebter als die Echtzeitvalidierung mit Javascript.

Unsere Ergebnisse

  • 30% der Formulare zeigen nur eine Fehlermeldung über dem Formular an. Eingabefelder wurden nicht hervorgehoben.
  • 29% der Formulare heben Eingabefelder mit daneben stehenden Fehlermeldungen hervor. Über dem Formular wurden keine Fehlermeldungen angezeigt.
  • 25% zeigen sowohl Fehlermeldungen als auch Eingabefelder an.
  • 22% verwendeten Echtzeitvalidierung mit Ajax,
  • 14% verwendeten JavaScript-Fehlermeldungen.
  • 1% verwendeten eine System-Meldung mit einem “Zurück-Link”.

3.5. Gestaltung der Fehlermeldungen

Wie Sie sehen, haben wir sechs verschiedene Arten der Eingabevalidierung gefunden. Es ist bemerkenswert, dass 14% der Formulare Fehlermeldungen noch immer mit Javascript-Fehlerfenster anzeigen, beispielsweise YouSendIt, Mail.ru, Newsvine, Clipmarks, Yandex (siehe folgenden Screenshot). Nur 22% haben eine zumindest teilweise mit Ajax realisierte Validierung, meist um zu prüfen, ob ein Benutzername noch verfügbar ist. Ebenfalls bemerkenswert ist, dass nicht eine einzige Website keine Eingabevalidierung hatte.

Screenshot
Newsvine verwendet Javascript, um Fehlermeldungen anzuzeigen.

Designer tendieren dazu, Fehlermeldungen nach dem Abschicken des Formulars anzuzeigen, oder falsch ausgefüllte Eingabefelder visuell zu kennzeichnen. Im ersten Fall werden Fehlermeldungen üblicherweise als Liste über dem Formular angezeigt. Im zweiten Fall wird normalerweise das Eingabefeld und dessen Feldname meist rot umrandet.

Manchmal kombinieren Designer beide Techniken und zeigen sowohl Fehlermeldungen über dem Formular als auch Eingabefeld-Hervorhebungen an, wie beispielsweise beim Registrierungsfomrular von Ning (siehe folgenden Screenshot).

Screenshot

Normalerweise wird Rot verwendet, um Fehler hervorzuheben. Allerdings ist das nicht immer so. Tickspot, Mixx.com und Furl verwenden Gelb, um Probleme beim Ausfüllen des Formulars zu kennzeichnen.

Wenn überhaupt eine Farbe für eine erfolgreiche Registrierung verwendet wird, dann ist es Grün. Das war bei 97% der Websites der Fall, die dafür eine Farbe verwenden.

Screenshot

3.6. Muss die E-Mail-Adresse wiederholt werden?

Nur in 18% der Fälle war es notwendig, die E-Mail-Adresse zu wiederholen (Odeo, Ning). Ehrlich gesagt sehen wir keinen logischen Grund dafür. Die Nutzer sehen schließlich, was sie eingeben und nicht nur Sterne wie beim Kennwort.

Screenshot

3.7. Muss das Kennwort wiederholt werden?

Es klingt vernünftig, die Nutzer das Kennwort wiederholen zu lassen, schließlich sieht man ja nur Sterne und nicht das, was man eingegeben hat. Allerdings haben sich viele Designer dafür entschieden, die Kennwort-Wiederholung wegzulassen, um die Registrierung zu beschleunigen.

Screenshot

In 72% der Fälle war es notwendig, das Kennwort zu wiederholen. Viele große Websites wie Facebook, Friendster, LinkedIn, Stumbleupon, Pownce und Twitter verlangen keine Wiederholung

3.8. Wird ein Captcha verwendet?

Viele Nutzer wären sicherlich froh, gäbe es keine Captchas. Tatsächlich sind sie notwendig, um Spambots davon abzuhalten, automatisch zahlreiche Benutzerkonten anzulegen, die man später aus der Datenbank herausfiltern müsste.

Unseren Ergebnissen zufolge

  • verwenden 52% der Websites kein Captcha und
  • in 39% der Fälle war es möglich, das Captcha unabhängig vom Formular neu zu laden.

Allerdings konnten wir bei Captchas keinen Trend feststellen. Wenn Sie Captchas nutzen, stellen Sie bitte sicher, dass Captchas entweder einfach zu lesen oder neu geladen werden können. Einige Websites bieten keine Möglichkeit, das Captcha neu zu laden. Digg, AOL, Slashdot, Google und Last.fm bieten Nutzern die Möglichkeit, das Captcha zu hören, falls es für sie zu schwer zu entziffern sein sollte.

3.9. Wird ein Abbrechen-Button angeboten?

Während wir uns Gedanken über die Designprobleme bei Web-Formularen gemacht hatten, haben nicht damit gerechnet, auf Abbrechen-Buttons zu stoßen. Eigentlich ergibt es keinen Sinn, wenn der Nutzer nach all seinen Eingaben auf diesen Knopf drückt. Doch damit lagen wir teilweise falsch.

Einen Abbrechen-Button gab es nur bei 8% der betrachteten Registrierungsformulare.. In einigen Fällen erschien der Knopf direkt nach den Geschäftsbedingungen wie bei Zoho Writer. Nutzer müssen den Geschäftsbedingungen nicht zustimmen und können den Registrierungsvorgang so abbrechen. Auf der anderen Seite zeigen einige Websites vor dem Registrierungsformular eine Tarifübersicht an, beispielsweise Crazyegg. Falls Nutzer sich für einen anderen Tarif entscheiden, können sie mit dem Abbrechen-Knopf zurück gehen und einen anderen wählen.

Screenshot

Abgesehen davon verstehen wir allerdings nicht, warum es auf Dzone auf der linken Seite des Registrierungsformulars einen Abbrechen-Button.

Wenn es einen Abbrechen-Knopf gibt, ist er rechts vom Absenden-Knopf platziert (4%). Bei den betrachteten Websites gab es keinen großen optischen Unterschied zwischen Absenden- und Abbrechen-Buttons. Die Buttons waren nebeneinander platziert. Vom Standpunkt der Benutzerfreundlichkeit betrachtet wäre es sinnvoll, zwischen Haupt- und Sekundärfunktionen zu unterscheiden und sie räumlich voneinander deutlich zu trennen.

3.10. Ausrichtung des Absenden-Buttons

Abhängig vom Formular-Layout ergäbe es Sinn, den Absenden-Button, links, rechts oder in der Mitte des Layouts zu platzieren. Designer scheinen eine besondere Vorliebe für linksbündig ausgerichtete Absenden-Buttons zu haben (56%), gefolgt von zentrierten Buttoins (26%).

Screenshot

Rechtsbündig platzierte Buttons sind weiterin beliebt (17%). Allerdings machen die meisten Designer das, um zu zeigen, dass es einen weiteren Schritt im Registrierungsprozess gibt. In den meisten Fällen sind sie mit “Fortfahren” oder “Weiter” beschriftet (engl. “Continue”, “Next”). Der Grund: In Desktop-Anwendungen ist der “Weiter”-Button ebenfalls rechtsbündig angeordnet.

3.11. Danke-Nachricht

Noch vor ein paar Jahren zeigten die meisten Websites eine einfach gehaltene Danke-Meldung nach einer erfolgreichen Registrierung, üblicherweise mit einem Link zur Login-Seite. Heute werden die Nutzer nach einer Registrierung motiviert, die Website sofort weiter zu erkunden.

  • 45% der Formulare fragen gerade registrierte Nutzer, mit der Angabe weiterer Informationen fortzufahren, Freund im Netz zu finden, die Website weiterzuempfehlen oder das Profil zu vervollständigen.
  • 33% der Formulare zeigten “Interessante Orte” und Funktionen in einem motivierenden, freundlichen Ton.
  • 4% zeigten eine einfache “Danke”-Nachricht.
  • 2% hatten eine Weiterleitung zur Homepage.

Weitere Erkenntnisse

  • Mit Ausnahme von Habrahabr wurde der Tab-Index in 99% aller Fälle korrekt verwendet.
  • 24% der Formulare sprachen Nutzer in Konversations-Stil an. In diesem Kontext sind Phrasen wie “Wie lautet Dein Name?”, “Deine E-Mail-Adresse bitte” oder “Ich möchte…” üblich.
  • 38% der Websites bevorzugen formale geschäftliche Ansprache, um Nutzer nach Informationen zu fragen, beispielsweise mit “Ihr Name” , “Kennwort wiederholen” usw.),
  • 38% der Websites verwenden eine technische Ansprache. Hier werden Nutzer nach “Login”, “Benutzerkennwort” und “Ort” usw. gefragt.

Fazit

Lassen Sie uns mit einem kurzen Ergebnisüberblick abschließen. Beachten Sie bitte, dass wir nur Registrierungsformulare berücksichtigt haben.

  • Registrierungsformular haben keine Hover, Active- oder Focus-Effekte (84%),
  • Tipps und Hinweise sind entweder statisch (57%) oder dynamisch (33%) und erscheinen unter (57%) oder rechts vom Eingabefeld (26%),
  • Statische Eingabevalidierung ist so beliebt wie dynamische, aber es gibt keinen Trend zu Ajax.
  • E-Mail-Adressen müssen nicht wiederholt werden (82%).
  • Kennwörter müssen wiederholt werden (72%).
  • Captchas können verwendet oder nicht verwendet werden (48% zu 52%).
  • Abbrechen-Button wird nicht verwendet (92%).
  • Der Absenden-Button ist linksbündig (56%) oder zentriert (26%).
  • Ein “Danke schön” nach dem Absenden des Formulars motiviert die Nutzer, den Dienst weiter zu erkunden (45%).

Von Vitaly Friedman, Übersetzung von René Schmidt; mit Genehmigung von Smashing Magazine

Vitaly Friedman ist Buchautor, Autor sowie Entwickler und Designer von benutzerfreundlichen Webseiten. Er ist Chef-Redakteur des Online Magazins Smashing Magazine, das zu den weltweit populärsten Onlinemagazinen für Webdesign zählt und wie Dr. Web zur Smashing Media GmbH gehört. Vitaly studierte Informatik an der Universität des Saarlandes.

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!