In letzter Zeit nervt mich die Autorisierung auf Websites sehr. Da Passwortmanager wie 1Password (das ich verwende) und Chrome Password Manager (das ich auch verwende) immer beliebter werden, ist es für Websites wichtig, diese Tatsache zu berücksichtigen.

Schauen wir uns einige Anmeldemuster an, die meiner Meinung nach nicht perfekt sind. Und dann überlegen Sie sich Best Practices. TL; DR; Hierbei handelt es sich um Autorisierungsseiten, die einfach und vorhersehbar auf normalen Seiten sind und mit Kennwortmanagern kompatibel sind.

Was nicht zu tun

Hier sind einige Beispiele, die ich vermeiden würde.

Stellen Sie die Autorisierung nicht in modale Form

Hertz und eine Reihe anderer Websites stellen ein Anmeldeformular in ein modales Fenster. Dieser Ansatz hat zwei Probleme:

• Zusätzliche Schritte für den Benutzer : „1. Drücken Sie die Menütaste, 2. Wählen Sie ein Login aus, 3. Füllen Sie das Formular aus “, anstatt zur Autorisierungsseite (über Suche, Kundensupport-Chat, Lesezeichen, Passwort-Manager, direkt über die Hauptnavigation) zu wechseln und das Formular auszufüllen.
  
• Es gibt keinen direkten Link zu der Seite , was für den Support-Service schmerzhaft sein kann (da er eine Reihe von oben beschriebenen Anweisungen geben und nicht nur eine Person über den Link senden muss). Es stört auch die Arbeit von Passwort-Managern, da das modale Fenster zunächst ausgeblendet ist. 1Password verfügt über eine erstaunliche Funktion zum Öffnen und Ausfüllen, mit der Sie eine Website öffnen und das Anmeldeformular mit Ihren Anmeldeinformationen ausfüllen können. Diese Funktion funktioniert nicht mit modalen Fenstern.

Verstecke die Felder nicht

Die Delta-Site verbirgt das Feld Nachname. So wie ich es verstehe, soll die Benutzeroberfläche sauberer werden, indem Elemente progressiven Designs eingeführt werden. Das Problem ist, dass das Feld erforderlich ist und Kennwortmanager es nicht automatisch ausfüllen können . Benutzer müssen zuerst ein anderes Feld ausfüllen und schließen, damit dies angezeigt wird. Nur ein zusätzliches, unnötiges Hindernis, damit eine Person das System betreten kann.

Der MacOS-Anmeldebildschirm verbirgt das Kennwortfeld auf die gleiche Weise, um die Benutzeroberfläche zu „löschen“ (und ich gehe auch davon aus, dass Benutzer dazu gezwungen werden, sich über TouchID anzumelden), aber diese Sauberkeit kann meiner Meinung nach die Leute verwirren.

Leg dich nicht mit magischen Links an

Es mag mit Slack begonnen haben, aber jetzt senden andere Programme wie Notion (die ich übrigens liebe) ein temporäres Passwort per E-Mail an das System. Ich kann den Trick dieser Vorlage schätzen, da sie das Leiden unglücklicher Benutzer beseitigt, denen es schwer fällt, sich ein anderes Passwort zu merken, und nicht die gesamte erforderliche Infrastruktur erstellen muss, um ein vergessenes Passwort wiederherzustellen. Aber.

• Diese Strecke ist unglaublich anstrengend . 1. Geben Sie im Anmeldeformular eine E-Mail-Adresse ein. 2. Öffnen Sie eine neue Registerkarte oder wechseln Sie das Programm. 3. Öffnen Sie die Mailbox. 4. Suchen Sie eine Nachricht vom Dienst (wenn Sie nicht durch andere Buchstaben abgelenkt werden). 5. Öffnen Sie die Nachricht. 6. Kopieren Sie das Abrakadabra-Passwort. 7. Kehren Sie zur Site zurück. 8. Setzen Sie dort Abrakadabra ein. 9. Senden Sie das Formular. Verdammt.
  
• Dies funktioniert bei Passwort-Managern überhaupt nicht , was unglaublich ärgerlich ist. Im Design sprechen wir viel über Konsistenz. Wir sprechen aber nicht nur über Kohärenz in unserem eigenen Ökosystem, sondern auch über den Rest des Internets, Stockbäume.
  
• Dies zwingt Benutzer dazu, neue Verhaltensweisen zu erlernen : Benutzer haben bestimmte Muster (Anmeldung, Überprüfung, Navigation usw.) gelernt und sie über viele Jahre in vielen Anwendungen wiederverwendet. Ich sage nicht, dass Innovation niemals gemacht werden sollte. Es ist jedoch wichtig zu wissen, dass Benutzer mit einer Menge erworbener Kenntnisse über die Verwendung des Internets zu Ihrem Produkt kommen. Wenn wir versuchen, zu schlau zu werden, zwingen wir Benutzer, neue Muster zu lernen, was die Menschen verlangsamt (zumindest von Anfang an).

Teilen Sie das Anmeldeformular nicht in mehrere Seiten auf

Shopify (ein weiterer meiner Lieblingsdienste) unterteilt das Login ärgerlicherweise in drei separate Bildschirme. Auch hier kann ich die Motive verstehen: Sie wollen den Benutzer nicht sofort mit vielen Informationen überladen. Ich stimme diesem Muster in bestimmten Fällen zu (z. B. werden im Online-Shop Zahlungsinformationen, Versandart und -adresse, Kreditkarteninformationen usw. normalerweise in mehreren Schritten eingegeben). Aber warum für ein Formular mit drei Feldern?

• Zum Aufrufen des Systems werden unnötige Schritte hinzugefügt : Dies ist immer noch ein Formular mit drei Feldern, aber jetzt müssen Benutzer drei Bildschirme durchlaufen. Sicher, es verlangsamt die Leute.
• Funktioniert nicht mit Passwort-Managern : Passwort-Manager können nur ein Feld auf einer Seite ausfüllen.

Wie es geht

Was machen Webdesigner? Ich denke, das langweilige alte Anmeldeformular ist in Ordnung. Hier ist Ernte :



Und hier ist WordPress:



Einfaches, präzises und vorhersehbares Design. Kompatibel mit Passwort-Managern. Alles ist an Ort und Stelle. Hier einige Überlegungen:

• Erstellen Sie eine separate Seite für die Anmeldung : Mitarbeiter des Supports können Kunden an die URL (domain.com/login) senden und keine Anweisungen dazu finden, wo sich das Anmeldeformular befindet. Passwort-Manager speichern diese URL auf Knopfdruck und füllen die Felder automatisch aus.
  
• Alle erforderlichen Felder anzeigen : Wenn Sie zur Eingabe einen Nachnamen eingeben müssen, zeigen Sie dieses Feld sofort an!
  
• Platzieren Sie alle Felder auf einer Seite : Die Eingabe sollte schnell sein und kein unnötiger Kanal, der sich über mehrere Seiten erstreckt.
  
• Fantasieren Sie nicht : Es mag sein, dass diese magischen Links und andere geniale Anmeldevorlagen vorhanden sind, aber Sie sollten die Gewohnheiten der Benutzer im Internet berücksichtigen. Verlassen Sie sich auf diese langweilige, vorhersehbare und etablierte Praxis.

Die Liste ist nicht vollständig. Ich habe Dinge wie die Anmeldung in sozialen Medien oder die Zwei-Faktor-Authentifizierung nicht berührt. Drücken Sie Ihre Beobachtungen zu anderen unregelmäßigen Mustern aus, wenn etwas auftritt.