Go to blue arrow
back to Tech Blog
Entwerfen
Alexandra Mendes
Joana Eitner

21. Juli 2026

Min Read

Login & Registrierung: 15 Tipps gegen Abbrüche

Illustration eines aufgeräumten Designs für Anmelde- und Login-Seite auf einem Laptop, daneben Menschen am Rechner.

Gut Design für Anmelde- und Login-Seiten hängt von vier Faktoren ab: Fragen Sie nur die Felder ab, die für die Authentifizierung zwingend erforderlich sind, platzieren Sie den Login-Einstiegspunkt an einer gut sichtbaren Stelle, formulieren Sie Fehlermeldungen so, dass Nutzer wissen, wie sie das Problem beheben können, und bieten Sie eine Passwort-Wiederherstellung an, die auch dann leicht zu finden ist, wenn der Nutzer bereits frustriert ist. Wenn Sie diese Punkte richtig umsetzen, ist der Rest nur noch Feinschliff. Machen Sie Fehler dabei, zahlen Sie den vollen Preis für Traffic, der nie bei Ihrem Produkt ankommt. Studien haben gezeigt, dass 18 % der Käufer einen Kauf abbrechen, weil sie zur Erstellung eines Kontos gezwungen werden, und 17 %, weil der Prozess zu lang oder zu kompliziert ist.

Das ist die Kurzfassung. Im Folgenden finden Sie die fünfzehn Entscheidungen, die diese Zahlen beeinflussen, wie man sie sinnvoll anordnet und welchen Wert jede einzelne für Ihr Unternehmen hat.

blue arrow to the left
Imaginary Cloud logo

Warum Ihre Anmeldeseite der teuerste Bildschirm ist, den Sie besitzen

Stellen Sie sich Ihr Akquisebudget wie Wasser in einer Rohrleitung vor. Paid Search, Content, Outbound, Partner-Empfehlungen: Jeder Kanal speist dasselbe Rohr, und alles kommt an einer engen Verbindungsstelle an, an der Sie jemanden bitten, ein Konto zu erstellen. Was auch immer dort verloren geht, haben Sie bereits bezahlt.

Dieses Leck ist gut dokumentiert. Baymards Forschung zur Checkout-Usability ergab, dass der durchschnittliche Checkout-Prozess in den USA standardmäßig 23,48 Formularelemente aufweist, während groß angelegte Usability-Tests zeigen, dass ein idealer Prozess nur 12 bis 14 Elemente umfassen sollte. Etwa die Hälfte der Felder, die Sie von den Nutzern ausfüllen lassen, ist überflüssig. Und das Potenzial ist enorm: Wenn man sich nur auf die als lösbar dokumentierten Usability-Probleme beim Checkout konzentriert, kann eine große E-Commerce-Website durch ein besseres Design eine Steigerung der Conversion-Rate um 35,26 % erzielen. Das entspricht bei den kombinierten E-Commerce-Umsätzen in den USA und der EU geschätzten 260 Milliarden Dollar an wiederherstellbaren Bestellungen.

Ist das ein Design- oder ein Geschäftsproblem? Beides, und genau deshalb kommt es nicht voran. Für einen CEO, CTO oder COO lässt es sich auf drei Punkte reduzieren.

Kundenakquisekosten. Wenn Ihr Registrierungsprozess eine Conversion-Rate von 40 % statt 55 % aufweist, steigen Ihre effektiven CAC um mehr als ein Drittel. Ohne Änderung der Werbeausgaben. Ohne Änderung der Mitarbeiterzahl. Ohne Änderung des Volumens im Funnel darüber. Sie behalten einfach weniger von dem, was Sie eingekauft haben.

Conversion-Rate. Reibungsverluste bei der Registrierung sind eines der wenigen Conversion-Probleme, die Sie vollständig selbst kontrollieren können. Keine Preisänderung, kein neues Feature, keine Neupositionierung. Es ist ein Design- und Engineering-Problem mit einer messbaren Obergrenze, und genau dafür ist ein technisches und UX-Audit da, um diese zu bestimmen.

Churn-Risiko. Wer bereits bei der Anmeldung Schwierigkeiten hat, hat sich schon ein Bild von Ihrem Produkt gemacht, bevor er ein einziges Feature gesehen hat. Fehler beim Zurücksetzen von Passwörtern und Kontosperrungen führen zu Support-Tickets und frühen Kündigungen. Diese Kosten belasten den operativen Bereich, nicht das Marketing, weshalb sie in der Diskussion über Conversions meist übersehen werden.

blue arrow to the left
Imaginary Cloud logo

Das TSU-Modell: So priorisieren Sie Entscheidungen für Ihre Login-Seite

Die meisten Ratschläge zur Login-UX kommen als einfache Checkliste daher – und genau deshalb setzen Teams sie oft schlecht um. Sie erledigen die einfachen Punkte, während die wirkungsvollen im Backlog verstauben. Denn eine Checkliste sagt Ihnen zwar, was zu tun ist, aber nicht, womit Sie anfangen sollen.

