15 Przykładów Stron Logowania, Które Witają Użytkowników w Stylu

Opublikowano: przez Jennifer Le
15 Przykładów Stron Logowania, Które Witają Użytkowników w Stylu thumbnail

Nie ma nic w telewizji, więc przeglądasz internet na swoim telefonie.

Twój palec ląduje na zakładce, której nie otwierałeś od jakiegoś czasu. Wow, wygląda na to, że wprowadzili ostatnio kilka ulepszeń!

Jesteś prawie pewien, że masz konto na tej stronie. Ale na jaki e-mail? Jakie było hasło? Strona logowania nie daje wskazówek, a najwyraźniej aktualizacje ominęły tę stronę. Jest brzydka jak noc.

Może jest powód, dla którego przestałeś odwiedzać tę stronę.

Dla właściciela strony to brzmi jak horror. Naprawdę, to bardziej przestroga. Musisz dopracować projekt swojej strony logowania — a jeśli nie…

przez GIPHY

Zastanawiasz się, od czego zacząć? W tym przewodniku serwujemy najlepsze przykłady projektowania strony logowania znane ludzkości — z technicznym kontekstem, który pomoże ci dostarczyć zachwycające UX.

Zanurzmy się!

Przykłady, Kiedy Twoi Klienci Potrzebują Sygnałów Zaufania

Twoja strona logowania to drzwi frontowe Twojej witryny. Albo może most zwodzony do Twojego zamku.

Powinien zapewniać łatwy dostęp dla prawdziwych użytkowników i uniemożliwić złym aktorom włamanie.

Twoi użytkownicy rozumieją to instynktownie. I są chętni zobaczyć, że poważnie podchodzisz do bezpieczeństwa.

Poniższe przykłady dostarczają dużej ilości pewności, co czyni je odpowiednimi dla stron, które opierają się na zaufaniu: finanse, opieka zdrowotna i tym podobne.

1. Stripe: Czysty Design z Znakowaniem Bezpieczeństwa

Procesor płatności Stripe ma prostą, ale skuteczną stronę logowania. Styl projektowania jest minimalistyczny, ale jest wiele wskazówek sugerujących, że prowadzą bezpieczną działalność.

Ekran logowania Stripe z polami na e-mail i hasło, oraz opcje logowania przez Google, klucz dostępu lub SSO.

Co lubimy:

  • Różne, bezpieczne metody logowania: Stripe oferuje od razu WebAuthn, biometrię i SSO. Oznacza to, że użytkownicy mogą łatwo wybrać metodę, której ufają.
  • Uwaga na uwierzytelnianie dwuskładnikowe: Subtelna zachęta poniżej głównego formularza skłania użytkowników do zabezpieczenia swojego konta. Pomaga to również budować atmosferę bezpieczeństwa.
  • Proste, subtelne brandowanie: Użytkownikami Stripe są zabiegani właściciele firm. Ta strona logowania jest prosta, ale zapewnia wystarczająco dużo elementów brandu, aby użytkownicy byli pewni, że „Tak, to jest właściwa strona”.

Notatki implementacyjne:

  • Stripe użył WebGL do stworzenia kolorowego, animowanego tła. 
  • Wszystkie atrybuty aria-* są wypełnione i odpowiadają ich rolom. Jest to świetny krok dla dostępności, ponieważ umożliwia czytnikom ekranowym nawigację po formularzu.

Kluczowa informacja: Można budować zaufanie i zmniejszać tarcie w tej samej konstrukcji.

2. MyChart: Prywatność z Marką dla Opieki Zdrowotnej

Nie musisz nazywać się Sherlock, aby znaleźć dane dotyczące prywatności na MyChart. Strona logowania tej platformy opieki zdrowotnej zawiera imponujące CV dotyczące bezpieczeństwa w niestandardowej oprawie graficznej.

Ekran logowania MyUnityPoint z opcjami wysyłania wiadomości do lekarzy, przeglądania wyników badań, zamawiania uzupełnień i zarządzania wizytami.

Dlaczego to działa:

  • Współbranding z konkretnym dostawcą opieki zdrowotnej: To zapewnia pacjentom, że są we właściwym miejscu.
  • Przełącznik widoczności w polu hasła: Użytkownicy mogą sprawdzić, czy wpisują właściwe znaki, ale nadal zachowują prywatność.
  • Wsparcie dla wielu języków: Hiszpanojęzyczni użytkownicy mogą szybko przełączyć się na swój ojczysty język za pomocą linku w prawym górnym rogu, a inne języki są obsługiwane za pośrednictwem przycisku informacyjnego.

Notatki implementacyjne:

  • Dla służby zdrowia dostępność jest najwyższym priorytetem. Używaj wyraźnych etykiet i mocnego kontrastu.
  • MyChart oferuje opcję „Guest pay”, która nie wymaga pełnego logowania — świetne dla płynniejszego UX.

Kluczowa informacja: Prosty, dostępny projekt jest zawsze lepszy niż coś ekstrawaganckiego.

3. Barclays Bank: Teatralne Zabezpieczenia w Służbie Dobrej Sprawy

Niektóre strony wystawiają spektakl, aby oszukać użytkowników. Jednak Barclays używa niewielkiego teatru, aby dostarczyć widoczne znaki leżącego w podłożu bezpieczeństwa. To pięciogwiazdkowa recenzja od nas.

Ekran logowania do bankowości internetowej Barclays z opcjami logowania za pomocą numeru członkowskiego, numeru karty lub kodu sortowania i numeru konta.

Dlaczego to działa:

  • Jasne sygnały zaufania są wyraźnie wyświetlane: Link „Bezpieczny” w prawym górnym rogu daje poczucie pewności i prowadzi do strony o środkach bezpieczeństwa Barclays.
  • Pomocne Najczęstsze Pytania na stronie logowania: Aby uspokoić zaniepokojonych użytkowników, którzy mają problemy z logowaniem, Barclays oferuje przydatne porady dotyczące rozwiązywania problemów.
  • Oficjalne, stonowane brandowanie: Projekt tutaj jest równoważny garniturowi i krawatowi: elegancki, godny zaufania i profesjonalny.

Notatki implementacyjne:

  • Dla stron i aplikacji o wysokim poziomie bezpieczeństwa, rozważ oferowanie elastycznych identyfikatorów (np. nazwa użytkownika, e-mail, telefon).
  • HSTS wymusza na przeglądarkach korzystanie z bezpiecznej wersji strony https://.

Kluczowa uwaga: Jeśli pracujesz nad zabezpieczeniami, nie ma nic złego w tym, aby się nimi chwalić.

4. Bank of America: Zaufanie Poprzez Transparentność

Dobrym sposobem na zdobycie zaufania użytkowników jest bycie naprawdę uczciwym i otwartym. To podejście przyjęła strona logowania Bank of America, co przyniosło dobre efekty.

Strona logowania do bankowości internetowej Bank of America z polami na identyfikator użytkownika i hasło, oraz linkami do pomocy i pobrania aplikacji.

Dlaczego to działa:

  • Ubezpieczenie FDIC jest wyraźnie wyświetlane: Rządowe przesłanie na górze strony od razu informuje, że ta strona jest legalna.
  • Wielopoziomowe opcje wsparcia: Dwa odrębne działy pomocy („Pomoc przy logowaniu”, „Nie korzystasz z bankowości internetowej?”) z podpytaniami przewidują różne potrzeby użytkowników, nie zaśmiecając głównego formularza.
  • Promocja aplikacji mobilnej z kontekstem: Bank przedstawia zalety związane z bezpieczeństwem i wygodą, budując zaufanie do kanału mobilnego.

Notatki do implementacji:

  • Zauważ, że użytkownicy logują się za pomocą unikalnego numeru ID, a nie swojego e-maila. Ta dodatkowa warstwa ochrony to dobry pomysł dla platform finansowych.
  • W stopce, opcja „Twoje wybory dotyczące prywatności” umożliwia rezygnację, co świadczy o przestrzeganiu zgodności z CCPA i szacunku dla praw użytkowników do danych.

Kluczowa informacja: Możesz umieścić wiele opcji i informacji na swojej stronie logowania — po prostu zachowaj podział, aby uniknąć bałaganu.

Otrzymuj treści bezpośrednio do swojej skrzynki odbiorczej

Zapisz się teraz, aby otrzymywać wszystkie najnowsze aktualizacje bezpośrednio do swojej skrzynki odbiorczej.

Kiedy Prostota To Wszystko

Nie każda strona logowania musi chwalić się bezpieczeństwem.

Jeśli ktoś chce tylko słuchać swoich ulubionych piosenek lub zrobić cyfrową notatkę, priorytetem powinny być szybkość i łatwość użytkowania.

Oto kilka potężnych przykładów stron logowania o niskim poziomie oporu:

5. Spotify: Przewodnik Dla Użytkownika Jak Przyspieszyć Logowanie

Wiele stron logowania nadal stawia na pierwszym miejscu kombinację adresu e-mail i hasła. Jednak Spotify stawia na pierwszym miejscu OAuth, umożliwiając użytkownikom logowanie się za pomocą kont, na których mogą być zalogowani. Miłośnicy muzyki, radujcie się.

Strona logowania Spotify z opcjami kontynuacji za pomocą Google, Facebook, Apple lub wprowadzenia adresu e-mail lub nazwy użytkownika.

Dlaczego to działa:

  • Bezpieczne metody logowania z niskim poziomem tarcia mają priorytet: OAuth jest zarówno bezpieczniejszy, jak i wygodniejszy dla większości użytkowników, dlatego Spotify prezentuje te opcje na pierwszym miejscu. 
  • Branding, który poprawia użyteczność: Świecące zielone kolory marki Spotify pomagają podkreślić najważniejsze funkcje, w tym pomocny przełącznik „Zapamiętaj mnie”.
  • Zapasowe rozwiązania w zasięgu ręki: Jeśli nie masz konta lub nie pamiętasz hasła, rozwiązanie jest na wyciągnięcie ręki.

Notatki do wdrożenia:

  • Zbudowany z użyciem React, core-js, i styled-components. 
  • Dopasuj opcje logowania do sposobu korzystania przez twoją publiczność. Zachowaj spójność układu, aby wspomagać pamięć mięśniową użytkownika.

Kluczowa informacja: Większość użytkowników preferuje logowanie społecznościowe, które jest ogólnie uważane za bardziej bezpieczne.

6. Notion: Jedno Pole, Zero Problemów

Nie ma nic efektownego na stronie logowania Notion — i doskonale pasuje to do minimalistycznego wyglądu tej platformy do robienia notatek. Główną atrakcją tutaj? Świetne przepływy logowania.

Strona logowania Notion z opcjami kontynuacji za pomocą Google, Apple, Microsoft, passkey, SSO lub wprowadzenia adresu e-mail.

Dlaczego to działa:

  • Nacisk Na Procesy Bez Wprowadzania Tekstu: Użytkownicy mają do wyboru masę łatwych opcji logowania, a każda z nich jest wyraźnie oznaczona ikoną.
  • Magiczny Link Jako Domyślna Ścieżka: Wprowadź swój e-mail, otrzymaj link, kliknij, aby się zalogować. Nie musisz pamiętać ani wpisywać haseł.
  • Postępujące Ujawnianie Zrobione Poprawnie: Interfejs pokazuje tylko to, czego potrzebujesz, kiedy tego potrzebujesz. Pola hasła pojawiają się tylko, jeśli wybierzesz tę opcję.

Notatki do implementacji:

  • Jeśli twój produkt jest przeznaczony dla zespołów, integracja SSO (SAML, Okta) jest niezbędna.
  • Użyj inteligentnej detekcji wprowadzanych danych, aby automatycznie weryfikować formaty e-mail. Może to zaoszczędzić mnóstwo frustracji związanych z błędami w pisowni.

Kluczowa informacja: Ukrycie pola hasła może zachęcić do korzystania z bezpieczniejszych metod logowania.

7. Slack: Szybki Dostęp Do Wszystkich Twoich Przestrzeni Roboczych

Chociaż Slack to tylko platforma do wysyłania wiadomości, ma on wyjątkowe wyzwanie związane z logowaniem: wielu użytkowników należy do wielu przestrzeni roboczych. Aby poradzić sobie z tym problemem, Slack opracował naprawdę inteligentną stronę logowania.

Strona logowania Slack zachęcająca użytkownika do wpisania adresu e-mail lub kontynuowania z Google lub Apple, aby się zalogować lub utworzyć przestrzeń roboczą.

Dlaczego to działa:

  • Podejście oparte na e-mailach prowadzi Cię do wejścia: Wpisz swój e-mail, a Slack znajdzie wszystkie Twoje przestrzenie robocze; nie ma potrzeby pamiętania adresów URL firm.
  • Jasny przełącznik przestrzeni roboczych: Jesteś już zalogowany gdzieś? Siatka przestrzeni roboczych pozwala przeskakiwać między zespołami jednym kliknięciem.
  • Bardziej wygodna opcja domyślna: Opcja logowania przez Google jest tutaj na pierwszym planie, ponieważ wiele kont firmowych korzysta z Google Workspace.

Notatki Implementacyjne:

  • Jeśli twoja aplikacja obsługuje wiele kont lub organizacji, zbuduj funkcję szybkiego przełączania.
  • Logowanie za pomocą magicznego linku jako domyślna metoda oznacza, że użytkownicy nie muszą zapamiętywać ani przechowywać swoich haseł do wielu przestrzeni roboczych.

Kluczowa informacja: Możesz zezwolić na wiele kont na tej samej platformie, nie powodując bólu głowy użytkowników podczas logowania.

8. Shopify: Stworzony dla Handlowców

Chociaż Shopify obsługuje inną grupę odbiorców, nadal jest miejscem pracy. Strona logowania tej platformy e-commerce pozwala sprzedawcom zająć się swoją pracą bez konieczności rozwiązywania zagadki na początku.

Strona logowania Shopify z opcjami kontynuacji za pomocą e-mail, klucza dostępu, Apple, Facebook lub Google.

Dlaczego to działa:

  • Atrakcyjny, skoncentrowany projekt: Gradientowe tło dodaje wizualnego zainteresowania, podczas gdy biała karta koncentruje uwagę na czynnościach logowania.
  • Uwypuklone uwierzytelnianie kluczem: Opcja „Zaloguj się kluczem” pokazuje, że Shopify stosuje najlepsze praktyki w zakresie bezpieczeństwa.
  • Logowanie społecznościowe dla wygody: Opcje Apple, Facebook i Google odpowiadają różnym preferencjom użytkowników i zapewniają szybki dostęp jednym kliknięciem.

Notatki do wdrożenia:

  • Shopify to znany przykład platformy zbudowanej na Ruby on Rails.
  • Dodaj opcję klucza dostępu do swojego logowania za pomocą API WebAuthn.

Kluczowa informacja: Strony logowania B2B powinny być zoptymalizowane pod kątem codziennego, powtarzalnego użytkowania, a nie jednorazowych konwersji.

Kiedy Liczy Się Społeczność

Platformy społecznościowe muszą znaleźć delikatną równowagę. Chcesz, aby twoja sieć była bezpieczna, ale nie chcesz ochroniarza na drzwiach, który terroryzuje stałych bywalców.

Te przykłady pokazują, jak można być silnym, a jednocześnie gościnnym na ekranie logowania.

9. Discord: Logowanie zainspirowane grami

Discord sprawia, że logowanie wydaje się mniej jak punkt kontrolny bezpieczeństwa, a bardziej jak dołączanie do lobby gier online. Częściowo wynika to z faktu, że wielu użytkowników to gracze, ale ten klimat dobrze sprawdza się także dla innych społeczności.

Strona logowania Discord z polami na e-mail lub numer telefonu, hasło oraz opcją logowania za pomocą kodu QR.

Dlaczego to działa:

  • Serdeczne powitanie: Nie jedno, ale dwa przywitania kończące się wykrzyknikami. Discord jest podniecony, widząc użytkowników wracających.
  • Login za pomocą kodu QR dla użytkowników mobilnych: Użytkownicy mogą skanować kod swoim telefonem, jeśli są już zalogowani; świetne rozwiązanie dla użytkowników przełączających się między urządzeniami.
  • Podejście oparte na nazwie użytkownika: W przeciwieństwie do platform skoncentrowanych na e-mailu, Discord zna swoich użytkowników po ich pseudonimach. 

Notatki implementacyjne:

  • Aby zaoferować logowanie za pomocą kodów QR, wydaj krótkotrwały token logowania na serwerze, zakoduj go w kodzie QR i obserwuj jego wykorzystanie za pomocą WebSocket.
  • Dyskretnie brandowane tło może sprawić, że twoja strona będzie wyglądać na bardziej żywą, nie odwracając uwagi od procesu logowania.

Podstawowa informacja: Twoja strona logowania powinna odzwierciedlać osobowość Twojej społeczności.

10. Pinterest: Wizualne Zainteresowanie Przed Zalogowaniem

Jako społeczność do dzielenia się obrazami, Pinterest jest bardzo wizualną platformą. Nie dziwi więc, że strona logowania jest czystą ucztą dla oczu.

Strona logowania Pinterest z opcjami logowania za pomocą e-maila, Facebooka, Google, Apple lub kodu QR.

Dlaczego to działa:

  • Projekt, który zaprasza: Tło prezentuje charakterystyczny układ postów Pinteresta, budząc oczekiwania użytkowników.
  • Wbudowana wykrywania botów i spamu: Pinterest używa reCAPTCHA przy logowaniu, aby zapobiegać tworzeniu fałszywych kont.
  • Duże pola wprowadzania dla lepszej użyteczności mobilnej: Duża część społeczności odwiedza stronę z telefonów i tabletów.

Notatki implementacyjne:

  • Podczas gdy gracze i programiści czują się jak w domu w trybie nocnym, większość użytkowników woli coś jaśniejszego.
  • Jeśli chcesz zachęcić do wzrostu, rozważ uczynienie opcji „Zarejestruj się” równie widoczną jak „Zaloguj się”.

Kluczowa informacja: Szanuj preferencje prywatności użytkowników, jednocześnie wyraźnie pokazując korzyści z posiadania konta.

11. Średni: Bezpośrednio do Treści

Platforma do blogowania, Medium, ma dwóch typów użytkowników: tych, którzy czytają i tych, którzy piszą. Obie grupy kierowane są na tę samą, uproszczoną stronę logowania.

Strona logowania Medium z opcjami logowania za pomocą Google, Facebooka, Apple, e-maila lub przez SSO.

Dlaczego to działa:

  • Logowanie przez e-mail to ostateczność: Medium preferuje dostawców OAuth; tradycyjny formularz logowania zobaczysz tylko, jeśli wybierzesz logowanie przez e-mail.
  • Minimalne zakłócenie przepływu czytania: Na większości stron formularz logowania pojawia się jako okno nad przeglądaną treścią. 
  • Atrakcyjne opcje awaryjne: Format pytań i odpowiedzi prowadzi użytkowników do rozwiązania ich problemu. Na przykład: „Zapomniałeś e-maila lub masz problem z logowaniem? Uzyskaj pomoc.”

Notatki dotyczące wdrożenia:

  • Rozważ użycie nakładek modalnych zamiast oddzielnych stron logowania. Pozwala to użytkownikom kontynuować swoją drogę bez rozpraszania przez proces logowania.
  • Śledź, gdzie użytkownicy napotykają przeszkodę logowania, aby zoptymalizować moment, kiedy powinieneś prosić o uwierzytelnienie.

Kluczowa uwaga: Logowanie nie powinno zaburzać przebiegu użytkowania.

Kiedy Konwersja W E-commerce Jest Kluczowa

Dla stron e-commerce, nawet najmniejszy opór może skutkować porzuconymi koszykami i utraconymi przychodami. Dotyczy to także logowania.

Oto kilka przykładów sklepów internetowych, które sprawiają, że klienci są zadowoleni.

12. Amazon: Brutalna Optymalizacja

Nie znajdziesz lepiej zoptymalizowanego sklepu internetowego niż Amazon. Strona logowania nie jest wyjątkiem. Projekt jest bezlitośnie prosty, pozostawiając niewiele miejsca na zamieszanie.

Strona logowania Amazon prosi użytkowników o wpisanie numeru telefonu lub adresu e-mail, aby się zalogować lub utworzyć konto.

Dlaczego to działa:

  • Wybierz e-mail lub numer telefonu: Użytkownicy mogą logować się za pomocą identyfikatora, który pamiętają.
  • „Zapamiętaj mnie” zaznaczone domyślnie: Trochę kontrowersyjne, ale oznacza to, że klienci nie muszą za każdym razem logować się na nowo podczas zakupów.
  • Opcja natychmiastowego tworzenia konta: Nowi użytkownicy mogą tworzyć konta bez opuszczania procesu.

Notatki Implementacyjne:

  • Amazon stosuje obszerne testowanie A/B do przeprowadzania eksperymentów w kluczowych obszarach strony — nawyk, który mniejsze sklepy powinny naśladować.
  • Tokeny sesji używają przesuwającego się czasu wygaśnięcia dla solidnego bezpieczeństwa bez konieczności ciągłej ponownej autentykacji.

Kluczowa kwestia: W e-commerce każde kliknięcie, które dodaje oporu, kosztuje konwersje, dlatego redukuj je bezlitośnie.

13. Nike: Dołącz do Klubu Mody

Strona logowania Nike sprawia wrażenie mniej zabezpieczonej, a bardziej jak wejście do ekskluzywnego klubu. Jest tylko jedno pole, a reszta projektu poświęcona jest białej przestrzeni i ikonicznym logotypom.

Strona logowania Nike prosząca użytkowników o wprowadzenie adresu e-mail do logowania lub rejestracji.

Dlaczego to działa:

  • Mocne Wizualizacje Marki: Symbol „swoosh” i sylwetka Jordana są małe, ale mają duży wpływ wizualny.
  • Podkreślenie Korzyści Dla Członków: Komunikat „Dołącz do nas” skupia się na korzyściach, a nie obowiązkach.
  • Połączony Proces Logowania I Rejestracji: Jest tylko jedna ścieżka, która zaczyna się od wpisania twojego e-maila. Stąd możesz się zalogować lub stworzyć konto.

Notatki dotyczące wdrażania:

  • Ta strona logowania została zbudowana przy użyciu React, Emotion i core-js.
  • Zwróć uwagę na selektor lokalizacji; umożliwia to firmie Nike dostarczanie odpowiedniej polityki prywatności dla odwiedzających z każdego regionu.

Kluczowa informacja: Luksusowe marki i marki stylu życia powinny sprawić, że logowanie będzie odczuwane jak dołączenie do czegoś wyjątkowego.

14. ASOS: Stworzone dla Rejestracji

Łączenie procesów logowania i rejestracji to popularna praktyka w e-commerce. Sztuka polega na tym, by nie irytować powracających klientów. ASOS osiąga dobry kompromis, zachęcając klientów do założenia konta, nie psując przy tym procesu logowania.

Strona logowania ASOS zachęcająca do wpisania adresu e-mail z opcjami logowania przez Google, Facebook lub Apple.

Dlaczego to działa:

  • Komunikacja skoncentrowana na korzyściach: ASOS przekonuje użytkowników kilkoma powodami, dla których warto założyć konto, jeśli jeszcze tego nie zrobili.
  • Strategiczne użycie koloru: Większość elementów strony logowania jest czarno-biała. Inne kolory są zarezerwowane dla kluczowych elementów, takich jak przyciski OAuth i etykieta „DARMOWE”.
  • Formularz wyrównany do lewej, aby przyciągnąć wzrok: Badania pokazują, że skanujemy od górnego lewego rogu, gdy strona się ładuje.

Uwagi dotyczące implementacji:

  • Ta strona korzysta z Preact, małej alternatywy dla React, aby zapewnić bardzo szybką wydajność.
  • W tym przykładzie korzyści z rejestracji są komunikowane za pomocą prostych ilustracji i etykiet — ale możesz dodać linki do więcej informacji.

Podstawowa informacja: Użytkownicy chętniej zarejestrują konto, jeśli od razu zaprezentujesz korzyści.

15. IKEA: Pełna Jasność

Jednym z najlepszych sposobów na zmniejszenie oporów jest wcześniejsze ustalenie oczekiwań. IKEA robi to doskonale, informując użytkowników od samego początku, że otrzymają jednorazowy kod za pośrednictwem e-maila.

Strona logowania IKEA prosi o podanie e-maila, aby otrzymać jednorazowy kod, z opcjami logowania lub założenia nowego konta.

Dlaczego to działa:

  • Projektowanie, które kieruje użytkowników do 2FA: IKEA umożliwia logowanie przy użyciu hasła, ale wizualna hierarchia strony skłania do użycia jednorazowego kodu.
  • Jasny i zwięzły tekst: Użytkownicy otrzymują jasne instrukcje. Szczególnie podoba nam się ta: „Proszę wprowadzić swój adres e-mail, aby otrzymać jednorazowy kod”.
  • Oddzielna marka dla lepszej użyteczności: Budowanie formularza w kolorach marki IKEA (intensywny niebieski i żółty) byłoby wyzwaniem, dlatego zespół projektowy wybrał układ podzielony.

