15 Beispiele für Anmeldeseite, die Benutzer im Stil begrüßen

Es gibt nichts im Fernsehen, also machen Sie ein kleines Web -Surfen auf Ihrem Telefon.

Ihr Finger landet in einem Lesezeichen, das Sie für eine Weile nicht mehr geöffnet haben. Wow, scheint einige aktuelle Upgrades vorgenommen zu haben!

Sie sind sich ziemlich sicher, dass Sie ein Konto auf dieser Website haben. Aber welche E -Mail war es? Was war das Passwort? Die Anmeldeseite bietet keine Hinweise, und anscheinend haben die Upgrades diese Seite verpasst. Es ist witzig.

Vielleicht gibt es einen Grund, warum Sie die Website aufgehört haben.

Für einen Site -Besitzer liest dies wie eine Horrorgeschichte. Wirklich, es ist eher eine warnende Geschichte. Sie müssen Ihr Anmeldeseitendesign nageln – oder sonst…

über Giphy

Fragen Sie sich, wo Sie anfangen sollen? In diesem Leitfaden bedienen wir die größten Beispiele für Anmeldeseitendesign, die der Menschheit bekannt sind – mit dem technischen Kontext, der Ihnen hilft, eine atemberaubende UX zu liefern.

Lass uns eintauchen!

Beispiele, wenn Ihre Kunden Vertrauenssignale benötigen

Ihre Anmeldeseite ist die Haustür Ihrer Website. Oder vielleicht die Zugbrücke zu Ihrem Schloss.

Es sollte echten Benutzern einen einfachen Zugang ermöglichen und verhindern, dass schlechte Akteure einbrechen.

Ihre Benutzer verstehen dies instinktiv. Und sie sind unbedingt sehen, dass Sie die Sicherheit ernst nehmen.

Die folgenden Beispiele bieten viel Sicherheit und machen sie gut geeignet für Websites, die auf Vertrauen beruhen: Finanzen, Gesundheitswesen und dergleichen.

1. Stripe: Clean Design mit Sicherheitsbeschilderung

Der Zahlungsprozessor -Stripe verfügt über eine einfache, aber effektive Anmeldeseite. Der Designstil ist minimal, aber es gibt viele Hinweise, die darauf hindeuten, dass sie einen sicheren Betrieb ausführen.

Was wir lieben:

• Mehrere, sichere Anmeldemethoden: Stripe serviert WebAuthn, Biometrie und SSO sofort. Das bedeutet, dass Benutzer problemlos die Methode auswählen können, der sie vertrauen.
• Zwei-Faktor-Authentifizierung im Rampenlicht: Dieser subtile Schubs unterhalb der Hauptformular ermutigt die Benutzer, ihr Konto zu schützen. Es hilft auch, auf der sicheren Stimmung aufzubauen.
• Einfaches, subtiles Branding: Die Nutzer von Stripe sind Geschäftsinhaber. Diese Anmeldeseite hält die Dinge einfach und bietet gleichzeitig genügend Branding, um den Benutzern zu versichern: „Ja, dies ist die richtige Seite.“

Implementierungshinweise:

• Stripe hat WebGL verwendet, um eine farbenfrohe, animierte Kulisse zu erstellen.
• Alle Aria-* -attribute sind ausgefüllt und entsprechen ihren Rollen. Dies ist eine großartige Bewegung für die Barrierefreiheit, da die Bildschirmleser im Formular navigieren können.

Schlüssel zum Mitnehmen: Es ist möglich, Vertrauen aufzubauen und die Reibung im gleichen Design zu verringern.

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

Sie müssen nicht Sherlock genannt werden, um die Datenschutzangaben auf MyChart zu finden. Die Anmeldeseite für diese Gesundheitsplattform hat einen beeindruckenden Sicherheits -Lebenslauf im benutzerdefinierten Branding.

Warum es funktioniert:

• Co-Branding mit dem spezifischen Gesundheitsdienstleister: Dies beruhigt Patienten, die am richtigen Ort sind.
• Sichtbarkeitswechsel im Feld Kennwort: Benutzer können überprüfen, ob sie die richtigen Charaktere eingeben, aber dennoch die Privatsphäre beibehalten.
• Unterstützung für mehrere Sprachen: Spanische Sprecher können schnell über einen Link im oberen Recht zu ihrer Muttersprache wechseln, und andere Sprachen werden über die Info-Taste versorgt.

Implementierungshinweise:

• Für die Gesundheitsversorgung hat die Zugänglichkeit oberste Priorität. Verwenden Sie klare Etiketten und starker Kontrast.
• MyChart bietet eine Option „Gastzahlung“, für die kein vollständiges Login erforderlich ist – ideal für einen reibungsloseren UX.

Schlüssel zum Mitnehmen: Einfaches, zugängliches Design ist immer besser als etwas Auffälliges.

3. Barclays Bank: Sicherheitstheater in gutem Grund

Einige Websites veranstalten eine Show, um Benutzer zu täuschen. Aber Barclays verwendet ein kleines Theater, um sichtbare Anzeichen für die zugrunde liegende Sicherheit zu bieten. Es ist eine Fünf-Sterne-Bewertung von uns.

Warum es funktioniert:

• Explizite Vertrauenssignale werden prominent angezeigt: Der „sichere“ Link im oberen Rechts ist beruhigt und verlinkt zu einer Seite über die Sicherheitsmaßnahmen von Barclays.
• Hilfreiche FAQs Auf der Anmeldeseite: Barclays bietet einige hilfreiche Tipps zur Fehlerbehebung, um in Panik zu beruhigen, die mit Login zu kämpfen haben.
• Offizielles, zurückhaltendes Branding: Das Design hier entspricht eines Anzugs und einer Krawatte: intelligent, vertrauenswürdig und professionell.

Implementierungshinweise:

• Für hochsichere Websites und Apps in Betracht, flexible Kennungen (z. B. Benutzername, E-Mail, Telefon) anzubieten.
• HSTs zwingt Browser, den sicheren zu benutzen https: // Version der Website.

Schlüssel zum Mitnehmen: Wenn Sie die Arbeit an der Sicherheit erledigen, ist es nichts auszusetzen, sie zur Schau zu stellen.

4. Bank of America: Vertrauen durch Transparenz

Eine gute Möglichkeit, das Vertrauen der Benutzer zu verdienen, besteht darin, wirklich ehrlich und offen zu sein. Das ist die Track Bank of America hat mit ihrer Anmeldeseite einen guten Effekt genommen.

Warum es funktioniert:

• Die FDIC -Versicherung wird prominent angezeigt: Die von der Regierung unterstützte Nachricht an der Spitze besagt sofort, dass diese Seite legitim ist.
• Mehrschichtige Supportoptionen: Zwei unterschiedliche Hilfsbereiche („Login-Hilfe“, „Nicht Online-Banking?“) Mit Untergrenzen erwarten unterschiedliche Benutzerbedürfnisse, ohne die Hauptform zu überfüllen.
• Mobile App -Promotion mit Kontext: Die Bank geht die Sicherheits- und Komfortvorteile durch und baut Vertrauen in den mobilen Kanal auf.

Implementierungshinweise:

• Beachten Sie, dass sich Benutzer über eine eindeutige ID -Nummer und nicht mit ihrer E -Mail anmelden. Diese zusätzliche Schutzschicht ist eine gute Idee für Finanzplattformen.
• In der Fußzeile zeigt die Opt-out in der „Ihre Datenschutzauswahl“ die Einhaltung der CCPA und den Respekt für Benutzerdatenrechte.

Schlüssel zum Mitnehmen: Sie können zahlreiche Optionen und Informationen zu Ihrer Anmeldeseite aufnehmen. Halten Sie einfach die Dinge geschnitten, um Unordnung zu vermeiden.

Wenn Einfachheit alles ist

Nicht jede Anmeldeseite muss sich über die Sicherheit rühmen.

Wenn jemand nur versucht, seine Lieblingslieder zu streamen oder eine digitale Note zu machen, sollten Geschwindigkeit und Benutzerfreundlichkeit die obersten Prioritäten haben.

Hier sind einige leistungsstarke Beispiele für Anmeldeseiten mit niedrigem Reihen:

5. Spotify: Den Benutzer dazu führen, die Anmeldung zu beschleunigen

Viele Anmeldeseiten priorisieren weiterhin die E -Mail -Adresse und die Kombination aus dem Passwort. Spotify setzt OAuth jedoch an die erste Stelle, mit der Benutzer sich mit Konten anmelden können, in die sie möglicherweise unterschrieben werden. Musikliebhaber, freuen Sie sich.

Warum es funktioniert:

• Sichere Anmeldemethoden mit niedrigem Friktion erhalten Priorität: OAuth ist für die meisten Benutzer sowohl sicher als auch bequemer. Spotify serviert daher zuerst diese Optionen.
• Branding, das die Benutzerfreundlichkeit verbessert: Spotify’s Luminous Green Brand Colors tragen dazu bei, die wichtigsten Funktionen hier hervorzuheben, einschließlich des hilfreichen Umschusses „Remember Me“.
• Fallbacks in einfacher Reichweite: Wenn Sie kein Konto haben oder sich nicht an Ihr Passwort erinnern können, ist das Mittel in Sicht.

Implementierungshinweise:

• Gebaut mit React, Core-Js und gestylerten Komponenten.
• Bestellen Sie Ihre Login -Optionen, um Ihre Publikumsnutzung zu entsprechen. Halten Sie das Layout konsistent, um dem Muskelgedächtnis des Benutzers zu helfen.

Schlüssel zum Mitnehmen: Die meisten Benutzer bevorzugen soziale Anmeldungen und sie werden allgemein als sicherer angesehen.

6. Begriff: Ein Feld, keine Reibung

An der Anmeldeseite des Begriffs ist nichts auffällig-und das passt perfekt zur ästhetischen Ästhetik dieser Notizen-Plattform. Die Hauptattraktion hier? Tolle Anmeldeflüsse.

Warum es funktioniert:

• Betonung auf Zero-Typing-Strömen: Benutzer haben eine Menge einfacher Anmeldeoptionen zur Auswahl, und jedes ist eindeutig mit einem Symbol ausgeschildert.
• Magic Link als native Pfad: Geben Sie Ihre E -Mail ein, erhalten Sie einen Link, klicken Sie auf, um sich anzumelden. Keine Kennwörter zum Bedenken oder eingeben.
• Progressive Offenlegung richtig gemacht: Die Schnittstelle zeigt nur, was Sie brauchen, wenn Sie sie brauchen. Passwortfelder werden nur angezeigt, wenn Sie diese Route auswählen.

Implementierungshinweise:

• Wenn Ihr Produkt auf Teams abzielt, ist die SSO -Integration (SAML, OKTA) unerlässlich.
• Verwenden Sie die Smart -Eingangserkennung, um die E -Mail -Formate automatisch zu validieren. Es kann einen ganzen Haufen typobedingter Frustration sparen.

Schlüssel zum Mitnehmen: Durch das Verstecken des Feldes Passwort können sicherere Anmeldemethoden fördern.

7. Slack: Schneller Zugriff auf alle Ihre Arbeitsbereiche

Obwohl Slack nur eine Messaging -Plattform ist, hat sie eine einzigartige Herausforderung für die Login: Viele Benutzer gehören zu mehreren Arbeitsbereichen. Um dieses Problem zu umgehen, hat Slack eine wirklich intelligente Anmeldeseite entwickelt.

Warum es funktioniert:

• E-Mail-First-Annäherung führt Sie zum Eingang: Geben Sie Ihre E -Mail ein und Slack findet alle Ihre Arbeitsbereiche. Keine Notwendigkeit, sich an Unternehmens -URLs zu erinnern.
• Löschen Sie den Arbeitsbereich Switcher: Schon irgendwo signiert? Mit dem Arbeitsbereich können Sie mit einem Klick zwischen Teams springen.
• Ein bequemerer Standard: Die Google-Anmeldeoption erhält hier eine Schlagzeilenabrechnung, da viele Arbeitsplatzkonten Google Workspace verwenden.

Implementierungshinweise:

• Wenn Ihre App mehrere Konten oder Organisationen unterstützt, erstellen Sie schnelle Funktionen.
• Magic Link Anmeldung Da der Standardwert bedeutet, dass Benutzer ihre Passwörter nicht für mehrere Arbeitsbereiche speichern oder sich merken müssen.

Schlüssel zum Mitnehmen: Sie können mehrere Konten auf derselben Plattform zulassen, ohne dass Ihre Benutzer Kopfschmerzen bei der Anmeldung verursachen.

8. Shopify: Für Händler gemacht

Während Shopify ein anderes Publikum richtet, ist es immer noch ein Veranstaltungsort für die Arbeit. Auf der Anmeldeseite für diese E-Commerce-Plattform können Händler ihren Job fortsetzen, ohne zuerst ein Puzzle zu lösen.

Warum es funktioniert:

• Attraktives, fokussiertes Design: Der Gradientenhintergrund fügt visuelles Interesse hinzu, während sich die weiße Karte auf die Anmeldeaktionen konzentriert.
• PassKey -Authentifizierung prominent platziert: Die Option „Anmeldung mit PassKey“ zeigt, dass Shopify Best Practices in der Sicherheit umfasst.
• Soziales Login für Bequemlichkeit: Apple, Facebook und Google-Optionen sorgen für verschiedene Benutzereinstellungen und bieten einen schnellen Ein-Klick-Zugriff.

Implementierungshinweise:

• Shopify ist ein berühmtes Beispiel für eine Plattform, die mit Ruby on Rails gebaut wurde.
• Fügen Sie Ihrer eigenen Anmeldung über die WebAuthn -API eine PassKey -Option hinzu.

Schlüssel zum Mitnehmen: B2B-Anmeldeseiten sollten für den wiederholten täglichen Gebrauch und nicht für einmalige Konvertierungen optimiert werden.

Wenn die Gemeinschaft wichtig ist

Community -Plattformen müssen ein heikles Gleichgewicht erreichen. Sie möchten, dass sich Ihr Netzwerk sicher anfühlt, aber Sie möchten keinen Türsteher an der Tür, der die Stammgäste terrorisiert.

Diese Beispiele zeigen, wie möglich ist, mit Ihrem Anmeldebildschirm stark zu sein.

9. Discord: Gaming-inspiriertes Login

Das Login von Discord ist weniger wie ein Sicherheitskontrollpunkt als vielmehr wie der Beitritt zu einer Online -Multiplayer -Lobby. Dies ist teilweise darauf zurückzuführen, dass viele Benutzer Spieler sind, aber die Stimmung funktioniert gut für andere Commu Nits auch.

Warum funktioniert es:

• Ein freundlicher Empfang: Nicht eins, sondern zwei Grüße, die mit Ausrufezeichen enden. Zwietracht ist gepumpt Um zurückkehrende Benutzer zu sehen.
• QR -Code Melden Sie sich für mobile Benutzer an: Benutzer können mit ihrem Telefon scannen, wenn sie bereits dort angemeldet sind. Brillant für Benutzer, die zwischen Geräten wechseln.
• Benutzername-First-Ansatz: Im Gegensatz zu E-Mail-zentrierten Plattformen weiß Discord, dass seine Benutzer sich anhand ihrer Handles identifizieren.

Implementierungshinweise:

• Um QR-Anmeldungen anzubieten, geben Sie ein kurzlebiges Anmelde-Token auf dem Server aus, codieren Sie es in einem QR-Code und achten Sie auf die Erlösung über WebSocket.
• Ein subtiler Markenhintergrund kann Ihre Seite lebendig fühlen, ohne vom Anmeldeblassung abzulenken.

Schlüssel zum Mitnehmen: Ihre Anmeldeseite sollte die Persönlichkeit Ihrer Community widerspiegeln.

10. Pinterest: Visuelles Interesse bevor Sie sich anmelden

Als Community zum Teilen von Bildern ist Pinterest eine sehr visuelle Plattform. Es ist keine Überraschung zu erfahren, dass die Anmeldeseite eine reine Eye-Candy ist.

Warum es funktioniert:

• Ein Design, das Sie einlädt in: Der Hintergrund sieht Pinterests charakteristisches Mauerwerk nach dem Layout vor und vermittelt den Benutzern ein Gefühl der Vorfreude.
• Eingebaute Bot- und Spam-Erkennung: Pinterest verwendet Recaptcha bei Login, um zu verhindern, dass Personen gefälschte Konten erstellen.
• Große Eingabefelder für eine bessere mobile Benutzerfreundlichkeit: Ein großer Teil der Community -Nutzer besucht von Telefonen und Tablets.

Implementierungshinweise:

• Während sich Spieler und Entwickler im Nachtmodus wie zu Hause fühlen, bevorzugen die meisten Benutzer etwas Helleres.
• Wenn Sie versuchen, das Wachstum zu fördern, sollten Sie die „Anmeldung“ so prominent wie „Anmeldung“ machen.

Schlüssel zum Mitnehmen: Respektieren Sie die Datenschutzpräferenzen der Benutzer und machen Sie die Vorteile von Konten klar.

11. Medium: direkt zum Inhalt

Die Blogging -Plattform, Medium, hat zwei Arten von Benutzern: diejenigen, die lesen und diejenigen, die schreiben. Beide Gruppen sind auf die gleiche, abgestreifte Anmeldeseite gerichtet.

Warum es funktioniert:

• E -Mail -Login ist der letzte Ausweg: Medium drängt Sie zu OAuth -Anbietern; Wenn Sie eine E-Mail-Anmeldung auswählen, sehen Sie nur ein herkömmliches Anmeldeformular.
• Minimale Unterbrechung des Leseflusss: Auf den meisten Seiten wird das Anmeldeformular als Fenster über dem Inhalt angezeigt, den Sie anzeigen.
• Eingängige Fallback -Optionen: Die Frage- und Antwortformat führt die Benutzer zur Lösung ihres Problems. Zum Beispiel: “Vergessen Sie E -Mail oder Probleme beim Anmelden? Holen Sie sich Hilfe.”

Implementierungshinweise:

• Erwägen Sie, modale Overlays zu verwenden, anstatt separate Anmeldeseiten. Auf diese Weise können Benutzer ihre Reise fortsetzen, ohne sich vom Anmeldebluss abzulenken.
• Verfolgen Sie, wo die Benutzer die Anmeldemwand treffen, um zu optimieren, wenn Sie eine Authentifizierung anfordern sollten.

Schlüssel zum Mitnehmen: Login sollte die Benutzerreise nicht umleiten.

Wenn die E-Commerce-Konvertierung der Schlüssel ist

Für E-Commerce-Standorte kann selbst die geringste Reibung zu verlassenen Karren und verlorenen Einnahmen führen. Und das schließt sich an.

Hier sind einige Beispiele für Online -Shops, die Käufer zufrieden halten.

12. Amazon: brutale Optimierung

Sie werden keinen optimierteren Online -Shop finden als Amazon. Die Anmeldeseite ist keine Ausnahme. Das Design ist rücksichtslos einfach und lässt wenig Platz für Verwirrung.

Warum es funktioniert:

• Wählen Sie E -Mail- oder Telefonnummer: Benutzer können sich mit der ID anmelden, an die sie sich erinnern können.
• “Keep Me Signed in” wird standardmäßig überprüft: Ein wenig kontrovers, aber das bedeutet, dass Kunden nicht jedes Mal, wenn sie einkaufen, weiter unterschreiben müssen.
• Sofortige Option zur Erstellung von Kontoerstellung: Neue Benutzer können Konten erstellen, ohne den Fluss zu verlassen.

Implementierungshinweise:

• Amazon verwendet umfangreiche A/B -Tests, um Experimente in Schlüsselbereichen des Standorts durchzuführen – eine Gewohnheit, die kleinere Geschäfte kopieren sollten.
• Sitzungstoken verwenden den rollenden Ablauf für feste Sicherheit ohne endlose Neuauthentifizierung.

Schlüssel zum Mitnehmen: Im E-Commerce, jeder Klick, der die Reibungskostenkonvertierungen hinzufügt, minimieren Sie sie daher rücksichtslos.