Deshalb bewerten wir stattdessen. TSU steht für Traffic, Security, User type. Drei Achsen, jeweils von eins bis fünf, entwickelt in unseren Kundenprojekten und konsistent mit unserem breiteren, auf Design Thinking basierenden Produktdesign-Prozess. Addieren Sie die Werte und handeln Sie entsprechend der Gesamtsumme.

Traffic (T): Wie viele Nutzer gelangen auf diesen Pfad?

Ein Passwort-Wiederherstellungsprozess, den 2 % Ihrer Basis nutzen, hat nicht dieselbe Priorität wie ein Anmeldeformular, das jeder neue Nutzer durchlaufen muss. Ermitteln Sie die echten Funnel-Zahlen, bevor Sie irgendetwas bewerten. Teams investieren routinemäßig zu viel in Randfälle – meist nur deshalb, weil diese Abläufe die lautesten Support-Tickets erzeugen, nicht weil sie das größte Volumen haben.

Security (S): Welches Risiko bringt diese Änderung mit sich?

Manche Hürden sind notwendig. Die Passwortbestätigung zu entfernen, ist sicher. Fehlermeldungen zu präzisieren hingegen nicht, denn ein „falsches Passwort“ bestätigt einem Angreifer diskret, dass die E-Mail-Adresse zu einem echten Konto gehört. Das halbiert den Aufwand für Credential-Stuffing-Angriffe (automatisierte Angriffe, bei denen aus anderen Datenlecks bekannte Kombinationen aus Benutzername und Passwort ausprobiert werden). Vergeben Sie 5 Punkte, wenn eine Änderung sicherheitsneutral ist. Vergeben Sie 1 Punkt, wenn sie echten Komfort gegen ein Sicherheitsrisiko eintauscht.

User type (U): Wer sitzt auf der anderen Seite des Bildschirms?

Eine Consumer-App optimiert auf Geschwindigkeit und Social Login. Eine B2B-Plattform, auf der ein Administrator Konten verwaltet, optimiert auf Klarheit, Single Sign-On und Rollenzuweisung. Dieselbe Änderung, unterschiedliche Bewertung – je nachdem, ob Ihr Nutzer freiwillig dort ist oder dazu verpflichtet wurde.

Die Bewertung interpretieren

GesamtMaßnahmeTypischer Entwicklungsaufwand
12–15In diesem Sprint ausliefern. Hohes Volumen, geringes Risiko, klare Passung.Stunden bis 2 Tage
8–11Einplanen. Echter Nutzen, aber nach den obigen einreihen.2–5 Tage, plus Review
4–7Liegen lassen. Geringe Reichweite oder die Sicherheitskosten übersteigen den Nutzen.Den Slot nicht wert
Infographic of the TSU model by Imaginary Cloud, scoring sign-up changes on Traffic, Security, and User type.

Es geht nicht um die Arithmetik. Es geht darum, dass die Bewertung das Sicherheitsgespräch in die Designphase vorverlegt – statt es erst beim Code-Review zu führen, wo Login-Redesigns meist scheitern und Nachbesserungen teuer werden.

blue arrow to the left
Imaginary Cloud logo

15 Tipps für das Design von Registrierungs- und Anmeldeseiten

1. Sorgen Sie dafür, dass der Einstieg zur Anmeldeseite offensichtlich ist

Design der Google-Anmeldeseite mit Anmeldeformular, E-Mail-Eingabefeld und einem Link zur Registrierung.

Wenn Nutzer erst nach dem Anmeldebereich suchen müssen, erzeugen Sie Reibungsverluste, noch bevor das Formular geladen ist. Platzieren Sie ihn oben rechts im Header, wo ihn jeder intuitiv erwartet, und behalten Sie diese Position auf der gesamten Website bei, nicht nur auf der Startseite.

Der Anmeldebildschirm von Google ist die Referenzimplementierung. Ein Feld, eine klare Aktion, Wiederherstellungslinks genau dort, wo ein Nutzer sie im Bedarfsfall sucht.

TSU: T5 / S5 / U5 = 15. Umsetzen. Wirtschaftlich gesehen: die günstigste Optimierung auf dieser Liste. Eine Änderung an Navigation und CSS, die nur wenige Stunden dauert, aber jeden wiederkehrenden Besucher betrifft.

2. Bieten Sie Social Login und SSO in Ihrem Registrierungsformular an

Login-Seite von Medium mit Anmelde-Buttons für Google, Facebook und Twitter neben einer Personen-Illustration.

Die Registrierung über ein bestehendes Konto macht die Passworterstellung überflüssig – genau dort springen viele Nutzer ab. Zudem entlastet es Sie: Sie müssen keine Zugangsdaten mehr verwalten und absichern.

