Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Alexandra Mendes
Joana Eitner

15. April 2024

Min Read

12 leistungsstarke Tipps für die Gestaltung von Anmelde- und Anmeldeseiten

Bei der Gestaltung einer Anmelde- oder Anmeldeseite müssen Sie dies aus der Sicht des Benutzers berücksichtigen. Benutzer haben auf der Anmelde- und Anmeldeseite ein gewisses Onboarding-Erlebnis. Sie sollten also sicherstellen, dass sie sich nicht verwirrt oder frustriert fühlen.


Daher ist eine gut gestaltete Anmeldeseite der Schlüssel zum UX-Prozess Ihrer Website. Sie hilft dabei, Besucher auf Ihre Website zu locken und macht Besucher zu Leads. Ein benutzerfreundliches Portal ist wichtig. Dies unterstreicht die Notwendigkeit einer unkomplizierten Anmeldeseite, die die Benutzer nicht überfordert und es ihnen ermöglicht, sich in nur wenigen Schritten anzumelden.


Dank unserer 12-jährigen Erfahrung in der Erstellung von Websites für Branchenführer sind wir in der Lage, Empfehlungen abzugeben. Wir sind stolz darauf, Websites zu erstellen, die gut aussehen und gut funktionieren. Aus diesem Grund besprechen wir die besten Strategien und Beispiele für ein hervorragendes Design von Anmelde- und Anmeldeseiten — und geben Ihnen großartige Beispiele, die Sie inspirieren sollen.

blue arrow to the left
Imaginary Cloud logo

Mach es offensichtlich

Machen Sie deutlich, wo sich der Login-Bereich befindet. Wenn der Benutzer nach dem Login-Bereich suchen muss, ist er frustriert und es ist weniger wahrscheinlich, dass er sich anmeldet.

Gmail's login page

blue arrow to the left
Imaginary Cloud logo

Möglichkeit, sich mit Social-Media-Konten anzumelden - ein Klick

Die Anmeldung für eine neue Anwendung mit vorhandenen Social-Media-Konten wird bei Nutzern immer beliebter. Dieser Vorgang ist schnell und effizient, da Sie kein neues Konto erstellen und alle Informationen von Grund auf neu bereitstellen müssen.

Eigentlich 86% der Nutzer ärgern sich oft über die Notwendigkeit, neue Konten auf Websites zu erstellen, und 88% nutzen soziale Medien, um sich einzuloggen. Wenn Benutzer also nur auf eine Anmeldeschaltfläche für soziale Medien klicken müssen, um in die Anwendung zu gelangen, fühlen sie sich wohler. Außerdem wird der Anmeldevorgang dadurch sozialer und ansprechender, sodass es für neue Nutzer wahrscheinlicher ist, Ihre Website mit ihren Freunden und Kollegen zu teilen.

Außerdem ist die Anmeldung mit einem Social-Media-Konto für das Unternehmen von Vorteil, da es in den meisten Fällen Zugriff auf mehr Informationen hat, die soziale Medien über den Nutzer bereitstellen — Demografie, Interessen, Verhalten usw.


Durch die Befragung ihrer Nutzer wurde ein Das Unternehmen hat herausgefunden, auf welchen Social-Media-Plattformen die Anmeldung am beliebtesten ist für. Laut ihren Statistiken bevorzugen Nutzer Google (70,97%), gefolgt von Facebook (19,69%) und dann Twitter (9,32%).


Bedeutet das, dass die Nutzer Google oder Facebook verwenden sollten? Das hängt von Ihrem Ziel ab. Ihre Nutzer melden sich jedoch in der Regel über soziale Netzwerke an, die ihnen aus Sicherheitsgründen weniger wichtig sind, wie Gmail oder Facebook.


Medium's login page
Die Anmeldeseite von Medium.

Vermeiden Sie es, nach einer Passwortbestätigung zu fragen

Websites fordern Benutzer häufig auf, ihr Passwort zu bestätigen, wenn sie sich anmelden. Diese Sicherheitsmaßnahme ist seit der Meldung der ersten Datenschutzverletzungen zur Standardpraxis geworden. Mithilfe des Felds „Passwort bestätigen“ können Benutzer vermeiden, dass ihre Passwörter bei der Registrierung für die App falsch eingegeben werden.

Es ist zwar sinnvoll, dass Websites dies tun möchten, aber es ist kontraproduktiv. Die Bestätigung des Passworts erzeugt ein falsches Sicherheitsgefühl. Bei diesem Vorgang müssen Sie zunächst zweimal ein Passwort eingeben, wenn es nicht den Systemanforderungen entspricht.

