uxzentrisch erörtert:
Vier Standard Flow-Charts: Registrierung, Login, Passwort & Newsletter

Immer wieder konzipiere ich Projekte, für die ein nutzerspezifischer Bereich oder ein Newsletter-Abonnement vorgesehen sind. Beim nutzerspezifischen Bereich gehen Funktionen wie Registrieren, Anmelden und Passwort zurücksetzten einher. Beim Newsletter-Abonnement gibt es die Funktion sich an- und wieder abzumelden. All diese Funktionen haben eines gemeinsam – Die Abfrage der E-Mail-Adresse.
Während den Klickstrecken können unterschiedlichste Fehlerzustände auftreten.
Die Prozesse, die hinter den einzelnen Funktionen stecken, unterscheiden sich meistens kaum zwischen den unterschiedlichen Projekten. So muss beispielsweise das Double-Opt-In-Verfahren bei der Newsletter-Anmeldung immer angewendet werden.

Einmal angelegt und immer wieder verwendet spart man viel Zeit und übersieht keine möglichen Use Cases, die Fehler verursachen könnten. Wie die Flow-Charts aussehen, seht ihr im unteren Bild, welches ihr gerne teilen dürft.

fehlermeldung

6 Kommentare

Tobias Jordans uxzentrisch vor 2 Jahren

Hallo Nikolai, danke fürs Sharen!
Mir sind einige Dinge aufgefallen, die ich gerne zur Diskussion stellen möchte:

#A: Raute »unbekannte E-Mail?« – Ich musste das 5x lesen, bis ich verstanden habe, warum unter »nein« der Fehler steht. Flow-Diagramme profitieren IMO extrem davon, wenn man die Entscheidungs-Fälle grundsätzlich positiv formuliert. »E-Mail valid?« »E-Mail bereits im System?«.

#B: Fehler »unbekannte E-Mail?« – Diese Case sollte man nur machen, wenn das System, für das man sich registriert, unsensible Daten enthält. Andernfalls erlaubt es, auszuspionieren ob eine Adresse registriert ist.

#C: Gleicher Fehler: Warum hier die Passwortvergessen-Funktion verlinkt wird, erschließt sich mir nicht. IMO funktionieren Fehlermeldungen besser, wenn sie nur eine – die relevante – Handlungsaufforderung enthalten.

#D: Erfolgsmeldung »unbekannte E-Mail?« – Das Wording »den entsprechenden Link …« finde ich unglücklich gewählt. Der Link entspricht nichts, was hier erwähnt wird, da nicht von »E-Mail-Adresse bestätigen« gesprochen wird. Vorschlag: So etwas wie »Willkommen, die Registrierung ist fast abgeschlossen! *Bitte bestätigen Sie Ihre E-Mail-Adresse.* Dazu haben wir Ihnen gerade eine E-Mail gesendet. Bitte klicken Sie darin auf den *Bestätigungslink*. Danke!« (Status freundlich nennen, nett sein, kurze und einfache Sätze, Explizit sein – diese Nachricht wird nur von denen Gelesen, die die Hilfe brauchen. Alle anderen haben schon längst ins Mailpostfach gewechselt…)

#E: Bestätigungs-E-Mail – Du Startest den Flow mit »Registrierung«, die E-Mail ist aber als Newsletter DoubleOptIn formuliert …, das ist IMO inkonsistent.

#F: Erfolgsmeldung – IMO ist das aus Wireframe-Sicht keine Meldung, sondern eine ganze Seite. Der Flow suggeriert aber, dass es – wie die Fehlermeldung – nur eine Ergänzung einer Seite ist.
Gleiches gilt unter Umständen für die Erfolgsmeldung – Abhängig davon, wie man die Interaktion aufbaut.

#G: Raute »Konto vorhanden?« – Toll ist, wenn der Link »Registrieren« in der Fehlermeldung die E-Mail-Adresse enthält und an das Login-Formular übergibt, so dass man sie nicht erneut eingeben muss.
Gleiches gilt für den Link »neues Passwort zusenden«.

