Sprawdzone metody dotyczące formularza rejestracyjnego

Ułatw użytkownikom rejestrację i logowanie się oraz zarządzanie szczegółami konta.

Sam Dutton

Jeśli użytkownik kiedykolwiek będzie musiał zalogować się w Twojej witrynie, dobrze zaprojektowany formularz rejestracyjny jest bardzo ważny. Dotyczy to zwłaszcza osób, które mają słabe połączenie, korzystają z telefonu komórkowego, są w spieszeniu lub są zestresowane. Źle zaprojektowane formularze rejestracyjne mają wysoki współczynnik odrzuceń. Każde odrzucenie może oznaczać przegranego i niezadowolony(-a) użytkownika, a nie tylko straconą szansę na rejestrację.

Oto przykład bardzo prostego formularza rejestracyjnego, w którym opisano wszystkie sprawdzone metody:

Lista kontrolna

W miarę możliwości unikaj logowania się

Zanim wdrożysz formularz rejestracyjny i poprosisz użytkowników o założenie konta w Twojej witrynie, zastanów się, czy naprawdę jest to konieczne. Gdy tylko jest to możliwe, należy unikać blokowania funkcji po zalogowaniu.

Najlepszy formularz rejestracyjny to brak formularza rejestracyjnego.

Prosząc użytkownika o założenie konta, wchodzisz w sposobie, w jaki jest on widoczny i co chce osiągnąć. Proszisz użytkownika o przysługę i powierzasz Ci swoje dane osobowe. Każde hasło i element danych, które przechowujesz, są związane z prywatnością i bezpieczeństwem, co wiąże się z kosztami i odpowiedzialnością wobec witryny.

Jeśli głównym powodem, dla którego prosisz użytkowników o utworzenie konta, jest zapisywanie informacji między nawigacjami lub sesjami przeglądania, rozważ korzystanie z pamięci po stronie klienta. W przypadku witryn zakupowych zmuszenie użytkowników do utworzenia konta w celu dokonania zakupu jest podane jako główny powód porzucenia koszyka. Ustaw opcję Zapłać bez logowania jako domyślną.

Logowanie się w sposób oczywisty

Pokaż w jasny sposób, jak utworzyć konto w witrynie, np. za pomocą przycisku Zaloguj lub Zaloguj się w prawym górnym rogu strony. Unikaj używania niejednoznacznych ikon i niejednoznacznych sformułowań („Sukces w grze!”, „Dołącz do nas”) i nie ukrywaj loginu w menu nawigacyjnym. Steve Krug, ekspert ds. łatwości obsługi, podsumował to podejście do obsługi witryny: Nie daj mi o tym myśleć. Jeśli chcesz przekonać innych użytkowników z zespołu internetowego, skorzystaj z statystyk, aby pokazać wpływ różnych opcji.

Dwa zrzuty ekranu przedstawiające przykładową witrynę e-commerce wyświetlone na telefonie z Androidem. W tej po lewej stronie znajduje się dość niejednoznaczna ikona linku logowania, a w po prawej „Zaloguj się”
Logowanie się musi być oczywiste. Ikona może być niejednoznaczna, ale wystarczy kliknąć przycisk lub link Zaloguj się.
Zrzuty ekranu przedstawiające logowanie się w Gmailu: jedna strona z przyciskiem Zaloguj się, po kliknięciu prowadzą do formularza z linkiem Utwórz konto.
Na stronie logowania się w Gmailu znajduje się link umożliwiający utworzenie konta.
W oknie o rozmiarze większym niż pokazany tutaj Gmail wyświetla link Zaloguj się i przycisk Utwórz konto.

Pamiętaj, aby połączyć konta dla użytkowników, którzy rejestrują się za pośrednictwem dostawcy tożsamości (np. Google) oraz rejestrują się za pomocą adresu e-mail i hasła. Jest to łatwe, jeśli możesz uzyskać dostęp do adresu e-mail użytkownika z danych profilu dostawcy tożsamości i dopasować oba konta. Poniższy kod pokazuje, jak uzyskać dostęp do danych poczty e-mail użytkownika Logowania przez Google.

// auth2 is initialized with gapi.auth2.init()
if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log(`Email: ${profile.getEmail()}`);
}

Wyraźnie określ, jak uzyskać dostęp do szczegółów konta

Gdy użytkownik się zaloguje, wyjaśnij, jak uzyskać dostęp do szczegółów konta. W szczególności zadbaj o to, by było jasne, jak zmieniać i resetować hasła.