Der Benutzer kann den Fehler jedoch nicht sehen oder lokalisieren. Aus diesem Grund sollten sie beide Passwörter entfernen und sie erneut eingeben, ohne eine Ahnung zu haben. Infolgedessen wird die Frustration der Benutzer zunehmen.


Die Bereitstellung der Option Passwort anzeigen mit dem Feld Passwort ist eine bessere Lösung, die sowohl schnell als auch effizient ist. Die Benutzer können auf die Option klicken und das eingegebene Passwort sehen, was sofortige Korrekturen vereinfacht.

Ikea's login page
Die Anmeldeseite von IKEA.
blue arrow to the left
Imaginary Cloud logo

Signalisieren Sie die Feststelltaste

Benutzer geben möglicherweise ein falsches Passwort ein, wenn sie nicht wissen, ob die Feststelltaste ein- oder ausgeschaltet ist. Dies führt zu einem Fehler, wenn das eingestellte Passwort der App oder Website nicht übereinstimmt, wenn sich ein Benutzer anmeldet. Sie sollten daher sicherstellen, dass Sie Benutzer benachrichtigen, wenn sie Passwörter in das Eingabefeld eingeben, um unerwartete Fehler bei der Wiederverwendung des Passworts zu vermeiden.

GitHub's login page
Die Anmeldeseite von GitHub.

blue arrow to the left
Imaginary Cloud logo

Sei konsistent mit deinen Worten

Weltweit scheint laut Google Trends der gebräuchlichste Ausdruck „Anmelden“ zu sein. Obwohl „anmelden“, „anmelden“, „anmelden“ und „anmelden“ Synonyme sind, scheint „Anmelden“ der beliebteste Begriff zu sein.

Aus UX-Sicht ist es wichtig, dass Sie an jeder Stelle den gleichen Begriff wählen. Sie sollten beispielsweise nicht an einer Stelle „Anmelden“ und an einer anderen „Anmelden“ verwenden. Wenn Sie jedoch „Anmelden“ verwenden, sollten Sie „Abmelden“ statt „Abmelden“ verwenden.


Es mag wie ein kleines Detail erscheinen, aber es ist wichtig, die Konsistenz auf Ihrer gesamten Website oder App aufrechtzuerhalten. Auf diese Weise fühlen sich die Besucher wohler und weniger verwirrt, wenn sie Ihr Produkt verwenden.

The Washington Post's login page
blue arrow to the left
Imaginary Cloud logo

Sofortige Eingabeüberprüfung ist erforderlich

Die Verwendung der Eingabeüberprüfung auf Ihren Anmelde- und Anmeldeseiten verbessert deren Benutzerfreundlichkeit. Die Validierung erleichtert den Anmeldevorgang, verhindert Fehler und erkennt und korrigiert das Feedback schnell, da Sie wissen, dass die Eingabe korrekt ist.

Wenn Sie eine hilfreiche Sofortvalidierung anbieten, sollten Sie einige wichtige Faktoren berücksichtigen. Fügen Sie eine nützliche Fehlermeldung hinzu, die das Problem und dessen Behebung erklärt und dem Benutzer hilft, Vertrauen in Ihr Produkt aufzubauen. Und zeige die Meldung nur an, wenn der Benutzer kürzlich das Eingabefeld verlassen hat.

Bedenken Sie jedoch, dass wir dem Benutzer so gut wie möglich helfen möchten. Wir müssen bedenken, dass alles, was den Benutzern hilft, auch Hackern hilft. Zum Beispiel: Wenn ein Passwort und eine E-Mail nicht übereinstimmen, wäre es für den Benutzer vorteilhafter, etwas wie „Falsche E-Mail“ oder „Falsches Passwort“ anzuzeigen, da er dann weiß, welches Feld falsch ist.

Andererseits würde dies einem Hacker auch 50% seiner Arbeit abnehmen, da er weiß, dass diese E-Mail ein Konto auf dieser Website hat und nur das Passwortfeld ändern muss. Aus diesem Grund wäre eine Meldung wie „Ungültige Kombination“ vorzuziehen, da sie keine Informationen an Hacker weitergibt, den Benutzer aber dennoch darüber informiert, was passiert und warum er sich nicht anmelden konnte.

Vereinfachen Sie außerdem den Anmeldevorgang, indem Sie nur nach den erforderlichen Informationen fragen. Alles, was für die Kontoerstellung nicht erforderlich ist, sollte in das In-App-Onboarding aufgenommen werden, wo der Benutzer weitere personalisierte Informationen hinzufügen kann, um die Plattform an seine Bedürfnisse anzupassen. Auf diese Weise vermeiden wir sinkende Raten aufgrund zu komplexer Prozesse. Sie möchten die Benutzer nicht mit einem langen, mühsamen Formular frustrieren, in dem sie eine Menge Zeit damit verbringen müssen, auszuwählen, was sie nicht benötigen.