#H: Gleiche Raute: Wie unterscheidest Du eine valide aber falsch eingegebene E-Mail-Adresse? Beispiel: tobais@lorem.de ist eine valide E-Mail-Adresse aber hat kein Konto. Das kann das System nicht wissen. Die Fehlermeldung muss daher IMO anders formuliert sein und darf auf keinen Fall das Formular ersetzen (sondern nur ergänzen), so dass man weiterhin alle Formularfelder sieht und bearbeiten kann. Vorschlag Fehlermeldung: »Für »tobais@lorem.de« konnten wir kein Benutzerkonto/Newsletteranmeldung finden. Bitte überprüfe Deine Eingabe. Alternativ kannst Du _ein neuen Benutzerkonto konstenlose registieren_.

#I: Gleiche Raute: Auch hier gilt der Hinweis von #B

#J: Fehler »korrekte E-Mail- & Passwort-Kombination« – Da in diesem Flow bereits der Account überprüft wurde (siehe #I), kann diese Meldung IMO viel klarer sein: »Dieses Passwort ist falsch. Passwort vergessen?«
Hinweis: Die Formulierung »neues Psw zusenden« suggeriert, dass man Passwörter per Mail versendet. Das ist zum Glück seit vielen Jahren ausgestorben … und sollte auch nicht mehr angedeutet werden.

#J.2: Gleicher Fehler: IMO ist hier zu überlegen, wie viele Fehleingaben man erlaubt! Wenn der Hacker weiß, dass eine E-Mail-Adresse valide ist und unendlich viele Versuche hat, ist es ein Kinderspiel automatisiert den Account zu hacken.
Hier aber Schutzmechanismen einzubauen, macht den Flow direkt viel komplexer. Die wohl einfachste Lösung ist, nach 3 Versuchen eine Captcheingabe einzufordern aber unendlich viele Versuche zu lassen. Alternativ kann man nach 5 Versuchen 24 h Sperrfrist einführen.
Siehe auch #B.

#K: Ich vermisste bei allen Eingabefeldern Fehlermeldungen zu den Pflichtfeldern, bspw.
– E-Mail-Feld leer: »Bitte geben Sie Ihre E-Mail-Adresse ein.«
– Passwort-Feld leer: »Bitte geben Sie Ihr Passwort ein.«

#L: Öffnet der Link »neues Passwort zusenden« das Formular für diesen Flow in das man die E-Mail-Adresse eingeben muss? Spitze wäre natürlich, wenn der Flow erkennen könnte, wenn er eine E-Mail-Adresse übergeben bekommt (siehe #G) und direkt die Validierungen ausführt. Im besten Fall erscheint dann direkt die Erfolgsmeldung. – Diese muss dann aber eine eigene Seite sein, kein Teil des Fomulars.

#M: Passwort-zurücksetzen-E-Mail – Du geht hier davon aus, dass jeder, der diese E-Mail bekommt, auch selbst das Passwort angefordert hat.
Die meisten E-Mails sind vorsichtiger formuliert … – Ich bin unentschlossen, ob das einfach nur schlechte Angewohnheit »von uns« ist, oder wirklich Sinnvoll.

#N: Newsletter abbestellen: Hier bin ich verwirrt, wie der Einstieg ist! Ist das ein Formular oder ein Deeplink? Ist die E-Mail im Deeplink enthalten? IMO sollte der Newsletter-Abbestellen-Link im Newsletter-Footer direkt zu einer Success-Seite führen. Toll ist, wenn zusätzlich dort gesagt wird, für welche E-Mail-Adresse ich mich gerade abgemeldet habe und mir die Option gegeben wird, mit mit einem Klick wieder anzumelden, falls ich versehentlich geklickt habe (oder bspw. der NL von einem Freund weitergeleitet wurde für den ich jetzt versehentlich abbestellt habe…).

