Ich habe mal vor einiger Zeit für T3N einen Artikel geschrieben, der auch ganz gut hier ins Blog reinpasst. Fürs Magazin (die gelbe Ausgabe vom September08, Nr. 13) wurde mein Beitrag von Jan überarbeitet und in besseres Deutsch umformuliert. Da wir aber hier in meinem Blog sind, dachte ich, sollte sich der Text auch nach mir anhören. 😉 Auch habe ich hier den Artikel in 3 große Kapitel untergliedert, was ich fürs Magazin weggelassen hatte (und vllt besser dringelassen hätte).
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Registrierung und Login
Formulare und Prozesse nutzerfreundlich und effektiv gestalten
Ein Registrierungsformular, eine Login-Box oben in der Ecke des Bildschirms und ein Link „Passwort vergessen“ – das sind die üblichen Elemente, die es braucht, damit sich ein Nutzer auf einer Website registrieren und auch einloggen kann. Diese Elemente und die dahinter liegenden Prozesse sind so „normal“ und bekannt, dass man sie all zu gerne einsetzt, ohne sich ausführlich Gedanken darüber zu machen, wie sie wirklich nutzerfreundlich und auch effektiv aufgebaut werden können. Registrierung und Login sind zu wichtige Knackpunkte, als dass man ihnen zu wenig Zeit widmet.
Was kann man tun, um die Registrierung und das Einloggen für den Nutzer so einfach und angenehm wie nur möglich zu gestalten und ihm im Anschluss Hilfestellung für die Nutzung der Seite zu geben? Der wichtigste Ansatzpunkt ist, sich in den Nutzer hineinzuversetzen und alle Eventualitäten, die auftreten können, durchzuspielen.
1. Die Registrierung
Warum überhaupt registrieren?
Für den Website-Anbieter sind die Vorteile meist eindeutig, für den Nutzer dafür umso weniger. Will man seine Nutzer dazu bringen, sich zu registrieren, müssen die Vorteile und Nutzungsmöglichkeiten klar und deutlich kommuniziert werden. Und zwar bereits bevor der Nutzer auf den Link „Registrieren“ klickt. Dabei kann es sich um eine knackige Auflistung der Vorteile oder Features ebenso handeln wie um einen Vorab-Einblick in einen geschlossenen Bereich.
Beispiel Flickr.com: Vier Nutzungsbeispiele, die jeweils auf eine Seite der Tour verlinken, die ausführlichere Informationen dazu bietet.
Wann zur Registrierung auffordern?
Wie fast überall gilt es auch hier, den richtigen Moment abzuwarten. Sicherlich kann man den Nutzer direkt bei Betreten der Website auffordern, sich zu registrieren. Aber dazu gehört eine Menge Überzeugungsarbeit. Wesentlich einfacher ist es, dem Besucher die Nutzung der Website auch ohne Registrierung zu ermöglichen, und ihn erst dann zur Registrierung aufzufordern, wenn diese bereits automatisch sinnvoll erscheint. Wenn er sich beispielsweise auf einer Immobilienseite ein Angebot merken möchte, oder in einem Online-Shop seine Adresse- und Zahlungsdaten speichern möchte, um sie bei der nächsten Bestellung wieder nutzen zu können.
Wie viele Daten sollte man abfragen?
Nicht allzu neugierig sein – wenn dem Nutzer nicht klar ist, wofür die Daten benötigt werden, wird er schnell misstrauisch und sich im schlimmsten Fall gar nicht registrieren. Statt das Registrierungsformular zu überfrachten, ist es wesentlich eleganter, weitere interessante Daten erst in einem nachgelagerten Schritt abzufragen. Eine kleine Incentivierung motiviert den Nutzer, mehr über sich preiszugeben.
Nach der Registrierung geht’s noch weiter!
Nach dem Absenden des Formulars ist die Registrierung rein formal abgeschlossen. Eine gute Nutzerführung geht aber noch weiter. Was kann man dem Nutzer nun bieten, damit es für ihn so komfortabel wie möglich wird, damit er seine neue Mitgliedschaft bzw. sein neues Nutzerkonto auch ausführlich nutzt?
- Hat er sich innerhalb eines bestimmten Prozesses registriert, muss er im Anschluss automatisch wieder zu der Stelle geleitet werden, an der er zur Registrierung rausgerissen wurde. Alle von ihm bereits gesammelten Daten, Produkte oder sonstige Angaben müssen noch vorhanden sein. Zusätzlich kann man ihm in seinem Konto bzw. seiner persönlichen Startseite vorübergehend ein paar Tipps zur Nutzung bieten.
- Hat er sich nicht prozessintegriert registriert, ist es hilfreich, anschließend ein paar Erläuterungen zur Website oder Vorschläge, wie er seine neue Mitgliedschaft noch vorteilhafter nutzen kann zu erhalten. Evtl. kann man ihn hier auch dazu bewegen, weitere Daten von sich preiszugeben.
- Meist erhält der Nutzer auch eine E-Mail, welche die Registrierung bestätigt. Diese Mail lässt sich hervorragend dafür nutzen, ihm die nächsten Schritte zu erläutern, welche er auf der Website unternehmen kann.
Beispiel Plurk.com: Mit 4 kleinen Schritten (zum durch- oder auch wegklicken) werden Funktionen und Aufbau der Website erläutert.
2. Der Login
Gestaltung und Platzierung der Loginfelder
Man kann voraussetzen, dass der Nutzer zwei Eingabefelder neben- oder untereinander direkt als Login-Möglichkeit erkennt. Dennoch ist es hilfreich, die Login-Felder grafisch vom Rest der Website ein wenig abzusetzen, insbesondere, wenn es auf der Seite noch weitere Eingabefelder gibt, beispielsweise zur Abfrage von Reiseverbindungen.
Eine Platzierung in Navigationsnähe hat den Vorteil, dass die Eingabefelder permanent zu sehen sind, und diese Stelle auch nach Login für die Anzeige von Nutzernamen, Statusmeldungen, Link zum Konto etc. genutzt werden kann.
Greift ein Nutzer von extern durch einen Link (z.B. aus einer E-Mail) auf eine Seite zu, für die er sich erst einloggen muss, sollte ihn eine speziell gestaltete Login-Landingpage empfangen und ihn nach dem Login ohne Umwege zur entsprechenden Seite führen. Das Abschreckendste, auf was er treffen kann, ist ein Hinweis, dass er auf die aufgerufene Seite nicht zugreifen darf – eine Standard-Fehlermeldung, wenn er nicht eingeloggt ist.
Zum ersten Mal eingeloggt
Direkt nach der Registrierung weiß der Nutzer in der Regel noch sehr wenig, was ihn erwartet. Er hat also andere Bedürfnisse als andere Nutzer, die sich bereits gut auskennen. Zu Beginn sollte man ihm Erläuterungen zu den wichtigsten Features bieten, oder Tipps und Vorschläge, was er als nächstes tun kann. So lernt er schneller die Funktionen der Website kennen und wird auch schneller zu einem wertvollen Community-Mitglied, bzw. liefert schneller verwertbare Daten.
Beispiel Twitter.com: Obwohl die Website einen nur sehr geringen Funktionsumfang bietet, erhält der Nutzer in der ersten Zeit der Nutzung ein paar Tipps, was er nun tun kann.
Viele interessante Beispiele bietet der Report „Patterns for Sign Up & Ramp Up“ von Adaptive Path.
Prozessintegriertes Einloggen
Bestimmte Prozesse, wie die Auswahl von Produkten oder die Suche von Reiseverbindungen können in den meisten Fällen auch ohne Login begonnen werden. Es reicht völlig aus, ähnlich wie bei der Registrierung, den Nutzer erst innerhalb des Prozesses zum Login aufzufordern, wenn Daten längerfristig gespeichert werden sollen oder auf bereits gespeicherte Daten zurückgegriffen werden muss. Aber auch hier ist es ganz wichtig, dass der Prozess an der Stelle weiter geführt wird, an der er für das Einloggen unterbrochen wurde und der Nutzer nicht wieder von vorne beginnen muss, weil beispielsweise die Verbindungsdaten für die Reise nicht zwischengespeichert wurden.
Zugangsdaten wiederherstellen
Um vergessene Passwörter wieder herzustellen gibt es die unterschiedlichsten Methoden. Die für den Nutzer sicherlich einfachste Variante ist die, dass er selbst wählen kann, ob er E-Mail-Adresse oder Benutzernamen eingibt und einen Link zu einer Seite erhält, auf der ein neues Passwort festlegen kann. Natürlich kann auch mal ein Benutzername vergessen werden. Daher macht es wenig Sinn, Benutzername und E-Mail-Adresse zusammen abzufragen.
Schwierig wird’s allerdings, wenn die verwendete E-Mail-Adresse nicht mehr existiert. Auch das muss bedacht werden und einen Ersatz-Workflow geboten werden.
3. Formulardesign
Formulare richtig gestalten
Wie bei jedem Formular gelten auch bei Registrierung und Login die Regeln eines guten Formulardesigns. Das visuelle Design hat einen erheblichen Einfluss auf die Usability. Ist das Formular sehr lang, erleichtert das Gruppieren von zusammengehörigen Feldern den Überblick. Platziert man die Bezeichnungen der Eingabefelder vor statt über dem Feld, kann man das Formular optisch verkürzen. Dies und weitere Erläuterungen zum Design von Formularen finden sich im Artikel „Web Application Form Design“ von Luke Wroblewski.
Erstreckt sich das Formular über mehrere Seiten, ist es hilfreich, eine Prozesskette ähnlich wie in einem Warenkorb zu integrieren, um dem Nutzer eine Orientierung zu geben, wie viel er noch vor sich hat.
Der Nutzer sollte außerdem nicht durch zusätzliche Optionen abgelenkt und die Seite auf die reinen Formulardaten reduziert werden. Viele Websites blenden sogar die allgemeine Navigation der Seite aus. Völlig falsch platziert sind an dieser Stelle Werbebanner, die den Nutzer sogar von der Website weglotsen.
Dem Nutzer beim Ausfüllen Unterstützung bieten
Müssen die Daten in einem bestimmten Format eingegeben werden, sollte dies dem Nutzer schon direkt bei der Eingabe mitgeteilt werden. Kaum etwas ist frustrierender als erst nach Absenden des Formulars in der Fehlermeldung zu erfahren, dass das Passwort eine bestimmte Länge aufweisen und auch noch Sonderzeichen enthalten muss. Benötigen nur wenige Felder solche Hinweise, kann man die Angaben direkt unter das Feld schreiben, möglichst in einer unauffälligeren Schriftfarbe als der Rest der Feldbezeichnungen. Handelt es sich um sehr viele erläuternde Angaben, kann man sie als Tooltips erst dann anzeigen, wenn der Nutzer in das entsprechende Feld klickt. Das hat den Vorteil, dass de Seite nicht zu voll und unübersichtlich erscheint.
Aus Fehlermeldungen positive Hinweise machen
Fehlermeldungen sollten deutlich mehr aussagen als der typische Satz „Es ist ein Fehler aufgetreten.“ Sind die betroffenen Felder markiert und eine freundlich formulierte Erläuterung direkt daneben platziert, kommt der Nutzer viel schneller zum Ziel.
Mit AJAX und JavaScript können die meisten Daten bereits während der Eingabe validiert werden. So zum Beispiel, ob der gewünschte Benutzername noch verfügbar ist, oder ob das E-Mail-Feld korrekt ausgefüllt ist. Damit erspart man dem Nutzer die Fehlermeldungen, wenn er glaubt, mit dem Klick auf „Absenden“ seine Registrierung abgeschlossen zu haben.
Testing: Der Nutzer sollte das letzte Wort haben
Selbst wenn man davon überzeugt ist, Registrierung und Login optimal gestaltet zu haben, sollte man doch lieber den Nutzern die Entscheidung überlassen, ob es wirklich funktioniert und verständlich ist. Gestaltung und Prozesse sollten mit Probanden aus der Zielgruppe in Usability-Tests überprüft werden. Besonders aussagekräftig sind Auswertungen aus dem Live-Betrieb, auf welchen Seiten oder, noch genauer, bei welchen Feldern die Nutzer den Prozess abbrechen und die Seite verlassen.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
So, und wer nun nach all dieser Theorie das Bedürfnis hat, sich praktisch irgendwo registrieren zu müssen, der sollte das hier tun. Vielen Dank! 🙂