Notatki do implementacji:

  • Ta strona logowania została stworzona przy użyciu Java, React oraz styled-components.
  • CAPTCHA to nie jedyny sposób na pokonanie botów; IKEA używa Cloudflare Turnstile jako alternatywy.

Podstawowa informacja: Nie musisz narzucać brandingu na swój formularz logowania.

Siedem Zasad Doskonałości Strony Logowania

Właśnie obejrzeliśmy 15 stron logowania, jak sędziowie na konkursie piękności UX. Ale czego tak naprawdę się nauczyliśmy?

Oto kilka kluczowych wniosków:

  1. Pola hasła to już 2010 rok (ale zachowaj je): Magiczne linki i klucze dostępu to przyszłość, ale ciocia Marta nadal chce wpisać „Password123!” i czuć się jak haker. Dodaj nowoczesne rozwiązania, ale zawsze zapewnij tę awaryjną opcję.
  2. Twoja strona logowania to nie twoja osobista galeria sztuki: Zapisz efekty cząsteczkowe Three.js na swoje portfolio. Jeśli użytkownicy potrzebują zaawansowanej karty graficznej do renderowania twojego formularza logowania, to już przegrałeś.
  3. Przyciski logowania społecznościowego to nie Pokémony — nie musisz ich wszystkich mieć: Trzy opcje są dobre, piętnaście złe. Zmierz, czego faktycznie używają twoi użytkownicy, a następnie bezlitośnie usuwaj resztę. To nie jest bufet.

Dobry początek, ale obiecaliśmy siedem przykazań. Oto więc kilka kolejnych zasad doskonałego projektowania logowania:

  1. Ograniczanie szybkości… ponieważ niektórzy ludzie nie rozumieją aluzji: Wykładnicze zwalnianie z widocznym odliczaniem. „Możesz spróbować ponownie za 14:59…” To teatr bezpieczeństwa, który naprawdę działa.
  2. Komunikaty o błędach powinny faktycznie pomagać: „Nieprawidłowe dane uwierzytelniające” to nic nie mówiące. Bądź konkretny, ale nie pomagaj hakerom. Na przykład „E-mail nie został znaleziony” pomaga użytkownikom. Ale „Nieprawidłowe hasło dla john.doe@example.com” pomaga atakującym.
  3. Użytkownicy mobilni mają kciuki, a nie chirurgiczne narzędzia: Zaprojektuj elementy dotykowe mające przynajmniej 44×44 piksele, używaj odpowiednich typów danych wejściowych (type=”email” to twój przyjaciel) i testuj z użyciem prawdziwych ludzkich kciuków.
  4. Prywatność nie jest już opcjonalna: Wyświetlaj linki do polityki prywatności i bądź przejrzysty w kwestii przechowywania danych. Ach, i ten przełącznik „Zapamiętaj mnie” nie powinien oznaczać „zbieraj moją duszę na potrzeby ukierunkowanej reklamy.”

Daj Swoim Użytkownikom Logowanie, Na Jakie Zasługują

Niezależnie od tego, czy budujesz następny Facebook, czy po prostu ustawiasz komentarze na swoim blogu, warto zwrócić uwagę na swoją stronę logowania.

Twój wybór wzoru, procesu logowania i bezpieczeństwa może naprawdę wpłynąć na to, jak użytkownicy będą postrzegać Twoją stronę. Może to również być różnica między tym, że odwiedzający zrezygnują ze strony w złości, a tym, że zostaną na lata.

Pracujesz teraz nad stroną? Rozważ hosting w DreamHost. Mamy ponad 400,000 zadowolonych klientów i przejrzyste ceny, które pasują do każdego projektu.

Zapisz się dzisiaj, aby dołączyć do zabawy!

web design
Pro Usługi – Projektowanie

Piękne Strony Internetowe, Zaprojektowane Od Zera

Wyróżnij się w tłumie dzięki nowoczesnej stronie WordPress, która jest w 100% unikalna dla Ciebie.

Zobacz więcej