Evernote's login page
Die Anmeldeseite von Evernote.

UX Audit

Benutzer müssen die Passwortanforderungen kennen

Gehen Sie niemals davon aus, dass Benutzer sichere Passwortregeln kennen. Erfordern Sie Passwörter in der Nähe des Steuerelements, damit Benutzer sie sehen können.

Verbergen Sie die Kennwortanforderungen nicht in der Standardansicht; zeigen Sie sie nur an, wenn der Benutzer ein schwaches Passwort eingibt. Dies verschwendet nicht nur die Zeit der Benutzer, sondern verringert auch deren Vertrauen in Ihr Produkt.

AirBnB's login page
blue arrow to the left
Imaginary Cloud logo

Die Beschriftungen der Schaltflächen sollten sich auf die ausgeführte Aktion beziehen

Wenn es mehrere Anmeldeoptionen gibt, stellen Sie sicher, dass auf der Schaltflächenbeschriftung deutlich angegeben ist, welche Option der Benutzer auswählt. Dadurch wird Verwirrung vermieden und die Benutzer können den Anmeldevorgang schneller durchführen. Nehmen wir zum Beispiel an, Sie haben zwei verschiedene Tarife: den Basic- und den Pro-Plan. Wenn Sie zwei Anmeldeoptionen haben, eine für den Basisplan und eine für den Pro-Tarif, stellen Sie sicher, dass Sie zweifellos angeben, welche Option der Benutzer auswählt.

AWWWARDS's login page
Die Anmeldeseite von AWWWARDS.
blue arrow to the left
Imaginary Cloud logo

Zwischen Anmelde- und Anmeldemodus wechseln

Sie möchten, dass Benutzer wissen, wohin sie gehen müssen, wenn sie sich auf Ihrer Website registrieren oder anmelden möchten. Es macht keinen Spaß, wenn ein Benutzer die Anmelde- oder Anmeldeschaltfläche auf einer Webseite nicht finden kann.

Sie können verschiedene Farben, Layouts und Kopien verwenden, um Ihre Anmeldefelder von Ihren Registrierungsfeldern zu unterscheiden.

Diprella's login page
blue arrow to the left
Imaginary Cloud logo

Verwenden Sie E-Mail, anstatt einen Benutzernamen zu verwenden

Lassen Sie Ihren Benutzer sich mit seiner E-Mail-Adresse oder Telefonnummer anstelle eines Benutzernamens registrieren. Benutzer müssen manchmal die Auswahl eines eindeutigen Benutzernamens aufgeben, wenn einer nicht verfügbar ist, was es schwierig macht, sich Benutzernamen für mehrere Websites zu merken.

Es ist besser, nach den Registrierungsdaten als nach den Benutzernamen der Benutzer zu fragen, um ihnen die Mühe zu ersparen, sich einen auszudenken und sich daran zu erinnern, was den Anmeldevorgang erheblich vereinfacht.

Auf diese Weise können Sie den Benutzer bei Bedarf auch kontaktieren, was für Ihr Unternehmen sehr nützlich sein kann:

1. Marketingzwecke: Wenn Sie Nachrichten oder sogar eine Kampagne versenden möchten.

2. Kundendienst- und Support-Team: Wenn Sie feststellen, dass der Benutzer nicht mit Ihrem Produkt interagiert, haben Sie einen zweiten Kontaktpunkt, um direkt mit dem Benutzer zu kommunizieren und zu versuchen, ihn zurückzugewinnen.

LinkedIn's login page
Die Anmeldeseite von LinkedIn.
blue arrow to the left
Imaginary Cloud logo

Ermöglichen Sie eine einfache Passwortwiederherstellung

Es ist auch wichtig, einen einfachen Passwortwiederherstellungsprozess bereitzustellen. Benutzer werden unweigerlich ihre Passwörter vergessen oder sie werden gehackt, und Sie möchten es ihnen leicht machen, ihre Konten wiederherzustellen. Sie können dies tun, indem Sie Benutzern ermöglichen, ihre Passwörter per E-Mail zurückzusetzen, ihnen die Möglichkeit geben, eine Ersatztelefonnummer oder Sicherheitsfragen hinzuzufügen, oder ihnen die Verwendung eines vertrauenswürdigen Kontos gestatten.

DropoBox's login page
Die Anmeldeseite von Dropbox.

Teilen Sie den Registrierungsprozess auf

