So finden Sie bei der Anmeldeoberfläche die richtige Balance zwischen Benutzerfreundlichkeit und Sicherheit

Egal ob Sie Webdesigner oder UI-Designer sind, die Gestaltung von Login- und Registrierungsseiten ist eine Arbeit, mit der Sie Erfahrung haben müssen. Die Gestaltung der Anmeldeoberfläche ist weder schwierig noch einfach. Um die Balance zwischen Sicherheit und Benutzerfreundlichkeit zu finden, bedarf es beträchtlicher Erfahrung. Der heutige Artikel stammt vom GoSquared-Team. Sie sind sehr sorgfältig bei der Gestaltung der Anmeldeoberfläche, die es wert ist, gelernt zu werden~

Wir legen großen Wert auf jedes Designdetail von GoSquared. Die Anmeldeoberfläche wurde kürzlich überarbeitet und der neu hinzugefügte Zwei-Faktor-Authentifizierungsmechanismus macht Benutzerkonten sicherer. Gleichzeitig nutzen wir diese Gelegenheit, um das Anmeldeerlebnis der Benutzer schrittweise zu verbessern.

Die Benutzerfreundlichkeit der Anmeldeoberfläche zu verbessern, ist nicht so einfach, wie es scheint. Sie müssen die Anmeldeoberfläche zwar schöner, intuitiver, schneller und benutzerfreundlicher gestalten, müssen den Vorgang aber auch daran hindern, so einfach zu sein, dass er von Hackern oder anderen böswilligen Akteuren leicht angegriffen werden kann.

Werfen wir als Nächstes einen Blick auf die bei dieser Überarbeitung getroffenen Entscheidungen. Wenn Sie die Details unserer überarbeiteten Version erfahren möchten, registrieren Sie bitte ein GoSquared-Konto und melden Sie sich an!

Einfach und mühelos

Normalerweise öffnen wir die Anmeldeoberfläche nicht, um das Anmeldeformular selbst anzuzeigen, sondern um uns beim Konto anzumelden. Das Formular selbst ist lediglich ein Mittel zur Erhebung personenbezogener Daten und kein Zweck. Aus dieser Sicht sollte die Anmeldung einfach und mühelos sein und alle Designs sollten darauf ausgerichtet sein, Störungen zu reduzieren und Hindernisse zu beseitigen, sodass Sie den Anmeldevorgang einfacher abschließen können, ohne unnötige Vorgänge ausführen zu müssen.

Durch die Ergänzung des Zwei-Faktor-Authentifizierungsmechanismus ist der Anmeldevorgang viel komplizierter als zuvor. Im Vergleich zur herkömmlichen Anmeldemethode, die nur E-Mail und Passwort erfordert, ist die aktuelle Anmeldemethode keine einfache einmalige Eingabe, um zu bestimmen, ob man sich anmeldet oder nicht. Die neu hinzugefügten Schritte machen die Anmeldung zu einem neuen Prozess, der aus mehreren Schritten besteht: Klären Sie, ob das Konto über relevante Einstellungen für die Zwei-Faktor-Authentifizierung verfügt und welche Überprüfungsmethode der Benutzer wählt. Viele Prozesse sollten auch die Verwendung alternativer Geräte/Kontakte sowie Notfall-Backup-Codes beinhalten. Wir müssen all diese Faktoren umfassend berücksichtigen, dürfen jedoch nicht zulassen, dass sie beim Anmelden zu einer Belastung werden und den Benutzern das Gefühl geben, sie würden ermüden.

Platzhalter und Beschriftungen

Die Auswahl der Anzeigeform für Platzhalter im Formular ist eine sehr knifflige Angelegenheit. Aus gestalterischer Sicht sind Platzhalter großartig. Es ist jedoch nicht einfach, es gut zu verwenden, insbesondere wenn es um die Zugänglichkeit und das automatische Ausfüllen von Formularen geht. Wenn Sie Platzhalter über HTML implementieren, verschwinden diese noch während der Eingabe, sodass manche Benutzer möglicherweise vergessen, was sie eigentlich eingeben wollten. Noch problematischer ist, dass der Platzhalter nie angezeigt wird, wenn Ihr Browser die vorherigen Informationen automatisch einfügt.

Wir haben dieses Problem bereits erfolgreich umgangen, indem wir erkannt haben, ob der Formularinhalt manuell eingegeben oder automatisch ausgefüllt wurde. Wenn der Inhalt automatisch vom Browser ausgefüllt wird, wird ein Etikett angezeigt, das den eingegebenen Inhalt anzeigt. Wenn er manuell eingegeben wird, wird kein Etikett angezeigt. Später stellten wir jedoch fest, dass die Benutzer vor dem Absenden gerne an die Bezeichnung erinnert werden möchten, um sicherzustellen, dass ihre Eingaben korrekt sind. Dies bedeutet, dass sie hoffen, dass die Bezeichnung während des Eingabevorgangs bestehen bleibt.

Schließlich haben wir eine elegante Lösung gefunden, bei der wir ein separates Element als Platzhalterbeschriftung verwenden. Wenn der Benutzer etwas eingibt, wird die Platzhalterbeschriftung automatisch aus dem Eingabefeld verschoben:

Da der Platz auf Mobilgeräten natürlich begrenzt ist, kann das Platzhalter-Tag wie folgt verschoben werden:

Um all diese Designs perfekt umzusetzen, müssen natürlich noch einige interessante Herausforderungen gelöst werden.

Umständliche Sicherheitsfunktionen