13. Nike: Treten Sie dem Fashion Club bei

Die Anmeldeseite von Nike fühlt sich weniger wie Sicherheit und eher wie in einem exklusiven Club an. Es gibt nur ein Feld, wobei der Rest des Designs dem Weißraum und legendären Logos gewidmet ist.

Warum es funktioniert:

• Starke Markenbilder: Die Swoosh und die Jordan Silhouette sind klein, aber fett in visueller Wirkung.
• Mitgliederleistungen betonten: Messaging “Mach” -Messaging konzentriert sich auf Vergünstigungen und nicht auf Verpflichtungen.
• Kombinierter Anmelde- und Anmeldefluss: Hier gibt es nur einen Track, und es beginnt damit, Ihre E -Mail einzulegen. Von dort aus melden Sie sich entweder an oder erstellen ein Konto.

Implementierungshinweise:

• Diese Anmeldeseite wurde unter Verwendung einer Mischung aus React, Emotion und Core-Js erstellt.
• Beachten Sie den Standort -Picker; Auf diese Weise kann Nike die richtigen Datenschutzrichtlinien für Besucher in jeder Region verbüßen.

Schlüssel zum Mitnehmen: Luxus- und Lifestyle -Marken sollten das Anmeldung dazu bringen, etwas Besonderes anzuschließen.

14. ASOS: Für Anmeldungen gebaut

Die Kombination von Anmeldungs- und Anmeldeströmen ist eine gemeinsame Taktik im E-Commerce. Der Trick besteht darin, ärgerliche zurückkehrende Kunden zu vermeiden. ASOS schlägt ein gutes Gleichgewicht ein und ermutigt die Kunden, ein Konto zu erstellen, ohne den Anmeldebluss zu ruinieren.

Warum es funktioniert:

• Vorteile zuerst Messaging: ASOS trifft Benutzer mit mehreren Gründen, um ein Konto zu erstellen, wenn sie dies noch nicht getan haben.
• Strategischer Gebrauch von Farbe: Die meisten Elemente der Anmeldeseite sind schwarz und weiß. Andere Farben sind für Schlüsselelemente wie die OAuth -Tasten und das „kostenlose“ Etikett reserviert.
• Links ausgerichtete Form, um das Auge zu fangen: Untersuchungen zeigen, dass wir beim Laden einer Webseite vom oberen links scannen.

Implementierungshinweise:

• Diese Seite verwendet Preact, eine winzige Alternative zum Reagieren, um eine sehr bissige Leistung zu liefern.
• In diesem Beispiel werden die Vorteile der Anmeldung durch einfache Illustrationen und Beschriftungen kommuniziert – aber Sie können Links zu weiteren Informationen hinzufügen.

Schlüssel zum Mitnehmen: Benutzer erstellen eher ein Konto, wenn Sie die Vorteile im Voraus verkaufen.

15. IKEA: Vollständige Klarheit

Eine der besten Möglichkeiten, um die Reibung zu verringern, besteht darin, die Erwartungen frühzeitig festzulegen. IKEA macht dies perfekt und informiert die Benutzer von Anfang an, dass sie einen einmaligen Code per E-Mail erhalten.

Warum es funktioniert:

• Entwerfen Sie, dass die Benutzer von Nutzern auf 2FA geleitet werden: Während IKEA Sie es Ihnen ermöglichen, sich mit Ihrem Passwort anzumelden, führt Sie die visuelle Hierarchie der Seite zur Verwendung eines einmaligen Codes.
• Klare, prägnante Kopie: Benutzer erhalten klare Anweisungen. Besonders gefallen uns: „Bitte geben Sie Ihre E-Mail ein, um einen einmaligen Code zu erhalten.“
• Getrenntes Branding für eine bessere Benutzerfreundlichkeit: Es wäre eine Herausforderung, eine Form mit IKEA -Markenfarben (fett blau und gelb) zu erstellen. Das Designteam wählte also ein Split -Layout.

Implementierungshinweise:

• Diese Anmeldeseite wurde mit Java, React und Styled-Komponenten hergestellt.
• Captcha ist nicht der einzige Weg, um die Bots zu schlagen. IKEA verwendet Cloudflare Drehs als Alternative.

Schlüssel zum Mitnehmen: Sie müssen das Branding nicht in Ihr Anmeldeformular zwingen.

Die 7 Gebote der Anmeldeseite Exzellenz

Wir haben gerade 15 Login -Seiten auf Tour gemacht, wie Richter für einen UX -Schönheitswettbewerb. Aber was haben wir wirklich gelernt?

Hier sind einige der wichtigsten Imbissbuden:

1. Passwortfelder sind so 2010 (aber behalten Sie sie trotzdem auf): Magic Links und Passkeys sind die Zukunft, aber Tante Martha möchte immer noch “Passwort123!” Und fühle mich wie ein Hacker. Schichten Sie auf das ausgefallene Zeug, aber liefern Sie immer diese Fluchtschlüsselung.
2. Ihre Anmeldeseite ist nicht Ihre persönliche Kunstgalerie: Speichern Sie die drei.js -Partikeleffekte für Ihr Portfolio. Wenn Benutzer eine ausgefallene GPU benötigen, um Ihr Anmeldebildformular zu rendern, haben Sie bereits verloren.
3. Social Login -Schaltflächen sind kein Pokémon – Sie nicht brauche sie alle: Drei Optionen Gute, fünfzehn Optionen schlecht. Messen Sie, was Ihre Benutzer tatsächlich verwenden, und keuchten Sie den Rest rücksichtslos. Dies ist kein Buffet.

Guter Start, aber wir haben sieben Gebote versprochen. Hier sind einige weitere Prinzipien von großartigem Anmeldungsdesign:

4. Ratenbeschränkung… weil manche Leute keinen Hinweis aufnehmen können: Exponential Backoff mit einem sichtbaren Countdown -Timer. “Sie können es in 14: 59 noch einmal versuchen …” Es ist das Sicherheitstheater, das tatsächlich funktioniert.
5. Fehlermeldungen sollten tatsächlich helfen: “Ungültige Anmeldeinformationen” sind nutzlos. Sei spezifisch, ohne Hackern zu helfen. Beispielsweise hilft „E -Mail nicht gefunden“ Benutzern. “Passwort für John.doe@example.com” ist jedoch Angreifer unterstützt.
6. Mobile Benutzer haben Daumen, keine chirurgischen Instrumente: Machen Sie mindestens 44 × 44 Pixel Tap -Ziele, verwenden Sie die richtigen Eingabetypen (Typ = “E -Mail” ist Ihr Freund) und testen Sie mit tatsächlichen menschlichen Daumen.
7. Privatsphäre ist nicht mehr optional: Zeigen Sie Datenschutzverbindungen an und transparent über die Datenspeicherung. Oh, und dieser „Erinnerung an mich“ sollte es nicht bedeuten, „meine Seele für gezielte Werbung zu ernten“.

Geben Sie Ihren Benutzern die Anmeldung, die sie verdienen,

Unabhängig davon, ob Sie das nächste Facebook erstellen oder nur Kommentare in Ihrem Blog einrichten, lohnt es sich, Ihrer Anmeldeseite etwas Aufmerksamkeit zu schenken.

Ihre Auswahl an Design, Anmeldefluss und Sicherheit kann sich wirklich darauf auswirken, wie Benutzer sich über Ihre Website fühlen. Es kann auch den Unterschied zwischen den Besuchern sein, die Ihre Website wächst oder in den kommenden Jahren dabei bleiben.

Im Moment an einer Website arbeiten? Betrachten Sie es mit DreamHost. Wir haben über 400.000 zufriedene Kunden und transparente Preise, die für jedes Projekt funktionieren.

Melden Sie sich noch heute an, um sich der Party anzuschließen!

Pro -Services – Webdesign

DreamHost macht Webdesign einfach

Unsere Designer können eine wunderschöne Website von Grund auf neu erstellen, um perfekt zu Ihrer Marke und Vision passt – alle mit WordPress codiert, damit Sie Ihre Inhalte in Zukunft verwalten können.

Erfahren Sie mehr