Zum Hauptinhalt springen

Authentifizierung

Überblick​

Das Authentifizierungsmuster ermöglicht es einem Benutzer, durch Eingabe seiner E-Mail-Adresse und seines Passworts auf sein Kundenportal zuzugreifen.

Zu verwenden​

  • Zur Authentifizierung der Anmeldedaten eines Benutzers.
  • Wenn sich ein Benutzer zum ersten Mal bei seinem Portal anmeldet.
  • Wenn sich ein Benutzer freiwillig abmeldet oder aufgrund von Inaktivität abgemeldet wurde und sich erneut anmelden muss.

Aufbau​

Abbildung zur Veranschaulichung des Aufbaus des Authentifizierungsmusters

  1. Titel und Untertitel: Ein h1-Titel mit einem optionalen Untertitel, der zusätzliche Informationen anzeigt. Use “Log in” instead of “Sign in”.
  2. E-Mail-Adresse: Hier kann der Benutzer die seinem Portal zugeordnete E-Mail-Adresse eingeben. Eine alternative Bezeichnung für dieses Feld ist „Benutzername“.
  3. Passwort: Hier kann der Benutzer das seinem Portal zugeordnete Passwort eingeben. Aus Sicherheitsgründen werden Passwörter bei der Eingabe durch den Benutzer nicht angezeigt.
  4. Link zum Zurücksetzen des Passworts: Leitet den Benutzer zu einer Seite weiter, auf der er sein Passwort zurücksetzen kann.
  5. E-Mail-Adresse speichern (optional): Speichert die E-Mail-Adresse des Benutzers und zeigt beim nächsten Anmeldeversuch ein bereits ausgefülltes Feld an.
  6. Anmeldeschaltfläche: Meldet den Benutzer im Portal an.
  7. Registrierungslink: Leitet den Benutzer zu einer Seite weiter, auf der er ein neues Konto erstellen kann. Use “Sign up” instead of “Register”.
  8. Brauchen Sie Hilfe? (Optional): Hilfe-Link für Benutzer, die Probleme beim Anmelden haben.

Allgemeine Richtlinien​

Validierung und Fehler​

  • Verwenden Sie Inline-Fehler, um bestimmte Probleme zu beheben, bevor der Benutzer fortfahren kann.
  • Die Eingabefelder für E-Mail-Adresse und Passwort werden erst validiert, wenn der Benutzer auf die Anmeldeschaltfläche klickt.
  • Fehlermeldungen müssen klar, prägnant und hilfreich sein. Erläutern Sie das Problem, und stellen Sie die erforderlichen Informationen bereit, damit der Benutzer das Fehlerszenario beheben kann.

Abbildung zur Veranschaulichung des Aufbaus des Authentifizierungsmusters

Passworterstellung und Passwortmanager​

  • Die Passwortanforderungen müsse zu dem Zeitpunkt sichtbar sein, wenn der Benutzer das Passwort erstellt. Geben Sie die Passwortanforderungen im Voraus an, und stellen Sie sicher, dass der Benutzer sie während der gesamten Zeit, die das Feld aktiviert ist, sehen kann.
  • Wenn es Ihnen gelingt, einige der technischen Einschränkungen zu reduzieren, müssen Sie weniger Text anzeigen und weniger Regeln verarbeiten, was die Passworterstellung beschleunigt.

Quelle: Nielsen Norman Group

Entwicklung​

Folgendes muss zugelassen werden:

  • Passwortmanager müssen Zugriff auf das Eingabefeld habe
  • Automatische Ausfüllfunktionen müssen im Passwortfeld funktionieren
  • Benutzer müssen die Maskierung des Passworts aufheben können

Abbildung zur Erstellung von Passwörtern

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Markieren von Pflichtfeldern in Anmeldeformularen​

In Anmeldefenstern kann das Sternchen (*) für eine Pflichtangabe weggelassen werden. Die meisten Benutzer haben schon viele Anmeldefenster ausgefüllt und wissen, dass Sie für die Anmeldung eine E-Mail-Adresse oder einen Benutzernamen und ein Passwort eingeben müssen.

Es ist jedoch gefährlich, Pflichtfelder in einem Registrierungsformular nicht zu markieren. Wenn Ihr Registrierungsformular mehr als die Felder „Benutzername“ und „Passwort“ enthält, markieren Sie alle Pflichtfelder (einschließlich der Felder „Benutzername“ und „Passwort“).

Quelle: Nielsen Norman Group

Log in and login​

Don't confuse "log in" (verb) with "login" (noun or adjective).

Log in is a two word verb phrase.

When referring to the page or process, it becomes one word: login page or login process.

For a list of common UI terms and recommended action labels for use in Guidewire UI content, refer to the Jutro common actions terminology page.

Reaktionsfähigkeit​

Bei Mobilgeräten deckt das Authentifizierungsmuster das gesamte Display ab.

Abbildung des Authentifizierungsmusters auf Mobilgeräten

Theming​

Standardmäßig entsprechen Theming und Branding der Anwendung, es sei denn, sie werden überschrieben.

Muster können mit Themes gestaltet werden, um bestimmte Markenanforderungen und Kundenwünsche zu erfüllen. Dazu gehören visuelle Elemente wie Farben, Typografie, Symbole, Schaltflächen und andere Komponenten und grafische Elemente.

Erfahren Sie mehr über das Theming mit Design-Token

Unterstützende Recherche​

Die Recherche für dieses Muster bestand aus einer Wettbewerbsanalyse. Die Wettbewerbsanalyse ist eine Recherchetechnik, mit der Sie vergleichen und verstehen können, woran andere auf demselben Gebiet arbeiten. Die UX-Designer analysierten die Muster anderer Designbibliotheken. Sie suchten nach relativen Stärken und Schwächen, Trends und Unterschieden. Die Designer nahmen diese Informationen, fanden Gemeinsamkeiten und erstellten ein Muster, das auf diesen Praktiken basiert.

Ressourcen​

Laden Sie eine ZIP-Datei mit sämtlichen aktuellen Jutro-Mustern herunter und beginnen Sie mit der Gestaltung.

Jutro-Musterbibliothek (19.6 MB)