Allgemein zum Flow: Es macht es einfacher, auf die Elemente im Flow zu referenzieren, wenn sie IDs haben. Die Fehler-Boxen könnten zum Beispiel einen Titel wie »Fehler 8 Konto nicht gefunden« haben.

Allgemein zum Wording: Ein paar konkrete Kommentare habe ich schon gemacht. Insgesamt klingt es für mich etwas technisch. Es kann auch konsistenter, wärmer, lächelnder und glücklicher sein. Da häufig die Wireframe-Wordings auch am Ende übernommen werden, lohnt es sich IMO, hier noch mehr Zeit zu investieren.

Beckmann vor 2 Jahren

Vielen Dank für eure Ein- und Ansichten, jeder macht es sicher ein wenig anders und wie er es für richtig erachtet.

@Tobias: Du hast in vielen Punkten recht, bist aber IMO ein oberlehrerhafter Besserwisser. Es gibt überhaupt keinen Grund hier eine ellenlange »Korrektur« zu veröffentichen und den ganzen Beitrag schlecht zu machen.

Tobias Jordans uxzentrisch vor 2 Jahren

@Beckmann: Es freut mich, dass Nikolais und meine Ein- und Ansichten von dir positiv aufgenommen werden. Und ich würde mich noch mehr freuen, wenn Du im Detail in die Diskussion einsteigen würdest. Welche meiner Diskussionspunkte findest Du überflüssig-besserwisserisch … und welche nützlich? – Wir sind hier schließlich versammelt um unser Wissen zu teilen. Und wenn Nikolai dabei seinen Standardflow verbessert, ist das super. Und wenn ich dabei meine Ansichten verbessere, ist das für mich noch besser!

Tamim Swaid uxzentrisch vor 2 Jahren

Hi @Beckmann

Danke fürs Feedback. Ich denke bei dem Kommentar geht es nicht ums schlecht machen sondern einfach um den Austausch. In der Form sind die Kritikpunkte für alle transparent einsehbar. Wir sind und müssen ja nicht alle einer Meinung sein. Der Austausch hilft aber dabei eine Meinung oder einen Denkansatz zu reflektieren. Entweder wird dieser dadurch sogar noch stärker oder man erkennt in der anderen Meinung Punkte die man noch nicht bedacht hat.

Ich würde es begrüßen wenn du die Punkte, mit denen du z.B. nicht übereinstimmst nennst. Ich glaube alle könnten daraus etwas ziehen.

Lieben Dank
Tamim

Nikolai Merk Autor vor 2 Jahren

Danke für das Feedback.
Einige der Punkte habe ich aufgegriffen und das Flow-Chart dementsprechend angepasst.

Nikolai Merk Autor vor 2 Jahren

Hallo Tobias

zu hast geschrieben #B: Fehler »unbekannte E-Mail?« – Diese Case sollte man nur machen, wenn das System, für das man sich registriert, unsensible Daten enthält. Andernfalls erlaubt es, auszuspionieren ob eine Adresse registriert ist.

Wie gehst du dann mit den Fällen um, wenn sich ein Nutzer registreiren möchte und eine E-Mail verwendet, für das schon ein Konto angelegt wurde?
Gmail gibt dabei folgende Fehlermeldung und ich würde sagen, dass ein E-Mail Account ein sensibles Konto ist: Dieser Nutzername wird bereits verwendet. Beachten Sie, dass wir Punkte und Großbuchstaben in Nutzernamen ignorieren. Möchten Sie es mit einem anderen Nutzernamen versuchen?

Wie gehst du mit dem Fall um, wenn ein Nutzer das Passwort zurücksetzen möchte und dabei eine E-Mail Adresse angibt, die nicht im System vorhanden ist.
Gmail melden in diesem Fall: Es wurde kein Konto mit dieser E-Mail-Adresse gefunden.

In beiden Fällen kann man es zum ausspionieren nutzen.