Beschränken Sie sich bei den Anbietern auf das Wesentliche. Verbraucherprodukte sollten Google und Apple anbieten, da Apple eine eigene Anmeldeoption vorschreibt für iOS-Apps, die Drittanbieter-Logins unterstützen. B2B-Produkte sollten primär auf Google Workspace und Microsoft setzen, ergänzt durch SAML-SSO (Security Assertion Markup Language Single Sign-On, das Protokoll, das IT-Abteilungen zur zentralen Verwaltung von Mitarbeiterzugriffen nutzen), falls Sie an Unternehmenskunden verkaufen. Passen Sie die Auswahl an Ihre tatsächlichen Nutzer an, statt einfach nur das zu kopieren, was Ihr direkter Konkurrent anzeigt.

TSU: T5 / S4 / U4 = 13. Umsetzen. Wirtschaftlich gesehen: spart jedem neuen Nutzer einen Schritt und reduziert dauerhaft das Volumen an Support-Tickets für Passwort-Resets. Ziehen Sie einen Punkt bei der Sicherheit ab, wenn Sie regulierte Daten verarbeiten, da die Nutzung eines Identitätsanbieters hier eine eigene Prüfung erfordert.

3. Weisen Sie auf aktivierte Feststelltaste (Caps Lock) hin

Design der GitHub-Anmeldeseite mit Anmeldeformular, Warnhinweis „Feststelltaste aktiviert“ und einem Link zur Registrierung.

Wer blind tippt und die Feststelltaste aktiviert hat, scheitert, versucht es erneut, scheitert wieder und landet schließlich in Ihrem Passwort-Reset-Prozess. Das kostet den Nutzer Zeit und Sie ein Support-Ticket – wegen eines Tastaturstatus, auf den Sie hätten hinweisen können. Die Anmeldeseite von GitHub zeigt direkt einen Warnhinweis an, wenn die Feststelltaste aktiv ist; das lässt sich mit wenigen Zeilen JavaScript umsetzen.

TSU: T4 / S5 / U4 = 13. Umsetzen. Wirtschaftlich gesehen: ein halber Tag Entwicklungsaufwand gegen wiederkehrende und absolut vermeidbare Supportkosten.

4. Verwenden Sie einheitliche Begriffe für Registrierung und Anmeldung

„Anmelden“, „Einloggen“ und „Login“ bedeuten dasselbe. Wenn Sie diese Begriffe innerhalb eines Produkts mischen, erzeugen Sie bei jedem Kontaktpunkt kleine Zweifel. Entscheiden Sie sich für eine Variante und bleiben Sie konsequent – auch beim Gegenstück: Wenn Sie „Anmelden“ verwenden, nutzen Sie „Abmelden“, niemals „Logout“.

Geben Sie das an Ihre Entwickler weiter, denn hier schleichen sich ständig Fehler ein. „Login“ ist ein Substantiv (der Login-Bereich), „einloggen“ ist das Verb (loggen Sie sich in Ihr Konto ein). Fehler in der Benutzeroberfläche wirken auf genau die technische Zielgruppe, die Sie überzeugen wollen, unprofessionell.

TSU: T5 / S5 / U3 = 13. Sofort umsetzen. Wirtschaftlich gesehen: nahezu null Baukosten, und es verstärkt jedes andere Vertrauenssignal auf der Seite.

5. Inline-Validierung nutzen, aber Fehlermeldungen kurz halten

Login-Seite von Evernote mit Anmeldeformular, einem Fehler im Passwortfeld und einem Link zur Registrierung.

Inline-Validierung verhindert, dass Nutzer ein Formular absenden, nur um nach dem Absenden festzustellen, dass drei Felder zuvor etwas falsch war. Führen Sie die Prüfung durch, sobald der Nutzer ein Feld verlässt, statt bei jedem Tastendruck, und erklären Sie, wie das Problem zu beheben ist, anstatt nur darauf hinzuweisen, dass eines besteht.

Dann gibt es noch die Fehlermeldung bei der Anmeldung, bei der gute UX und gute Sicherheit gegensätzliche Ziele verfolgen. „Falsches Passwort“ hilft dem Nutzer. Es bestätigt einem Angreifer jedoch auch, dass die E-Mail-Adresse zu einem echten Konto gehört, was den Aufwand für Credential-Stuffing-Angriffe halbiert. „Ungültige E-Mail- oder Passwort-Kombination“ ist der richtige Kompromiss. Schutz vor Enumeration – also das Verhindern, dass Angreifer herausfinden, welche Adressen Konten haben – ist wertvoller als das bisschen Klarheit, das man dafür aufgibt.

TSU: T5 / S2 / U4 = 11. Einplanen und Sicherheit in die Copy-Review aufnehmen. Dies ist der Punkt, der das Modell am meisten benötigt, da Design-Optimierung und Sicherheits-Optimierung hier tatsächlich im Widerspruch stehen. Wirtschaftlich gesehen: Die Bewertung verhindert, dass dieser Konflikt Ihr gesamtes Redesign für zwei Wochen blockiert.

6. Passwortanforderungen anzeigen, bevor sie benötigt werden

Registrierungsseite mit Feldern für E-Mail, Name und Passwort, Fehlermeldungen, Geburtsdatum und Login-Link.

Überrumpeln Sie niemanden mit Passwortregeln, nachdem die Eingabe bereits fehlgeschlagen ist. Zeigen Sie die Anforderungen von Anfang an neben dem Feld an und validieren Sie diese live während der Eingabe.

Hier lauern zwei Fallen. Erstens: Regeln, die so kompliziert sind, dass jeder auf dasselbe schwache, aber konforme Muster zurückgreift. Zweitens: erzwungene regelmäßige Passwortänderungen, die mittlerweile offiziell nicht mehr empfohlen werden. NIST Special Publication 800-63B-4, die am 31. Juli 2025 finalisierten Richtlinien des US National Institute of Standards and Technology zur digitalen Identität, legen fest, dass Prüfinstanzen keine regelmäßige Passwortänderung verlangen dürfen, es sei denn, es gibt Hinweise auf eine Kompromittierung des Authentifikators. Der Wechsel von „sollte nicht“ in der Ausgabe von 2017 zu „darf nicht“ macht daraus eine verbindliche Anforderung statt einer Empfehlung. Die Begründung ist jedem bekannt, der schon einmal einen Arbeitslaptop hatte: Die erzwungene Änderung führt zu vorhersehbaren, inkrementellen Passwörtern – aus „Passwort1!“ wird „Passwort2!“. Ein Vorbehalt: Wenn spezifische Vorschriften wie PCI-DSS im Widerspruch zu den NIST-Richtlinien stehen, haben die Vorschriften Vorrang.

TSU: T5 / S5 / U4 = 14. Sofort umsetzen. Wirtschaftlich gesehen: Der Verzicht auf regelmäßige Passwortänderungen reduziert das Volumen an Passwort-Resets und beseitigt wiederkehrende Reibungspunkte für zahlende Kunden, ohne die Sicherheit gemäß aktueller Richtlinien zu gefährden.

7. Passwort-Bestätigungsfeld durch eine „Anzeigen“-Option ersetzen

Login-Seite mit Feldern für E-Mail und Passwort, blauem Weiter-Button und Anmeldeoptionen für IKEA-Konten.

Das Feld zur Passwortbestätigung ist ein veraltetes Muster, das genau die Fehler provoziert, die es eigentlich verhindern soll. Die Eingaben stimmen nicht überein, der Nutzer kann keine der beiden sehen und muss nun beide löschen und von vorn beginnen, ohne zu wissen, welche falsch war. Großartig.

Ein Umschalter zum Ein- und Ausblenden löst das Problem schneller. Nutzer können ihre Eingabe überprüfen und direkt korrigieren, so wie es die meisten modernen Plattformen heute ermöglichen.

TSU: T5 / S4 / U4 = 13. Sofort umsetzen. Wirtschaftlich gesehen: ein Feld weniger und eine Fehlerquelle weniger auf Ihrem meistbesuchten Formular.

Before-and-after comparison of a sign-up form showing UX improvements like persistent labels and a password toggle.

8. Buttons mit der ausgeführten Aktion beschriften

Login-Seite von Awwwards mit Anmelde- und Registrierungsoptionen neben dem Foto eines großen Publikums.

Wenn jemand zwischen verschiedenen Wegen wählen kann – etwa zwischen einem kostenlosen und einem kostenpflichtigen Tarif oder einem privaten und einem geschäftlichen Konto –, muss der Button klar benennen, wofür er steht. „Registrieren“ ist nichtssagend, wenn zwei solcher Buttons auf einem Bildschirm erscheinen. „Kostenlose Testversion starten“ und „Pro kaufen“ hingegen sagen alles.

TSU: T4 / S5 / U4 = 13. Sofort umsetzen. Wirtschaftlich gesehen: Dies beeinflusst Ihren Tarif-Mix und steigert den Umsatz pro Registrierung, anstatt nur die Anzahl der Registrierungen zu erhöhen.

9. Wechsel zwischen Registrierung und Anmeldung deutlich machen

Diprella's login page

Ein Bestandskunde, der auf dem Registrierungsformular landet, und ein neuer Besucher auf der Anmeldeseite haben dasselbe Problem, nur in entgegengesetzter Richtung. Beide benötigen sofort einen sichtbaren Weg zum Ziel. Unterscheiden Sie die beiden Zustände durch Layout und Text – das gleiche Prinzip, das auch bei einem erfolgreichen Website-Relaunch gilt – und ermöglichen Sie den Wechsel mit einem einzigen Klick ohne Neuladen der Seite.

TSU: T5 / S5 / U4 = 14. Umsetzen. Wirtschaftlich gesehen: Bestandskunden sind Umsatz, den Sie bereits haben. Sie an der Tür zu verlieren, kostet mehr, als einen Interessenten zu verlieren, zu dem noch keine Beziehung bestand.

10. Verwenden Sie E-Mail statt Benutzernamen

Login-Seite von LinkedIn mit Feldern für E-Mail und Passwort, blauem Anmelde-Button und Registrierungslink.

Benutzernamen bürden Ihren Nutzern ein Gedächtnisproblem auf, um das sie nie gebeten haben. Sie vergessen, welche Variante sie bei der Registrierung gewählt haben, und Fehlermeldungen bei bereits vergebenen Benutzernamen fügen einem Formular, das eigentlich fehlerfrei sein sollte, eine unnötige Hürde hinzu.

Die E-Mail-Adresse erfüllt die Doppelfunktion als Identifikationsmerkmal und Wiederherstellungskanal. Zudem bietet sie Ihnen einen legitimen Weg, den Nutzer für Onboarding und Re-Engagement erneut zu kontaktieren. Dies gilt natürlich unter Vorbehalt der Zustimmung gemäß DSGVO, der EU-Datenschutz-Grundverordnung, die für europäische Unternehmen keine Option, sondern Pflicht ist.

TSU: T5 / S4 / U4 = 13. Umsetzen. Wirtschaftlich gesehen: ein Feld weniger, eine Fehlerquelle weniger, ein Marketingkanal mehr.

11. Gestalten Sie die Passwortwiederherstellung wirklich einfach

Login-Seite von Dropbox mit Social-Login-Buttons, Registrierungslink und einer Hand, die einen Ausweis scannt.

Menschen vergessen Passwörter. Das ist kein Designfehler, der wegprogrammiert werden muss, sondern ein ganz normales menschliches Verhalten, mit dem Ihr Produkt souverän umgehen sollte. Platzieren Sie den Link zum Zurücksetzen direkt auf der Anmeldeseite, versenden Sie die E-Mail innerhalb von Sekunden und leiten Sie den Nutzer dorthin zurück, wo er gerade war, anstatt ihn auf der Startseite abzuladen, damit er von vorn beginnen muss.

Achten Sie auf die Sicherheitsdetails. „Wir haben einen Link zum Zurücksetzen gesendet, falls dieses Konto existiert“ umgeht das gleiche Enumerationsproblem wie in Tipp 5.

TSU: T3 / S4 / U4 = 11. Einplanen. Wirtschaftlich gesehen: weniger Traffic als bei der Registrierung, aber dieser Prozess betrifft überproportional häufig zahlende Bestandskunden. Priorisieren Sie dies, wenn Abonnements Ihre Basis bilden.

12. Unterteilen Sie lange Registrierungen in Schritte

Login-Seite von Uber mit E-Mail-Feld, türkisem Weiter-Button und Registrierungslink über einer Stadtansicht.

Fünfzehn Felder auf einem Bildschirm wirken wie Arbeit. Dieselben fünfzehn Felder, verteilt auf drei beschriftete Schritte mit Fortschrittsanzeige, wirken überschaubar. Zudem können Sie nach dem ersten Schritt bereits ein nutzbares Konto erfassen, anstatt alles zu verlieren, wenn jemand bei Feld elf abspringt.

Noch besser: Fragen Sie nur das ab, was für die Kontoerstellung zwingend erforderlich ist, und sammeln Sie den Rest, sobald der Nutzer einen Mehrwert erkannt hat. Alles, was nicht zur Authentifizierung gehört, gehört ins Onboarding und Produktdesign, nicht vor das Tor.

TSU: T5 / S5 / U4 = 14. Umsetzen. Wirtschaftlich gesehen: Allein die teilweise Erfassung rettet einen Teil der abgebrochenen Registrierungen, die sonst ein Totalverlust wären.

13. Bieten Sie eine explizite „Angemeldet bleiben“-Option an

Design der Mailchimp-Anmeldeseite mit einem Registrierungslink und einer Grafik zum QuickBooks-Integrationsworkflow.

Lassen Sie die Nutzer selbst über dauerhafte Sitzungen entscheiden, anstatt es für sie zu tun. An einem gemeinsam genutzten oder öffentlichen Gerät müssen sie die Option abwählen können. Auf ihrem eigenen Laptop werden sie sie gerne aktivieren. Lassen Sie das Kontrollkästchen standardmäßig deaktiviert und beschriften Sie es verständlich.

TSU: T4 / S3 / U4 = 11. Einplanen. Wirtschaftlich gesehen: Die Sitzungsdauer ist eine echte Risikoentscheidung, insbesondere bei Finanz- oder Gesundheitsdaten. Bewerten Sie diesen Aspekt gemeinsam mit Ihrem Compliance-Verantwortlichen, nicht erst im Nachhinein.

14. Gestalten Sie die mobile Anmeldeseite zuerst

Die meisten Registrierungen erfolgen heute mobil, und dort gehen auch die meisten verloren. Die Abbruchraten von Baymard liegen mobil deutlich über denen am Desktop. Anmeldeformulare gehören zu den größten Problemfällen, da sich die Fehlerquellen summieren: kleine Ziele, eine Tastatur, die den halben Bildschirm verdeckt, und die Passworteingabe ohne die Hilfe eines Passwort-Managers.

Vier Korrekturen bringen den größten Gewinn. Legen Sie die korrekten Eingabetypen fest, type="email" und type="tel", damit die passende Tastatur erscheint und Nutzer nicht erst nach dem @-Zeichen suchen müssen. Hinterlegen Sie Autocomplete-Attribute wie email, current-password oder new-password, damit die automatische Ausfüllfunktion von Browsern und Passwort-Managern auch wirklich funktioniert. Achten Sie auf eine Mindestgröße der Klickfläche von 24x24 CSS-Pixeln gemäß WCAG 2.2 Erfolgskriterium 2.5.8 Zielgröße (Minimum). Stellen Sie außerdem sicher, dass Ihr Haupt-Button nicht von der Bildschirmtastatur verdeckt wird, sobald ein Eingabefeld fokussiert wird.

TSU: T5 / S5 / U4 = 14. Veröffentlichen. Wirtschaftlich gesehen ist dies für die meisten Konsumgüter das größte Volumenpotenzial überhaupt – und genau das, was Teams am häufigsten übersehen, weil sie ihre Produkte nur am Desktop-Rechner testen.

15. Barrierefreiheitsstandards für jedes Formularfeld einhalten

Die Barrierefreiheit von Anmelde- und Registrierungsformularen ist sowohl ein Konversionsfaktor als auch ein rechtliches Risiko. Gemäß dem European Accessibility Act, der seit dem 28. Juni 2025 in Kraft ist, ist dies für viele in der EU vertriebene Produkte eine verbindliche Anforderung. Die entsprechenden WCAG 2.2 Erfolgskriterien sind präzise und überprüfbar, was die Umsetzung deutlich einfacher macht als bei den meisten anderen Compliance-Aufgaben.

Labels statt Platzhalter (1.3.1, 3.3.2). Jedes Eingabefeld benötigt ein programmatisch verknüpftes Label. Platzhaltertexte verschwinden, sobald der Nutzer mit der Eingabe beginnt, wodurch Screenreader-Nutzer und alle, die kurz den Faden verloren haben, keine Orientierung mehr haben.

Fehler identifizieren und erklären (3.3.1, 3.3.3). Fehlermeldungen müssen das Problem benennen, eine Lösung vorschlagen und für assistierende Technologien zugänglich sein. Ein Feld einfach nur rot zu färben, ist keine Fehlermeldung.

Barrierefreie Authentifizierung (3.3.8). Das Blockieren von Copy-and-Paste oder Skripte, die das automatische Ausfüllen durch Browser und Passwort-Manager verhindern, verstoßen gegen dieses Kriterium. Das Auswendiglernen oder manuelle Abtippen von Passwörtern stellt für Menschen mit bestimmten kognitiven Beeinträchtigungen eine enorme oder gar unüberwindbare Hürde dar. Lesen Sie diesen Punkt zweimal, falls Ihr Sicherheitsteam das Einfügen in Passwortfelder derzeit unterbindet. Diese Kontrolle ist nun ein WCAG-Verstoß.

Kontrast und Tastaturbedienung (1.4.3, 2.1.1). Das gesamte Formular muss ausschließlich über die Tastatur ausfüllbar sein, mit sichtbaren Fokus-Zuständen und einem Textkontrast von mindestens 4,5:1.

TSU: T5 / S5 / U5 = 15. Veröffentlichen. Wirtschaftlich gesehen: der einzige Punkt auf dieser Liste mit direktem regulatorischem Risiko. Zudem hilft es Nutzern mit alten Geräten, gesprungenen Displays und bei hellem Sonnenlicht – eine weitaus größere Gruppe, als die meisten Teams annehmen.

blue arrow to the left
Imaginary Cloud logo

Zusammenfassung: Was ein gutes Design für Anmelde- und Registrierungsseiten ausmacht

Vier Entscheidungen und eine Methode. Fragen Sie nach weniger: Beschränken Sie sich auf die für die Authentifizierung unbedingt erforderlichen Felder und verlagern Sie alles Weitere in das Produkt. Sorgen Sie für klare Wege: ein sichtbarer Einstiegspunkt für die Anmeldeseite, ein deutlicher Wechsel zwischen Registrierung und Anmeldung sowie ein Wiederherstellungslink, den Nutzer auch in frustrierten Momenten sofort finden. Gestalten Sie Fehlermeldungen nutzerfreundlich: durch Inline-Validierung, die Lösungen aufzeigt, einen Umschalter zur Sichtbarmachung des Passworts statt eines Bestätigungsfeldes und Anmeldefehler, die bewusst vage gehalten sind, um Angreifern keine Liste gültiger Konten zu liefern. Designen Sie zuerst für Mobilgeräte und unterstützende Technologien, denn dort liegt das größte Nutzungsvolumen und auch das größte rechtliche Risiko.

Die Methode heißt TSU. Bewerten Sie jede Änderung nach Traffic, Security und User-Typ und setzen Sie sie dann in der Reihenfolge ihrer Punktzahl um. Diese Methode existiert, weil das Scheitern von Redesigns bei Anmeldeseiten fast nie an mangelndem Wissen über Best Practices liegt. Es liegt daran, dass Teams die einfachen Aufgaben erledigen, während die sicherheitskritischen Arbeiten mit hohem Volumen in der Prüfung stecken bleiben. Die Erkenntnis von Baymard, dass lösbare Usability-Probleme beim Checkout eine durchschnittliche Conversion-Steigerung von 35,26 % bedeuten, zahlt sich nur für Teams aus, die diese Aufgaben priorisieren und tatsächlich umsetzen.

blue arrow to the left
Imaginary Cloud logo

Häufig gestellte Fragen zum Design von Anmelde- und Login-Seiten

Wie erstelle ich eine Login-Seite?

Beginnen Sie mit einem Formular: ein E-Mail-Feld und ein Passwortfeld, beide mit sichtbaren Beschriftungen und korrekten Autocomplete-Attributen. Fügen Sie eine einzelne primäre Schaltfläche, einen sichtbaren Link zum Zurücksetzen des Passworts und einen klaren Weg zum Registrierungsformular für Nutzer ohne Konto hinzu. Platzieren Sie Social-Login- oder SSO-Optionen über dem Formular, falls Ihre Nutzer dies erwarten. Kümmern Sie sich dann um Fehler: eine allgemeine Meldung wie „Ungültige E-Mail- oder Passwort-Kombination“, eine Warnung bei aktivierter Feststelltaste und eine Ratenbegrenzung bei wiederholten Versuchen. Alles Weitere ist nur noch Feinschliff.

Was sollte eine Registrierungsseite enthalten?

Mindestens ein E-Mail-Feld, ein Passwortfeld mit sichtbaren Anforderungen und einer Ein-/Ausblende-Funktion sowie eine klar beschriftete Schaltfläche zum Absenden. Fügen Sie Social-Login hinzu, wenn es zu Ihrer Zielgruppe passt, einen sichtbaren Link zu Ihren AGB und Datenschutzbestimmungen sowie einen Weg zurück zur Login-Seite für wiederkehrende Nutzer. Lassen Sie alles weg, was nicht zur Authentifizierung gehört. Unternehmensgröße, Berufsbezeichnung und Telefonnummer gehören ins Onboarding, nachdem das Konto bereits erstellt wurde.

Welche Felder sollte ein Registrierungsformular haben?

So wenige, wie für die Authentifizierung erforderlich sind – meist E-Mail und Passwort oder eine Social-Login-Schaltfläche. Baymard fand heraus, dass der durchschnittliche Checkout-Prozess in den USA 23,48 Formularelemente anzeigt, obwohl ein idealer Ablauf mit 12 bis 14 auskommen könnte. Jedes zusätzliche Feld ist ein Punkt, an dem Nutzer abbrechen können. Wenn ein Stakeholder ein weiteres Feld fordert, fragen Sie, was passiert, wenn diese Daten erst eine Woche später innerhalb des Produkts abgefragt werden.

Wie reduziere ich die Abbruchrate bei der Registrierung?

Die Reihenfolge: Reduzieren Sie die Felder auf das für die Authentifizierung notwendige Minimum, fügen Sie Social-Login oder SSO hinzu, unterteilen Sie den Rest in beschriftete Schritte mit Fortschrittsanzeige, optimieren Sie die Eingabetypen und das automatische Ausfüllen für Mobilgeräte und formulieren Sie Fehlermeldungen so, dass sie die Lösung erklären. Messen Sie dann den Funnel, um zu sehen, welche Änderung welche Kennzahl beeinflusst hat. Die meisten Teams implementieren alle fünf Punkte gleichzeitig und erfahren so nicht, welcher davon wirklich entscheidend war.

Wie beeinflusst das Design der Registrierungsseite die Conversion-Rate?

Direkt, und das lässt sich messen. Baymard hat herausgefunden, dass 18 % der Nutzer abbrechen, weil eine Kontoregistrierung erforderlich ist, und 17 %, weil der Prozess zu lang oder kompliziert ist. Die Registrierung befindet sich direkt am Ende des Akquise-Funnels; Abbrüche an dieser Stelle verschwenden also Geld, das Sie bereits zuvor investiert haben. Deshalb bringt die Optimierung hier meist mehr pro investierter Entwicklerstunde als an anderen Stellen.

Was ist der Unterschied zwischen „Sign in“ und „Log in“?

Funktional gibt es keinen. Beide beschreiben dieselbe Aktion. Der Unterschied ist grammatikalischer Natur und eine Frage der Konsistenz. „Login“ ist ein Substantiv, wie in „Login-Seite“. „Log in“ ist das Verb, wie in „Loggen Sie sich in Ihr Konto ein“. „Sign in“ funktioniert als Verbphrase, während „Sign-in“ die Substantivform ist. Wählen Sie eine Konvention, wenden Sie diese überall an und vergessen Sie nicht die passenden Begriffe für „Sign-out“ oder „Log-out“.