Als wir zum ersten Mal Code zur Steuerung dieser Beschriftungen und Platzhalter verwendeten, war dies nicht kompliziert: Jedes Mal, wenn sich der Inhalt im Formular ändert, wird der Inhalt erkannt. Wenn der Inhalt leer ist, wird die Platzhalterbeschriftung im Formular angezeigt. Wenn sie nicht leer ist, wird sie verschoben. Wenn die Seite gerade geladen wurde, prüft das System automatisch mehrmals, ob der Browser über AutoFill-Inhalte verfügt.

Aber trotzdem gibt es weiterhin Probleme. Im Chrome-Browser gibt es eine Sicherheitsfunktion namens PasswordAutofillAgent::PasswordValueGatekeeper. Das Besondere an dieser Funktion ist, dass sie die zuvor gespeicherten Konto- und Kennwortfelder nicht direkt in das Formular einträgt, selbst wenn diese ausgefüllt erscheinen (natürlich möchten Benutzer normalerweise nicht, dass der Browser den Inhalt ausfüllt und absendet). Erst wenn der Benutzer mit der Seite interagiert (also den Inhalt absendet), kann das Formular im Browser erkennen, dass der Inhalt ausgefüllt wurde. Daher sieht das Browserdesign unsere Tags folgendermaßen aus:

Um diese Probleme möglichst zu vermeiden, besteht die Hauptlösung darin, zu prüfen, ob der Eingabeinhalt mit dem Selektor :-webkit-autofill übereinstimmt und ob der Eingabeinhalt vorhanden ist oder nicht. Es sieht zwar nicht schön aus, ist aber sehr effektiv.

Eine flüssigere Benutzeroberfläche

Die Seite nach jedem Schritt neu umzuleiten, ist das, was Webdesigner im Jahr 2008 gemacht haben. Dieses Design mag kompatibler und narrensicherer sein, aber die App von GoSquared unterstützt diese Funktion nicht mehr.

Die neue GoSquared-Anmeldeoberfläche ist flüssiger, bietet sanftere Bewegungen und einen natürlichen Zustandswechsel, was wirklich faszinierend ist.

Überprüfung und Empfehlungen

Wie wir bereits im vorherigen Artikel erwähnt haben, war es beim vorherigen Design sehr leicht, beim Login eine falsche E-Mail-Adresse und einen falschen Benutzernamen einzugeben. Zudem hat Sie das System erst nach dem Absenden der Eingabe daran erinnert, dass das eingegebene Passwort oder Konto falsch war.

Tools zur Korrektur von E-Mail-Namen wie Mailcheck können die meisten Eingabefehler bei E-Mail-Adressen korrigieren und so die Fehlerquote bei der Anmeldung erheblich senken. Wir haben diese Komponente in der vorherigen Version hinzugefügt und sie ist jetzt auch in der neuen Version verfügbar.

Die Rückkehr des Login-Buttons

Bei der Entwicklung der vorherigen Version haben wir andere, nicht wichtige Elemente der Benutzeroberfläche drastisch reduziert, sodass die Anmeldeoberfläche nur zwei Eingabefelder ohne andere visuelle Elemente enthält. Schließlich ist es heute ganz selbstverständlich, zum Anmelden Ihr Konto und Ihr Passwort einzugeben und die Eingabetaste zu drücken, sodass eine Anmeldeschaltfläche nicht viel ausmacht.

Bei der Beobachtung der tatsächlichen Benutzeraktionen stellten wir jedoch fest, dass viele Benutzer zum Absenden des Formulars lieber auf eine Schaltfläche klicken, als die Eingabetaste zu drücken. Dies hat uns auch dazu veranlasst, den Login-Button in der neuen Version endlich wieder einzuführen.

Moment, warum ist die Anmeldung so langsam?

Nachdem wir auf die Schaltfläche „Anmelden“ geklickt haben, warten wir normalerweise einige Sekunden, bevor wir die Anmeldeoberfläche aufrufen. Auch nach vielen Optimierungen müssen Benutzer immer noch einige Sekunden warten, bis sie sich ordnungsgemäß anmelden können. Dafür gibt es tatsächlich einen Grund: Sicherheit. Nachdem Benutzer ihre Kontopasswörter übermittelt haben, muss der Backend-Server eine enorme Rechenleistung erbringen, um sicherzustellen, dass sie korrekt sind. Wir können den spezifischen Mechanismus hier nicht im Detail beschreiben, aber dies wird getan, um zu verhindern, dass jemand mit roher Gewalt in das System eindringt.

Natürlich möchten wir gerade wegen dieses langsamen Prozesses nicht, dass Benutzer allein mit einer festgefahrenen Anmeldeoberfläche konfrontiert werden. Wir müssen visuelles Feedback durch Design nutzen, um Benutzern mitzuteilen: „Ihr Formular wurde übermittelt, alles ist normal, Sie müssen nur einen Moment warten, bevor Sie eintreten können!“

Daher haben wir in diesem Schritt einen Fortschrittsbalken hinzugefügt, der den Benutzern anzeigt, wie lange die Anmeldung voraussichtlich dauern wird, und ihnen so eine klare Vorstellung davon gibt, wie lange die Anmeldung dauern wird. Da ein zeitbasierter Fortschrittsbalken allein jedoch ziemlich langweilig und nicht unbedingt genau ist, haben wir als Alternative eine sehr subtile Animation verwendet.

Abschluss

Benutzererfahrung und UI-Design sind keine statischen Dinge, sie passen sich ständig an zeitliche und regionale Veränderungen an. Ich hoffe, Ihnen gefallen die Verbesserungen an der GoSquared-Anmeldeoberfläche und ich hoffe auch, dass unser Verbesserungsprozess unseren Kollegen als Inspiration dienen kann.