Benutzer können viele Daten mit einem mehrstufigen Formular effizienter verwalten. Sie können sich jeweils auf eine bestimmte Datenkategorie konzentrieren.

Bei den meisten Websites müssen Benutzer ein Konto erstellen, bevor sie es verwenden können. Bei der Gestaltung Ihres Anmeldeformulars können Sie den Registrierungsprozess in verschiedene Schritte unterteilen, um ihn für neue Benutzer einfacher und weniger verwirrend zu gestalten.

Vielleicht möchten Sie den Registrierungsprozess in drei Schritte aufteilen:

  • Der erste Schritt könnte darin bestehen, die Benutzerdaten einzugeben.
  • Der zweite Schritt könnte die Wahl eines Benutzernamens sein.
  • Der dritte Schritt könnte darin bestehen, das Passwort des Benutzers einzugeben.

Die Aufteilung des Registrierungsprozesses erleichtert es neuen Benutzern, sich für Ihre Website anzumelden und die verschiedenen Schritte zu verstehen.

Vergessen Sie nicht, dass das Entwerfen eines mehrstufigen Formulars entscheidend ist, um es für den Benutzer benutzerfreundlich zu gestalten. Stellen Sie sicher, dass die Schritte die richtigen Namen haben, dass der Benutzer leicht zwischen ihnen wechseln kann und dass der Benutzer vor dem Absenden des Formulars eine Zusammenfassung der Daten sehen kann.

Dies gibt dem Benutzer auch ein Erfolgserlebnis, da wir gerne Aufgaben erledigen und sehen, dass wir dem Ende einer Sache näher kommen.

Ein Beispiel für eine gute Praxis ist eine „Danke“ -Nachricht am Ende des Workflows, sodass der Benutzer das Gefühl hat, dass seine Bemühungen geschätzt werden.

Uber's login page
Die Anmeldeseite von Uber — Schritt 1.
blue arrow to the left
Imaginary Cloud logo

Geben Sie eine Option „An mich erinnern“ ein

Eine explizite Remember Me-Option erleichtert es Benutzern, anzugeben, ob sie möchten, dass sich die Website die Anmeldeinformationen merkt, wenn sie zurückkehren. Sie können das Kästchen deaktivieren, wenn sie nicht möchten, dass sich die Website ihre E-Mail-Adresse merkt, sodass eine andere Person ihr Passwort leichter erraten kann.

Dafür gibt es zwei Möglichkeiten:

  • Benutzer können während des Anmeldevorgangs die Option „An mich erinnern“ auswählen. Ihre E-Mail-Adresse wird gespeichert, sodass sie sie bei der nächsten Anmeldung nicht erneut eingeben müssen.
  • Benutzer können die Option auswählen, sich ihre E-Mail-Adresse nach dem Anmelden zu merken. Ihre E-Mail-Adresse wird gespeichert, sodass sie sich diese nicht merken müssen.

Mailchimp's login page
Die Anmeldeseite von Mailchimp.

Zusammenfassung

In diesem Artikel haben wir Ihnen die besten Methoden für die Gestaltung einer Anmelde- und Anmeldeseite gegeben. Sie müssen jedoch immer darauf achten, dass Ihre Bedürfnisse auf der Grundlage Ihres Publikums und Ihrer Projektziele erfüllt werden. Je mehr Mühe Sie in Ihre Anmelde- und Anmeldeseiten investieren, desto wahrscheinlicher ist es, dass sich Benutzer motiviert fühlen, sich anzumelden und einzuloggen.


Sie müssen also während des gesamten Onboarding-Prozesses ein ansprechendes und zugängliches Erlebnis für Ihre Benutzer schaffen. Wenn sie Probleme haben, müssen Sie sie durch den Prozess führen. Einige Dinge, die Sie beachten sollten, sind die Erstellung eines benutzerfreundlichen Anmelde- und Anmeldevorgangs sowie die Transparenz Ihres Anmelde- und Anmeldevorgangs.


Wenn Sie das Anmelde- und Anmeldeerlebnis Ihrer Website verbessern möchten, können Sie sich an Imaginary Cloud wenden.

Build user-friendly products with UX/UI design CTA
blue arrow to the left
Imaginary Cloud logo
Alexandra Mendes
Alexandra Mendes

Inhaltsautor mit großer Neugier auf die Auswirkungen der Technologie auf die Gesellschaft. Immer umgeben von Büchern und Musik.

Read more posts by this author
Joana Eitner
Joana Eitner

Junger UX/UI-Designer, der sich für Details und menschliches Verhalten begeistert und es liebt, jeden Tag etwas Neues zu lernen.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon