15 Anmelde-Seitenbeispiele, Die Benutzer Stilvoll Begrüßen

Es läuft nichts im Fernsehen, also surfst Du ein wenig im Web auf Deinem Handy.

Dein Finger landet auf einem Lesezeichen, das Du schon lange nicht mehr geöffnet hast. Wow, es scheint, als hätten sie kürzlich Upgrades durchgeführt!

Du bist Dir ziemlich sicher, dass Du ein Konto auf dieser Seite hast. Aber welche E-Mail war es? Was war das Passwort? Die Login-Seite bietet keine Hinweise, und anscheinend wurden bei den Upgrades diese Seite übersehen. Sie ist richtig hässlich.

Vielleicht gibt es einen Grund, warum Du die Seite nicht mehr besuchst.

Für einen Website-Betreiber liest sich das wie eine Gruselgeschichte. Eigentlich ist es jedoch eher eine Warnung. Du musst das Design Deiner Anmeldeseite perfektionieren — sonst…

via GIPHY

Fragst Du Dich, wo Du anfangen sollst? In diesem Leitfaden präsentieren wir die großartigsten Beispiele für das Design von Login-Seiten, die die Menschheit kennt — mit dem technischen Kontext, um Dir zu helfen, ein umwerfendes Nutzererlebnis zu liefern.

Lass uns eintauchen!

Beispiele, Wenn Deine Kunden Vertrauenssignale Benötigen

Deine Anmeldeseite ist die Eingangstür deiner Website. Oder vielleicht die Zugbrücke zu deiner Burg.

Es sollte echten Benutzern einen einfachen Zugang bieten und verhindern, dass böse Akteure eindringen.

Deine Nutzer verstehen das instinktiv. Und sie sind daran interessiert zu sehen, dass Du die Sicherheit ernst nimmst.

Die folgenden Beispiele bieten jede Menge Sicherheit und eignen sich daher gut für Websites, die auf Vertrauen angewiesen sind: Finanzen, Gesundheitswesen und ähnliche Bereiche.

1. Stripe: Sauberes Design Mit Sicherheitshinweisen

Zahlungsabwickler Stripe hat eine einfache, aber effektive Anmeldeseite. Der Designstil ist minimalistisch, aber es gibt viele Hinweise darauf, dass sie eine sichere Operation betreiben.

Was wir lieben:

• Mehrere, sichere Anmeldeverfahren: Stripe bietet gleich zu Beginn WebAuthn, Biometrie und SSO an. Das bedeutet, dass Benutzer leicht die Methode wählen können, der sie vertrauen.
• Zwei-Faktor-Authentifizierung im Rampenlicht: Der dezente Hinweis unter dem Hauptformular ermutigt Benutzer, ihr Konto zu schützen. Es trägt auch dazu bei, die sichere Atmosphäre zu verstärken.
• Einfaches, dezentes Branding: Die Nutzer von Stripe sind beschäftigte Geschäftsleute. Diese Anmeldeseite bleibt einfach, bietet aber genug Branding, um den Benutzern zu versichern, dass sie auf der richtigen Seite sind.

Umsetzungshinweise:

• Stripe hat WebGL verwendet, um einen farbenfrohen, animierten Hintergrund zu erstellen. 
• Alle aria-* Attribute sind ausgefüllt und entsprechen ihren Rollen. Dies ist ein großer Fortschritt für die Zugänglichkeit, da es Bildschirmlesern ermöglicht, das Formular zu navigieren.

Wichtigste Erkenntnis: Es ist möglich, Vertrauen aufzubauen und Reibungen im gleichen Design zu reduzieren.

2. MyChart: Markenspezifische Privatsphäre für das Gesundheitswesen

Du musst nicht Sherlock heißen, um die Datenschutznachweise auf MyChart zu finden. Die Anmeldeseite dieser Gesundheitsplattform bietet beeindruckende Sicherheitsreferenzen in einem individuell gestalteten Erscheinungsbild.

Warum es funktioniert:

• Co-Branding mit dem spezifischen Gesundheitsdienstleister: Dies beruhigt die Patienten, dass sie am richtigen Ort sind.
• Sichtbarkeitsschalter im Passwortfeld: Benutzer können überprüfen, ob sie die richtigen Zeichen eingeben, und dabei ihre Privatsphäre bewahren.
• Unterstützung für mehrere Sprachen: Spanischsprachige können schnell über einen Link oben rechts zu ihrer Muttersprache wechseln, und andere Sprachen werden über den Info-Knopf abgedeckt.

Umsetzungshinweise:

• Für das Gesundheitswesen ist Zugänglichkeit oberste Priorität. Verwende klare Beschriftungen und starken Kontrast.
• MyChart bietet eine „Guest pay“-Option, die kein vollständiges Login erfordert – ideal für eine reibungslose Benutzererfahrung.

Wichtigste Erkenntnis: Einfaches, zugängliches Design ist immer besser als etwas Auffälliges.

3. Barclays Bank: Sicherheitstheater aus gutem Grund

Einige Seiten inszenieren ein Schauspiel, um Nutzer zu täuschen. Aber Barclays verwendet ein wenig Theater, um sichtbare Zeichen der zugrundeliegenden Sicherheit zu bieten. Es ist eine Fünf-Sterne-Bewertung von uns.

Warum es funktioniert:

• Explizite Vertrauenssignale werden prominent angezeigt: Der „Sicher“-Link oben rechts bietet Sicherheit und verweist auf eine Seite über die Sicherheitsmaßnahmen von Barclays.
• Hilfreiche Häufig gestellte Fragen auf der Anmeldeseite: Um verunsicherten Nutzern, die Probleme beim Anmelden haben, zu beruhigen, bietet Barclays einige nützliche Tipps zur Fehlerbehebung.
• Offizielles, unaufdringliches Branding: Das Design hier entspricht einem Anzug und Krawatte: klug, vertrauenswürdig und professionell.

Implementierungshinweise:

• Für Websites und Apps mit hoher Sicherheit erwäge, flexible Identifikatoren (z.B. Benutzername, E-Mail, Telefon) anzubieten.
• HSTS zwingt Browser dazu, die sichere https:// Version der Website zu verwenden.

Wichtigste Erkenntnis: Wenn Du an der Sicherheit arbeitest, gibt es nichts Falsches daran, sie zu zeigen.

4. Bank of America: Vertrauen Durch Transparenz

Eine gute Methode, das Vertrauen der Nutzer zu gewinnen, ist, wirklich ehrlich und offen zu sein. Das ist der Weg, den die Bank of America mit ihrer Anmeldeseite eingeschlagen hat, und das mit gutem Erfolg.

Warum es funktioniert:

• FDIC-Versicherung wird prominent angezeigt: Die Regierungsbotschaft ganz oben signalisiert sofort, dass diese Seite seriös ist.
• Mehrschichtige Supportoptionen: Zwei unterschiedliche Hilfsbereiche („Hilfe beim Login“, „Nicht beim Online-Banking?“) mit Unteranfragen gehen auf verschiedene Nutzerbedürfnisse ein, ohne das Hauptformular zu überladen.
• Mobile-App-Promotion mit Kontext: Die Bank erläutert die Sicherheits- und Komfortvorteile, was Vertrauen in den mobilen Kanal aufbaut.

Umsetzungshinweise:

• Beachte, dass sich Benutzer über eine eindeutige ID-Nummer anmelden, statt mit ihrer E-Mail. Diese zusätzliche Schutzebene ist eine gute Idee für Finanzplattformen.
• Im Footer zeigt die Option „Deine Datenschutzauswahl“ den CCPA-Konformität und den Respekt für die Rechte der Nutzerdaten.

Wichtigste Erkenntnis: Du kannst viele Optionen und Informationen auf Deiner Anmeldeseite einbinden — halte die Bereiche jedoch getrennt, um Unordnung zu vermeiden.

Wenn Einfachheit Alles Ist

Nicht jede Anmeldeseite muss ihre Sicherheit herausstellen.

Wenn jemand versucht, seine Lieblingssongs zu streamen oder eine digitale Notiz zu machen, sollten Geschwindigkeit und Bedienungsfreundlichkeit oberste Priorität haben.

Hier sind einige überzeugende Beispiele für Login-Seiten mit geringem Widerstand:

5. Spotify: Anleitung Für Den Benutzer, Um Das Einloggen Zu Beschleunigen

Viele Anmeldeseiten priorisieren nach wie vor die Kombination aus E-Mail-Adresse und Passwort. Aber Spotify stellt OAuth an die erste Stelle, was es Benutzern ermöglicht, sich mit Konten anzumelden, bei denen sie möglicherweise bereits angemeldet sind. Musikliebhaber, freut euch.

Warum es funktioniert:

• Sichere, reibungsarme Anmeldemethoden haben Vorrang: OAuth ist sowohl sicherer als auch bequemer für die meisten Benutzer, daher bietet Spotify diese Optionen zuerst an. 
• Branding, das die Benutzerfreundlichkeit verbessert: Die leuchtend grünen Markenfarben von Spotify helfen, die wichtigsten Funktionen hervorzuheben, einschließlich des nützlichen „Merken“-Schalters.
• Alternativen leicht erreichbar: Wenn Du kein Konto hast oder Dein Passwort nicht erinnerst, ist die Abhilfe klar ersichtlich.

Umsetzungshinweise:

• Mit React, core-js und styled-components erstellt. 
• Ordne Deine Anmeldeoptionen entsprechend der Nutzung Deiner Zielgruppe an. Halte das Layout konsistent, um die Muskelgedächtnis der Benutzer zu unterstützen.

Wichtigste Erkenntnis: Die meisten Benutzer bevorzugen soziale Anmeldungen und sie gelten allgemein als sicherer.

6. Notion: Ein Feld, Keine Reibung

Es gibt nichts Aufsehenerregendes auf der Notion-Anmeldeseite — und das passt perfekt zur reduzierten Ästhetik dieser Plattform für Notizen. Die Hauptattraktion hier? Großartige Anmeldeabläufe.

Warum es funktioniert:

• Schwerpunkt Auf Zero-Typing Flows: Du hast eine Vielzahl an einfachen Login-Optionen zur Auswahl, und jede ist klar mit einem Icon gekennzeichnet.
• Magic Link Als Standardweg: Gib deine E-Mail ein, erhalte einen Link, Klick zum Einloggen. Keine Passwörter zu merken oder einzutippen.
• Progressive Offenlegung Richtig Gemacht: Die Benutzeroberfläche zeigt nur das, was Du brauchst, wenn Du es brauchst. Passwortfelder erscheinen nur, wenn Du diesen Weg wählst.

Umsetzungshinweise:

• Wenn dein Produkt auf Teams abzielt, ist die SSO-Integration (SAML, Okta) unerlässlich.
• Verwende eine intelligente Eingabeerkennung, um E-Mail-Formate automatisch zu validieren. Das kann eine Menge an Tippfehler-Frust ersparen.

Wesentlicher Aspekt: Das Verstecken des Passwortfeldes kann sicherere Anmeldemethoden fördern.

7. Slack: Schneller Zugriff Auf Alle Deine Arbeitsbereiche

Obwohl Slack nur eine Messaging-Plattform ist, gibt es eine einzigartige Herausforderung beim Einloggen: Viele Nutzer gehören zu mehreren Arbeitsbereichen. Um dieses Problem zu umgehen, hat Slack eine wirklich intelligente Anmeldeseite entwickelt.

Warum es funktioniert:

• Email-first Ansatz leitet Dich zum Eingang: Gib Deine E-Mail ein, und Slack findet alle Deine Arbeitsbereiche; es ist nicht nötig, sich Firmen-URLs zu merken.
• Klarer Arbeitsbereichswechsler: Du bist bereits irgendwo angemeldet? Die Arbeitsbereichsübersicht ermöglicht es Dir, mit einem Klick zwischen Teams zu wechseln.
• Eine bequemere Standardoption: Die Anmeldemöglichkeit über Google wird hier besonders hervorgehoben, da viele Arbeitsplatzkonten Google Workspace verwenden.

Umsetzungshinweise:

• Wenn deine App mehrere Konten oder Organisationen unterstützt, baue eine Schnellwechselfunktionalität ein.
• Magic-Link-Login als Standard bedeutet, dass Benutzer ihre Passwörter für mehrere Arbeitsbereiche nicht speichern oder sich merken müssen.

Wichtigste Erkenntnis: Du kannst mehrere Konten auf derselben Plattform zulassen, ohne dass es bei der Anmeldung zu Problemen für deine Nutzer kommt.

8. Shopify: Gemacht für Händler

Während Shopify sich an ein anderes Publikum richtet, ist es dennoch ein Ort für Arbeit. Die Anmeldeseite dieser E-Commerce-Plattform ermöglicht es Händlern, mit ihrer Arbeit fortzufahren, ohne zuerst ein Rätsel lösen zu müssen.

Warum es funktioniert:

• Attraktives, fokussiertes Design: Der Farbverlaufshintergrund fügt visuelles Interesse hinzu, während die weiße Karte den Fokus auf die Anmeldeaktionen legt.
• Passkey-Authentifizierung prominent platziert: Die Option „Mit Passkey anmelden“ zeigt, dass Shopify bewährte Sicherheitspraktiken übernimmt.
• Social Login für Bequemlichkeit: Optionen für Apple, Facebook und Google entsprechen den verschiedenen Benutzerpräferenzen und bieten schnellen Zugang mit einem Klick.

Umsetzungshinweise:

• Shopify ist ein bekanntes Beispiel für eine Plattform, die mit Ruby on Rails entwickelt wurde.
• Füge eine Passkey-Option zu deinem eigenen Login über die WebAuthn API hinzu.

Wichtigste Erkenntnis: B2B-Anmeldeseiten sollten für die tägliche wiederholte Nutzung optimiert werden, nicht für einmalige Konversionen.

Wenn Die Gemeinschaft Zählt

Community-Plattformen müssen eine heikle Balance wahren. Du möchtest, dass Dein Netzwerk sicher ist, aber Du willst keinen Türsteher, der die Stammgäste terrorisiert.

Diese Beispiele zeigen, wie es möglich ist, stark und dennoch einladend mit deinem Anmeldebildschirm zu sein.

9. Discord: Gaming-Inspirierter Login

Der Login bei Discord fühlt sich weniger wie eine Sicherheitskontrolle und mehr wie der Beitritt zu einer Online-Multiplayer-Lobby an. Dies liegt teilweise daran, dass viele Benutzer Gamer sind, aber das Flair funktioniert auch gut für andere Gemeinschaften.

Warum es funktioniert:

• Ein freundlicher Empfang: Nicht nur eine, sondern zwei Begrüßungen mit Ausrufezeichen. Discord ist begeistert, zurückkehrende Nutzer zu sehen.
• QR-Code Login für Mobilnutzer: Nutzer können mit ihrem Telefon scannen, wenn sie dort bereits angemeldet sind; ideal für Nutzer, die zwischen Geräten wechseln.
• Benutzername-zuerst-Ansatz: Im Gegensatz zu E-Mail-zentrierten Plattformen kennt Discord seine Nutzer anhand ihrer Handles.

Implementierungshinweise:

• Um QR-Logins anzubieten, erstelle ein kurzlebiges Login-Token auf dem Server, kodiere es in einem QR-Code und beobachte die Einlösung über WebSocket.
• Ein dezenter Markenhintergrund kann Deiner Seite ein lebendiges Gefühl verleihen, ohne vom Login-Prozess abzulenken.

Wichtigste Erkenntnis: Deine Login-Seite sollte die Persönlichkeit deiner Community widerspiegeln.

10. Pinterest: Visuelles Interesse, Bevor Du Dich Anmeldest

Als eine Gemeinschaft zum Teilen von Bildern ist Pinterest eine sehr visuelle Plattform. Es ist keine Überraschung zu erfahren, dass die Anmeldeseite reine Augenweide ist.

Warum es funktioniert:

• Ein Design, Das Dich Einlädt: Die Hintergrundvorschau zeigt Pinterests charakteristisches Mauerwerk-Beitragslayout, was den Nutzern ein Gefühl der Vorfreude gibt.
• Eingebaute Bot- und Spam-Erkennung: Pinterest verwendet reCAPTCHA beim Anmelden, um das Erstellen von gefälschten Konten zu verhindern.
• Große Eingabefelder für bessere mobile Benutzbarkeit: Ein großer Teil der Community-Nutzer besucht von Telefonen und Tablets aus.

Implementierungshinweise:

• Während sich Gamer und Entwickler im Nachtmodus wie zu Hause fühlen, bevorzugen die meisten Nutzer etwas Helleres.
• Wenn Du das Wachstum fördern möchtest, erwäge, den „Registrieren“-Button genauso prominent wie den „Anmelden“-Button zu machen.

Wichtigste Erkenntnis: Respektiere die Datenschutzeinstellungen der Nutzer, während Du die Vorteile von Konten klar machst.

11. Medium: Direkt Zum Inhalt

Blogging-Plattform, Medium, hat zwei Arten von Nutzern: diejenigen, die lesen, und diejenigen, die schreiben. Beide Gruppen werden zur gleichen, reduzierten Anmeldeseite geleitet.

Warum es funktioniert:

• E-Mail-Login ist die letzte Möglichkeit: Medium drängt dazu, OAuth-Anbieter zu nutzen; ein traditionelles Login-Formular siehst Du nur, wenn Du die Anmeldung per E-Mail wählst.
• Minimale Unterbrechung des Leseflusses: Auf den meisten Seiten erscheint das Login-Formular als Fenster über dem Inhalt, den Du gerade ansiehst. 
• Ansprechende Ausweichoptionen: Das Frage-und-Antwort-Format leitet die Nutzer zur Lösung ihres Problems. Zum Beispiel: „E-Mail vergessen oder Probleme beim Anmelden? Hole Dir Hilfe.“

Implementierungshinweise:

• Verwende Modal-Overlays anstelle separater Anmeldeseiten. Dadurch können die Benutzer ihre Aktivitäten fortsetzen, ohne durch den Anmeldevorgang abgelenkt zu werden.
• Verfolge, wo Benutzer auf die Anmeldewand stoßen, um zu optimieren, wann Du nach einer Authentifizierung fragen solltest.

Wichtigste Erkenntnis: Das Einloggen sollte die Benutzerreise nicht unterbrechen.

Wenn Die E-Commerce-Konversion Entscheidend Ist

Für E-Commerce-Seiten kann selbst die geringste Reibung zu verlassenen Einkaufswagen und verlorenen Umsätzen führen. Und das schließt das Anmelden ein.

Hier sind einige Beispiele für Online-Shops, die Käufer glücklich machen.

12. Amazon: Brutale Optimierung

Du wirst keinen optimierteren Online-Shop als Amazon finden. Die Anmeldeseite ist da keine Ausnahme. Das Design ist gnadenlos einfach, sodass kaum Raum für Verwirrung bleibt.

Warum es funktioniert:

• Wähle E-Mail oder Telefonnummer: Nutzer können sich mit der ID anmelden, an die sie sich erinnern können.
• „Angemeldet bleiben“ ist standardmäßig aktiviert: Etwas kontrovers, aber das bedeutet, dass Kunden sich nicht jedes Mal neu anmelden müssen, wenn sie einkaufen.
• Sofortige Kontoerstellungsoption: Neue Benutzer können Konten erstellen, ohne den Prozess zu verlassen.

Umsetzungshinweise:

• Amazon setzt umfangreiche A/B-Tests ein, um Experimente in Schlüsselbereichen der Website durchzuführen — eine Gewohnheit, die kleinere Geschäfte übernehmen sollten.
• Sitzungstokens verwenden eine rollierende Ablaufzeit für solide Sicherheit ohne endlose Re-Authentifizierung.

Wichtigste Erkenntnis: Im E-Commerce kostet jeder Klick, der Reibung verursacht, Konversionen, also minimiere sie gnadenlos.

13. Nike: Tritt Dem Modeclub Bei

Nikes Anmeldeseite fühlt sich weniger wie Sicherheit und mehr wie der Eintritt in einen exklusiven Club an. Es gibt nur ein Feld, der Rest des Designs widmet sich dem weißen Raum und ikonischen Logos.

Warum es funktioniert:

• Starke Markenbilder: Der Swoosh und die Jordan-Silhouette sind klein in der Größe, aber stark in der visuellen Wirkung.
• Die Vorteile für Mitglieder werden betont: Die Botschaft „Schließe Dich uns an“ konzentriert sich auf Vorteile, nicht auf Verpflichtungen.
• Kombinierter Anmelde- und Registrierungsprozess: Es gibt hier nur einen Weg, und der beginnt mit der Eingabe deiner E-Mail. Von dort aus wirst Du dich entweder anmelden oder ein Konto erstellen.

Umsetzungshinweise:

• Diese Anmeldeseite wurde mit einer Mischung aus React, Emotion und core-js erstellt.
• Beachte den Standortauswähler; dadurch kann Nike die richtige Datenschutzrichtlinie für Besucher in jeder Region bereitstellen.

Wichtigster Punkt: Luxus- und Lifestyle-Marken sollten das Anmelden wie den Beitritt zu etwas Besonderem gestalten.

14. ASOS: Für Anmeldungen Gebaut

Das Kombinieren von Login- und Registrierungsprozessen ist eine gängige Taktik im E-Commerce. Der Trick besteht darin, wiederkehrende Kunden nicht zu verärgern. ASOS findet eine gute Balance, indem Kunden zur Erstellung eines Kontos ermutigt werden, ohne den Login-Prozess zu beeinträchtigen.

Warum es funktioniert:

• Vorteile-zuerst-Nachrichten: ASOS präsentiert den Nutzern mehrere Gründe, ein Konto zu erstellen, falls sie noch keines haben.
• Strategischer Einsatz von Farben: Die meisten Elemente der Anmeldeseite sind schwarz und weiß. Andere Farben sind für Schlüsselelemente reserviert, wie die OAuth-Buttons und das „KOSTENLOS“-Etikett. 
• Links ausgerichtetes Formular, um Aufmerksamkeit zu erregen: Forschungen zeigen, dass wir von oben links scannen, wenn eine Webseite lädt.

Implementierungsnotizen:

• Diese Seite verwendet Preact, eine kleine Alternative zu React, um eine sehr schnelle Leistung zu bieten.
• In diesem Beispiel werden die Vorteile der Anmeldung durch einfache Illustrationen und Beschriftungen kommuniziert — Du könntest aber auch Links zu weiteren Informationen hinzufügen.

Wichtigste Erkenntnis: Nutzer sind eher bereit, ein Konto zu erstellen, wenn Du die Vorteile direkt zu Beginn klar kommunizierst.

15. IKEA: Komplette Klarheit

Eine der besten Methoden, um Reibungen zu reduzieren, ist es, Erwartungen frühzeitig zu setzen. IKEA macht dies perfekt, indem die Nutzer von Anfang an darüber informiert werden, dass sie einen einmaligen Code per E-Mail erhalten werden.

Warum es funktioniert:

• Design, das Nutzer zur 2FA leitet: Obwohl IKEA die Anmeldung mit Passwort ermöglicht, leitet die visuelle Hierarchie der Seite dazu, einen Einmalcode zu verwenden.
• Klare, prägnante Texte: Nutzer erhalten eindeutige Anweisungen. Uns gefällt besonders dieser Satz: „Bitte gib Deine E-Mail-Adresse ein, um einen Einmalcode zu erhalten.“
• Getrenntes Branding für bessere Benutzbarkeit: Ein Formular in den Markenfarben von IKEA (kräftiges Blau und Gelb) zu gestalten, wäre eine Herausforderung, daher wählte das Designteam ein geteiltes Layout.

Implementierungshinweise:

• Diese Anmeldeseite wurde mit Java, React und styled-components erstellt.
• CAPTCHA ist nicht der einzige Weg, um die Bots zu besiegen; IKEA verwendet Cloudflare Turnstile als Alternative.

Wichtigste Erkenntnis: Du musst das Branding nicht in Dein Login-Formular einbinden.

Die 7 Gebote Exzellenter Login-Seiten

Wir haben gerade 15 Login-Seiten besichtigt, wie Juroren bei einem UX-Schönheitswettbewerb. Aber was haben wir wirklich gelernt?

Hier sind einige der wichtigsten Erkenntnisse:

1. Passwortfelder sind so 2010 (aber behalte sie trotzdem): Magische Links und Passkeys sind die Zukunft, aber Tante Martha möchte immer noch „Password123!“ eingeben und sich wie ein Hacker fühlen. Füge die ausgefallenen Sachen hinzu, aber biete immer einen Notausgang an.
2. Deine Anmeldeseite ist nicht deine persönliche Kunstgalerie: Spare die Three.js Partikeleffekte für dein Portfolio. Wenn Benutzer eine ausgefallene GPU benötigen, um dein Anmeldeformular zu rendern, hast du bereits verloren.
3. Social-Login-Buttons sind keine Pokémon — du brauchst sie nicht alle: Drei Optionen sind gut, fünfzehn Optionen schlecht. Prüfe, was deine Benutzer tatsächlich verwenden, und streiche dann gnadenlos den Rest. Das ist kein Buffet.

Guter Anfang, aber wir haben sieben Gebote versprochen. Hier sind also noch einige Prinzipien großartigen Login-Designs:

4. Drosselung … weil manche Leute keine Hinweise verstehen: Exponentielle Rücknahme mit einem sichtbaren Countdown-Timer. „Du kannst es in 14:59 erneut versuchen…“ Es ist Sicherheitstheater, das wirklich funktioniert.
5. Fehlermeldungen sollten tatsächlich hilfreich sein: „Ungültige Anmeldedaten“ ist nutzlos. Sei spezifisch, ohne Hackern zu helfen. Zum Beispiel, „E-Mail-Adresse nicht gefunden“ hilft Benutzern. Aber „Passwort falsch für john.doe@example.com“ hilft Angreifern.
6. Mobile Nutzer haben Daumen, keine chirurgischen Instrumente: Stelle sicher, dass Tipptargets mindestens 44×44 Pixel haben, verwende die richtigen Eingabetypen (type=“email“ ist dein Freund) und teste mit echten menschlichen Daumen.
7. Datenschutz ist keine Option mehr: Zeige Datenschutzlinks an und sei transparent über die Datenspeicherung. Oh, und der Schalter „Angemeldet bleiben“ sollte nicht bedeuten „Ernte meine Seele für zielgerichtete Werbung.“

Gib Deinen Nutzern Das Login, Das Sie Verdienen

Ob Du das nächste Facebook baust oder nur Kommentare auf Deinem Blog einrichtest, es lohnt sich, Deiner Anmeldeseite etwas Aufmerksamkeit zu schenken.

Deine Wahl des Designs, des Anmeldeablaufs und der Sicherheit kann wirklich beeinflussen, wie sich Nutzer über deine Seite fühlen. Es kann auch der Unterschied sein, ob Besucher deine Webseite frustriert verlassen oder für Jahre bleiben.

Arbeitest Du gerade an einer Website? Betrachte die Möglichkeit, sie bei DreamHost zu hosten. Wir haben über 400.000 zufriedene Kunden und transparente Preise, die für jedes Projekt geeignet sind.

Melde dich heute an, um dabei zu sein!