Pozbądź się bałaganu w formularzu

Twoim zadaniem podczas rejestracji jest zminimalizowanie złożoności procesu rejestracji i skupienie się na użytkowniku. Zrób porządek. To nie jest czas na rozpraszanie uwagi i pokusę!

Nie rozpraszaj użytkowników przed ukończeniem rejestracji.

Podczas rejestracji poproś o jak najmniejszą ilość informacji. Gromadzenie dodatkowych danych użytkownika (np. imienia i nazwiska oraz adresu pocztowego) tylko w razie potrzeby i gdy użytkownik zauważy wyraźną korzyść z przekazania tych danych. Pamiętaj, że każdy element danych, który przekazujesz i przechowujesz, wiąże się z kosztami i odpowiedzialnością.

Nie musisz podwójnie podawać danych kontaktowych tylko po to, żeby użytkownicy mieli pewność, że ich dane kontaktowe są prawidłowe. Spowalnia to wypełnianie formularza i nie ma sensu, jeśli pola formularza są wypełniane automatycznie. Zamiast tego wyślij użytkownikowi kod potwierdzenia po podaniu danych kontaktowych, a gdy użytkownik odpowie, kontynuuj tworzenie konta. Jest to typowy wzorzec rejestracji: użytkownicy są do tego przyzwyczajeni.

Możesz rozważyć logowanie bez hasła, wysyłając użytkownikom kod za każdym razem, gdy logują się na nowym urządzeniu lub w nowej przeglądarce. Witryny takie jak Slack i Medium używają tej wersji.

Logowanie się bez hasła na stronie medium.com.

Podobnie jak w przypadku logowania sfederowanego, taka funkcja dodatkowo nie wymaga zarządzania hasłami użytkowników.

Weź pod uwagę długość sesji

Niezależnie od stosowanego podejścia do tożsamości użytkownika musisz podjąć przemyślaną decyzję co do długości sesji, czyli czasu, przez jaki użytkownik pozostaje zalogowany i co może skłonić go do wylogowania.

Zastanów się, czy użytkownicy korzystają z urządzeń mobilnych czy komputerów i czy udostępniają treści na komputerze lub wspólnie z nimi.

Pomóż menedżerom haseł bezpiecznie sugerować i przechowywać hasła

Możesz pomóc zewnętrznym menedżerom haseł w przeglądarce i wbudowanym menedżerom haseł w sugerowanie i przechowywaniu haseł, aby użytkownicy nie musieli samodzielnie wybierać, zapamiętywać ani wpisywać haseł. Menedżery haseł działają dobrze w nowoczesnych przeglądarkach, synchronizuje konta na różnych urządzeniach, w aplikacjach internetowych i na danej platformie oraz na nowych urządzeniach.

Dlatego tak ważne jest poprawne zakodowanie formularza rejestracyjnego, a w szczególności do używania prawidłowych wartości autouzupełniania. W przypadku formularzy rejestracyjnych użyj wartości autocomplete="new-password" w przypadku nowych haseł. W miarę możliwości dodawaj poprawne wartości autouzupełniania do innych pól formularza, np. autocomplete="email" i autocomplete="tel". Możesz też pomóc menedżerom haseł, używając różnych wartości name i id w formularzach rejestracji i logowania, w samym elemencie form oraz w elementach input, select i textarea.

Skorzystaj też z odpowiedniego atrybutu type, aby ustawić odpowiednią klawiaturę na urządzeniu mobilnym i włączyć podstawowe funkcje wbudowane w przeglądarkę. Więcej informacji znajdziesz w artykule Sprawdzone metody dotyczące formularzy płatności i adresów.

Zadbaj o to, aby użytkownicy podawali bezpieczne hasła

Najlepiej jest włączyć sugerowanie haseł przez menedżerów haseł. Zachęcaj też użytkowników do stosowania silnych haseł sugerowanych przez przeglądarki i menedżery przeglądarek innych firm.

Wielu użytkowników chce jednak wpisywać własne hasła, więc musisz wdrożyć reguły zwiększające siłę hasła. Amerykański Narodowy Instytut Standardów i Technologii wyjaśnia, jak unikać niezabezpieczonych haseł.

Nie zezwalaj na przejęte hasła

Niezależnie od tego, jakie reguły wybierzesz w odniesieniu do haseł, nigdy nie zezwalaj na hasła, które zostały ujawnione w wyniku naruszenia bezpieczeństwa.

Gdy użytkownik wpisze hasło, upewnij się, że nie jest to hasło, które zostało już przejęte. Witryna have I Been Pwned zapewnia interfejs API do sprawdzania haseł. Możesz też uruchomić go samodzielnie.

Menedżer haseł Google pozwala też sprawdzić, czy któreś z Twoich haseł nie zostało przejęte.

Jeśli odrzucisz hasło proponowane przez użytkownika, poinformuj go, dlaczego zostało odrzucone. Pokaż problemy w tekście i wyjaśnij, jak je rozwiązać, gdy tylko użytkownik wpisze wartość, a nie po przesłaniu formularza rejestracyjnego i oczekiwaniu na odpowiedź z serwera.

Wyjaśnij powód odrzucenia hasła.

Nie zabraniaj wklejania haseł

Niektóre witryny nie zezwalają na wklejanie tekstu w polu wpisywania hasła.

Brak zezwolenia na wklejanie haseł denerwuje użytkowników, promuje hasła, które są łatwe do zapamiętania (i tym samym mogą być łatwiejsze do przejęcia). Według organizacji takich jak brytyjskie Centrum Bezpieczeństwa Cyberbezpieczeństwa może faktycznie zmniejszyć bezpieczeństwo. Użytkownicy zdają sobie sprawę, że wklejanie jest zabronione po próbie wklejenia hasła, więc zezwolenie na wklejanie haseł nie zapobiega lukom w zabezpieczeniach.

Nigdy nie przechowuj ani nie przesyłaj haseł w postaci zwykłego tekstu

Pamiętaj, aby hasła zaburzać i szyfrować, i nie wymyślać własnego algorytmu szyfrowania.

Nie wymuszaj aktualizacji haseł

Nie zmuszaj użytkowników do przypadkowego aktualizowania haseł.

Wymuszanie aktualizacji haseł może być kosztowne dla działów IT, irytujące dla użytkowników i nie ma dużego wpływu na bezpieczeństwo. Zachęca też użytkowników do używania niezabezpieczonego haseł łatwych do zapamiętania lub do fizycznego przechowywania haseł.

Zamiast wymuszać aktualizację haseł, sprawdzaj, czy na koncie nie ma nietypowej aktywności, i ostrzegaj użytkowników. W miarę możliwości zalecamy też monitorowanie haseł, które zostały przejęte w wyniku naruszenia bezpieczeństwa danych.

Udostępnij też użytkownikom historię logowania na konto, która będzie zawierać informacje o tym, gdzie i kiedy miało miejsce takie logowanie.

Strona aktywności na koncie Gmail
Strona aktywności na koncie Gmail.

Łatwiejsze zmienianie i resetowanie haseł

Poinformuj użytkowników, gdzie i jak mogą zaktualizować hasło do konta. W niektórych witrynach jest to zaskakująco trudne.

Zadbaj też o to, by użytkownicy mogli łatwo zresetować swoje hasła, gdy je zapomną. Open Web Application Security Project udostępnia szczegółowe wskazówki na temat postępowania z utraconymi hasłami.

Aby chronić swoją firmę i użytkowników, szczególnie ważne jest umożliwienie im zmiany hasła, gdy odkryją, że zostało ono przejęte. Aby to sobie ułatwić, dodaj do swojej witryny adres URL /.well-known/change-password, który przekierowuje do strony zarządzania hasłami. Dzięki temu menedżer haseł będzie mógł kierować użytkowników bezpośrednio na stronę, na której będą mogli zmienić hasło do Twojej witryny. Funkcja ta jest obecnie dostępna w przeglądarkach Safari i Chrome, a obecnie będzie dostępna w innych przeglądarkach. Ułatw użytkownikom zmianę hasła, dodając dobrze znany adres URL do zmiany hasła. W nim znajdziesz wyjaśnienie, jak to zrobić.

Trzeba też ułatwiać użytkownikom usuwanie kont, jeśli tego chcą.

Oferuj logowanie się za pomocą zewnętrznych dostawców tożsamości

Wielu użytkowników woli logować się w witrynach za pomocą formularza rejestracyjnego i formularza z adresem e-mail. Warto jednak dodatkowo umożliwić użytkownikom logowanie się za pomocą zewnętrznego dostawcy tożsamości, nazywanego też logowaniem sfederowanym.

Strona logowania WordPress
Strona logowania do WordPressa z opcjami logowania Google i Apple.

Takie podejście ma kilka zalet. W przypadku użytkowników, którzy utworzą konto z wykorzystaniem logowania sfederowanego, nie musisz prosić o hasła, przekazywać ich ani przechowywać.

Za pomocą logowania sfederowanego możesz też mieć dostęp do dodatkowych informacji o profilu, takich jak adres e-mail. Oznacza to, że użytkownik nie musi wprowadzać tych danych i nie musisz przeprowadzać weryfikacji samodzielnie. Logowanie sfederowane może też znacznie ułatwić użytkownikom zmiana urządzenia.

W artykule Integracja Logowania przez Google z aplikacją internetową wyjaśniamy, jak dodać do opcji rejestracji logowanie sfederowane. Dostępnych jest wiele innych platform tożsamości.

Łatwiejsze przełączanie kont

Wielu użytkowników korzysta z jednego urządzenia i przełącza się między kontami w tej samej przeglądarce. Niezależnie od tego, czy użytkownicy korzystają z logowania sfederowanego, warto uprościć przełączanie kont.

Gmail, widać przełączanie kont
Przełączanie kont w Gmailu.

Warto zaoferować uwierzytelnianie wielopoziomowe

Uwierzytelnianie wielopoziomowe oznacza, że użytkownicy będą uwierzytelniać się na wiele sposobów. Na przykład oprócz wymagania od użytkownika ustawienia hasła możesz też wymusić weryfikację za pomocą jednorazowego kodu wysyłanego e-mailem lub SMS-em albo za pomocą jednorazowego kodu aplikacji, klucza bezpieczeństwa lub czytnika linii papilarnych. W sprawdzonych metodach dotyczących haseł jednorazowych SMS-ów i włączaniu silnego uwierzytelniania za pomocą WebAuthn wyjaśniamy, jak wdrożyć uwierzytelnianie wielopoziomowe.

Jeśli Twoja witryna używa danych osobowych lub informacji poufnych, zdecydowanie zalecamy stosowanie (lub wymuszanie) uwierzytelniania wielopoziomowego.

Uważaj na nazwy użytkowników

Nie wymagaj nazwy użytkownika, dopóki jej nie potrzebujesz. Pozwól użytkownikom na rejestrowanie się i logowanie tylko za pomocą adresu e-mail (lub numeru telefonu) i hasła. Jeśli chcą, możesz też użyć logowania sfederowanego. Nie zmuszaj użytkowników do wybrania i zapamiętywania nazwy użytkownika.

Jeśli Twoja witryna wymaga nazw użytkowników, nie narzucaj nieuzasadnionych reguł ani nie uniemożliwiaj użytkownikom aktualizowania nazwy użytkownika. W swoim backendzie wygeneruj unikalny identyfikator dla każdego konta użytkownika, a nie identyfikator na podstawie danych osobowych takich jak nazwa użytkownika.

Pamiętaj też, aby używać autocomplete="username" jako nazw użytkowników.

Testowanie na różnych urządzeniach, platformach, przeglądarkach i w różnych wersjach

Przetestuj formularze rejestracyjne na platformach, które są najczęściej używane przez Twoich użytkowników. Funkcjonalność elementów formularza może się różnić, a różnice w rozmiarze widocznego obszaru mogą powodować problemy z układem. BrowserStack umożliwia bezpłatne testowanie projektów open source na różnych urządzeniach i w różnych przeglądarkach.

Wdrażanie analityki i monitorowania rzeczywistych użytkowników

Aby dowiedzieć się, jak użytkownicy korzystają z formularzy rejestracyjnych, potrzebujesz danych z pól oraz danych z modułów. Analytics i Real User Monitoring (RUM) dostarczają danych o rzeczywistych wrażeniach użytkowników, np. o tym, ile czasu zajmuje wczytanie strony rejestracji, z którymi komponentami interfejsu użytkownicy korzystają (lub nie) oraz ile czasu zajmuje rejestracja.

Niewielkie zmiany mogą mieć duży wpływ na współczynnik wypełnienia formularzy rejestracyjnych. Analytics i RUM umożliwiają optymalizowanie zmian i ustalanie ich priorytetów, a także monitorowanie witryny pod kątem problemów, które nie są narażone na testy lokalne.

Ucz się dalej

Zdjęcie: @ecowarriorprinces w programie Unsplash.