Sollten wir bei der Registrierung eine Passwortbestätigung verlangen?

Nein. Eine Ein-/Ausblende-Funktion erfüllt denselben Zweck mit weniger Reibungsverlusten. Wenn Bestätigungsfelder nicht übereinstimmen, können Nutzer keine der beiden Eingaben sehen und müssen beide neu eingeben, ohne jemals zu erfahren, welche davon falsch war.

Ist Social-Login sicher genug für ein B2B-Produkt?

Für die meisten B2B-Produkte ja, sofern Sie unternehmenstaugliche Anbieter nutzen. Google Workspace und Microsoft Entra bieten eine stärkere Authentifizierung als die meisten internen Passwortsysteme, einschließlich erzwungener Multi-Faktor-Authentifizierung und zentraler Sperrmöglichkeiten, sobald ein Mitarbeiter das Unternehmen verlässt. Für regulierte Branchen oder Unternehmenskunden ist SAML-SSO meist eine Beschaffungsvoraussetzung und kein optionales Extra.

Was sind Best Practices für Login-Seiten auf Mobilgeräten?

Wählen Sie die korrekten Eingabetypen, damit die passende Tastatur erscheint. Setzen Sie Autocomplete-Attribute, damit Passwort-Manager die Felder ausfüllen können. Halten Sie die Mindestgröße für Touch-Ziele von 24x24 CSS-Pixeln gemäß WCAG 2.2 Kriterium 2.5.8 ein. Stellen Sie sicher, dass die Schaltfläche zum Absenden nicht von der Bildschirmtastatur verdeckt wird, wenn ein Feld fokussiert ist. Testen Sie auf einem echten Gerät, nicht in einem Emulator, da das Tastaturverhalten genau das ist, was Emulatoren oft falsch darstellen.

Woher wissen wir, ob unsere Login-Seite nicht optimal funktioniert?

Messen Sie drei Kennzahlen: die Abbruchrate zwischen dem Aufruf der Anmeldeseite und der erfolgreichen Authentifizierung, das Verhältnis von Passwort-Zurücksetzungsanfragen zu aktiven Sitzungen sowie den Anteil der Registrierungen, die nach dem ersten Feld abgebrochen werden. Segmentieren Sie diese Daten nach Gerätetyp, da die Abbruchrate auf Mobilgeräten meist deutlich höher ist als auf dem Desktop – genau dort verbirgt sich oft das größte Potenzial für Rückgewinnungen. Es gibt keinen universellen Richtwert für eine gesunde Rate an Passwort-Zurücksetzungen. Entscheidend ist Ihr eigener Trendverlauf und wie sich dieser bei Änderungen verändert.

blue arrow to the left
Imaginary Cloud logo

Sprechen Sie mit uns über Ihren Registrierungsprozess

Wenn Ihre Anmelde- oder Login-Seite Conversions verliert, müssen Sie zuerst herausfinden, wo und in welchem Umfang das geschieht. Wir beginnen mit einem UX-Audit Ihres bestehenden Registrierungsprozesses: Wir bilden den Funnel von der ersten Ansicht bis zur erfolgreichen Authentifizierung ab, identifizieren die spezifischen Abbruchpunkte und vergleichen Ihre Abschlussraten mit vergleichbaren Produkten in Ihrer Branche.

Sie erhalten eine priorisierte Liste, bewertet nach dem TSU-Modell. Was geändert werden sollte, in welcher Reihenfolge, welchen Wert jede Optimierung im Verhältnis zu Ihren aktuellen CAC hat und was die Umsetzung kostet. Letzteres ist entscheidend, da Sie so den Aufwand für das Login-Design gegen andere Aufgaben im Sprint abwägen können, anstatt über persönlichen Geschmack zu diskutieren. Kein Bericht für die Ablage. Ein Backlog, mit dem Ihre Entwickler am Montag direkt loslegen können.

Termin vereinbaren mit unserem UX/UI-Design- und Produktteam, um Ihren aktuellen Prozess zu analysieren.

E-Book-Angebot mit UX/UI-Designtipps zur Website-Konvertierung mit Desktop-, Mobil- und Lupensymbolen.
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Alexandra Mendes
Alexandra Mendes

Alexandra Mendes ist Senior Growth Specialist bei Imaginary Cloud und verfügt über mehr als 3 Jahre Erfahrung in der Erstellung von Texten über Softwareentwicklung, KI und digitale Transformation. Nach Abschluss eines Frontend-Entwicklungskurses erwarb Alexandra einige praktische Programmierkenntnisse und arbeitet nun eng mit technischen Teams zusammen. Alexandra ist begeistert davon, wie neue Technologien Wirtschaft und Gesellschaft prägen. Sie liebt es, komplexe Themen in klare, hilfreiche Inhalte für Entscheidungsträger umzuwandeln.

LinkedIn

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:

Dropdown caret icon