Sprawdzone metody dotyczące formularzy rejestracyjnych

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

Sam Dutton

Jeśli użytkownicy muszą logować się w Twojej witrynie, dobrze zaprojektowany formularz rejestracji jest kluczowy. Dotyczy to zwłaszcza osób, które mają słabe połączenie, korzystają z telefonów komórkowych, spieszą się lub są pod presją. Źle zaprojektowane formularze rejestracji mają wysoki współczynnik odrzuceń. Każde odrzucenie może oznaczać utratę niezadowolonego użytkownika, a nie tylko utratę możliwości rejestracji.

Oto przykład bardzo prostego formularza rejestracji, prezentujący wszystkie sprawdzone metody:

Lista kontrolna

Jeśli to możliwe, unikaj logowania

Zanim wdrożysz formularz rejestracji i poprosisz użytkowników o utworzenie konta w swojej witrynie, zastanów się, czy jest to naprawdę konieczne. Jeśli to możliwe, unikaj udostępniania funkcji dopiero po zalogowaniu.

Najlepszy formularz rejestracji to brak formularza rejestracji.

Prosząc użytkownika o utworzenie konta, stajesz mu na drodze do osiągnięcia celu. Prosisz użytkownika o przysługę i o zaufanie w kwestii danych osobowych. Każde hasło i każdy element danych, które przechowujesz, wiążą się z „długiem danych” w zakresie prywatności i bezpieczeństwa, co stanowi koszt i odpowiedzialność Twojej witryny.

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

Wyraźnie informuj o tym, jak utworzyć konto

Zadbaj o to, aby użytkownicy mogli łatwo utworzyć konto w Twojej witrynie. W tym celu umieść w prawym górnym rogu strony przycisk Zaloguj się lub Zarejestruj się. Unikaj używania niejednoznacznych ikon lub niejasnych sformułowań („Dołącz do nas!”, „Wejdź na pokład”) i nie ukrywaj logowania w menu nawigacyjnym. Ekspert ds. użyteczności Steve Krug podsumował to podejście do użyteczności witryn internetowych słowami: Nie zmuszaj mnie do myślenia! Jeśli chcesz przekonać inne osoby z zespołu ds. internetu, użyj analityki, aby pokazać wpływ różnych opcji.

Dwa zrzuty ekranu makiety witryny e-commerce wyświetlanej na telefonie z Androidem. Witryna po lewej stronie zawiera ikonę linku logowania, która jest nieco niejednoznaczna, a po prawej – po prostu napis „Zaloguj się”.
Wyraźnie informuj o tym, jak utworzyć konto. Ikona może być niejednoznaczna, ale przycisk lub link Zaloguj się jest oczywisty.
Zrzuty ekranu logowania do Gmaila: jedna strona z przyciskiem Zaloguj się, który po kliknięciu prowadzi do formularza z linkiem Utwórz konto.
Na stronie logowania do Gmaila znajduje się link do utworzenia konta.
W większych oknach Gmail wyświetla link Zaloguj się i przycisk Utwórz konto.

Pamiętaj, aby połączyć konta użytkowników, którzy rejestrują się za pomocą dostawcy tożsamości, takiego jak Google, a także tych, którzy rejestrują się za pomocą adresu e-mail i hasła. Jest to proste, jeśli masz dostęp do adresu e-mail użytkownika z danych profilowych u dostawcy tożsamości i możesz dopasować oba konta. Kod pokazany poniżej przedstawia sposób uzyskiwania dostępu do danych e-mail użytkownika, który loguje się przez Google.

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

Ułatw dostęp do szczegółów konta

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

Zadbaj o to, by formularz był jak najprostszy

W procesie rejestracji Twoim zadaniem jest zminimalizowanie złożoności i skupienie uwagi użytkownika. Zrezygnuj ze zbędnych elementów. To nie jest czas na rozpraszanie uwagi i pokusy.

Nie odwracaj uwagi użytkowników od procesu rejestracji.

Podczas rejestracji proś o jak najmniej informacji. Zbieraj dodatkowe dane użytkowników (np. imię i nazwisko oraz adres) tylko wtedy, gdy jest to konieczne i gdy użytkownik widzi wyraźną korzyść z ich podania. Pamiętaj, że wszystkie przekazywane i przechowywane dane wiążą się z kosztami i odpowiedzialnością.

Nie duplikuj pól, aby mieć pewność, że użytkownicy podają prawidłowe dane kontaktowe. Spowalnia to wypełnianie formularza i nie ma sensu, jeśli jego pola są wypełniane automatycznie. Zamiast tego po wpisaniu przez użytkownika danych kontaktowych wyślij mu kod potwierdzenia i kontynuuj tworzenie konta, gdy go otrzymasz z powrotem. Jest to typowy wzorzec rejestracji, do którego użytkownicy są przyzwyczajeni.

Możesz rozważyć logowanie bez hasła, które polega na wysyłaniu użytkownikom kodu za każdym razem, gdy logują się na nowym urządzeniu lub w nowej przeglądarce. Z tej funkcji korzystają m.in. Slack i Medium.

Logowanie bez hasła na medium.com

Podobnie jak w przypadku logowania sfederowanego, dodatkową zaletą jest to, że nie musisz zarządzać hasłami użytkowników.

Weź pod uwagę długość sesji

Niezależnie od tego, jakie podejście do tożsamości użytkownika wybierzesz, musisz starannie określić długość sesji: jak długo użytkownik pozostaje zalogowany i co może spowodować jego wylogowanie.

Zastanów się, czy użytkownicy korzystają z urządzeń mobilnych czy komputerów, a także czy są to urządzenia współdzielone.

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

Możesz pomóc zewnętrznym i wbudowanym w przeglądarkę menedżerom haseł sugerować i przechowywać hasła, aby użytkownicy nie musieli ich wybierać, zapamiętywać ani wpisywać. Menedżery haseł działają dobrze w nowoczesnych przeglądarkach, synchronizując konta na różnych urządzeniach, w aplikacjach internetowych i na platformach, a także na nowych urządzeniach.

Dlatego bardzo ważne jest prawidłowe kodowanie formularzy rejestracji, a w szczególności używanie prawidłowych wartości autouzupełniania. Używaj w formularzach wartości autocomplete="new-password" na potrzeby nowych haseł i w miarę możliwości dodaj prawidłowe wartości autouzupełniania do innych pól formularza, np. autocomplete="email" i autocomplete="tel". Możesz też ułatwić pracę menedżerom haseł, jeśli użyjesz różnych wartości atrybutów name i id w formularzach rejestracji i logowania, zarówno w przypadku samego elementu form, jak i elementów input, select i textarea.

Użyj też odpowiedniego atrybutu type, aby zapewnić odpowiednią klawiaturę na urządzeniach mobilnych i włączyć podstawową weryfikację wbudowaną w przeglądarkę. Więcej informacji znajdziesz w artykule Sprawdzone metody dotyczące formularzy płatności i adresów.

Wymagaj od użytkowników wpisywania bezpiecznych haseł

Umożliwienie menedżerom haseł sugerowania haseł to najlepsza opcja. Zachęcaj użytkowników do akceptowania silnych haseł proponowanych przez przeglądarki i menedżerów haseł innych firm.

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

Nie zezwalaj na przejęte hasła

Niezależnie od tego, jakie reguły dotyczące haseł wybierzesz, nigdy nie zezwalaj na hasła, które zostały ujawnione w wyniku naruszenia zabezpieczeń.

Gdy użytkownik wpisze hasło, musisz sprawdzić, czy nie zostało ono już naruszone. Witryna Have I Been Pwned udostępnia interfejs API do sprawdzania haseł. Możesz też uruchomić tę usługę samodzielnie.

Menedżer haseł Google też umożliwia sprawdzenie, czy bezpieczeństwo któregoś z Twoich dotychczasowych haseł nie zostało naruszone.

Jeśli odrzucisz hasło zaproponowane przez użytkownika, podaj konkretny powód odrzucenia. Wyświetlaj problemy w tekście i wyjaśniaj, jak je rozwiązać, gdy tylko użytkownik wpisze wartość, a nie po przesłaniu formularza rejestracyjnego i oczekiwaniu na odpowiedź z serwera.

Wyraźnie informuj o przyczynie odrzucenia hasła.

Nie zabraniaj wklejania haseł

Niektóre witryny nie zezwalają na wklejanie tekstu w polach haseł.

Blokowanie wklejania haseł irytuje użytkowników, zachęca do używania haseł, które łatwo zapamiętać (i tym samym które mogą być łatwiejsze do złamania), i według organizacji takich jak brytyjskie National Cyber Security Centre może w rzeczywistości obniżać poziom bezpieczeństwa. Użytkownicy dowiadują się, że wklejanie jest niedozwolone, dopiero po próbie wklejenia hasła, więc uniemożliwienie wklejania hasła nie zapobiega wykorzystaniu luk w zabezpieczeniach schowka.

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

Pamiętaj, aby stosować ciągi zaburzające w hasłach i je haszować oraz nie próbuj wymyślać własnego algorytmu haszowania.

Nie wymuszaj aktualizowania haseł

Nie zmuszaj użytkowników do aktualizowania haseł w sposób arbitralny.

Wymuszanie aktualizowania haseł może być kosztowne dla działów IT, uciążliwe dla użytkowników i nie ma większego wpływu na bezpieczeństwo. Może to również zachęcać użytkowników do używania niebezpiecznych, łatwych do zapamiętania haseł lub do przechowywania haseł w formie fizycznej.

Zamiast wymuszać aktualizacje haseł, monitoruj nietypową aktywność na kontach i ostrzegaj użytkowników. W miarę możliwości sprawdzaj też, czy hasła nie zostały przejęte w wyniku naruszenia bezpieczeństwa danych.

Pamiętaj też, aby zapewnić użytkownikom dostęp do historii logowania na konto, w której będą mogli sprawdzić, gdzie i kiedy nastąpiło logowanie.

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

Zadbaj o to, aby zmiana i resetowanie hasła były łatwe

Wyraźnie informuj użytkowników, gdzie i jak mogą zaktualizować hasło do konta. Na niektórych stronach jest to zaskakująco trudne.

Oczywiście należy też ułatwić użytkownikom resetowanie haseł, jeśli je zapomną. Organizacja Open Web Application Security Project udostępnia szczegółowe wskazówki dotyczące postępowania w przypadku utraty hasła.

Szczególnie ważne jest pomaganie użytkownikom w zmianie hasła, jeśli odkryją, że zostało ono przejęte. Pozwala to chronić zarówno ich, jak i Twoją firmę. Aby to 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żery haseł mogą kierować użytkowników bezpośrednio na stronę, na której mogą zmienić hasło do Twojej witryny. Ta funkcja jest obecnie zaimplementowana w Safari i Chrome, a wkrótce będzie dostępna w innych przeglądarkach. Instrukcje jej wdrażania znajdziesz w artykule Ułatwianie użytkownikom zmiany haseł przez dodanie dobrze znanego adresu URL do zmiany haseł.

Należy też ułatwić użytkownikom usuwanie kont, jeśli tego chcą.

Zapewnij możliwość logowania się za pomocą zewnętrznych dostawców tożsamości

Wielu użytkowników woli logować się w witrynach za pomocą formularza rejestracji obejmującego adres e-mail i hasło. Warto jednak umożliwić im logowanie się za pomocą zewnętrznego dostawcy tożsamości, czyli logowanie sfederowane.

Strona logowania WordPress
Strona logowania w WordPressie z opcjami logowania przez Google i Apple.

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

Możesz też uzyskać dostęp do dodatkowych informacji o zweryfikowanym profilu z logowania sfederowanego, takich jak adres e-mail. Oznacza to, że użytkownik nie musi wpisywać tych danych, a Ty nie musisz przeprowadzać weryfikacji samodzielnie. Logowanie sfederowane może też znacznie ułatwić użytkownikom korzystanie z nowego urządzenia.

Informacje o tym, jak dodać logowanie sfederowane do opcji rejestracji, znajdziesz w artykule Integrowanie Logowania przez Google z aplikacją internetową. Dostępnych jest wiele innych platform tożsamości.

Uprość przełączanie kont

Wielu użytkowników korzysta z tych samych urządzeń i przełącza się między kontami w tej samej przeglądarce. Niezależnie od tego, czy użytkownicy korzystają z logowania sfederowanego, czy nie, przełączanie kont powinno być proste.

Gmail z przełączaniem kont
Przełączanie kont w Gmailu

Rozważ wprowadzenie uwierzytelniania wielopoziomowego

Uwierzytelnianie wielopoziomowe oznacza, że użytkownicy muszą uwierzytelniać się na więcej niż 1 sposób. Oprócz wymagania od użytkownika ustawienia hasła możesz też wymusić weryfikację za pomocą jednorazowego kodu dostępu wysłanego e-mailem lub SMS-em albo za pomocą jednorazowego kodu z aplikacji, klucza bezpieczeństwa lub czytnika linii papilarnych. Instrukcje wdrażania uwierzytelniania wielopoziomowego znajdziesz w artykułach Sprawdzone metody dotyczące haseł jednorazowych SMS i Włączanie silnego uwierzytelniania za pomocą WebAuthn.

Jeśli Twoja witryna przetwarza dane osobowe lub informacje poufne, zdecydowanie musisz oferować (lub wymuszać) uwierzytelnianie wielopoziomowe.

Uważaj na nazwy użytkowników

Nie nalegaj na podanie nazwy użytkownika, chyba że jest to konieczne. Umożliwiaj użytkownikom rejestrację i logowanie się tylko przy użyciu adresu e-mail (lub numeru telefonu) i hasła albo logowanie sfederowane, jeśli wolą. Nie zmuszaj ich do wybierania i zapamiętywania nazwy użytkownika.

Jeśli Twoja witryna wymaga nazw użytkowników, nie narzucaj bezzasadnych reguł i nie uniemożliwiaj użytkownikom aktualizowania ich nazw. W backendzie należy wygenerować unikalny identyfikator dla każdego konta użytkownika, a nie identyfikator oparty na danych osobowych, takich jak nazwa użytkownika.

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

Prowadź testy w różnych przeglądarkach, na różnych urządzeniach i platformach

Przetestuj formularze rejestracji na platformach, z których najczęściej korzystają Twoi użytkownicy. Funkcje elementu formularza mogą się różnić, a różnice w rozmiarze widocznego obszaru mogą powodować problemy z układem. BrowserStack umożliwia bezpłatne testowanie projektów typu open source na różnych urządzeniach i w różnych przeglądarkach.

Zaimplementuj analizy i monitorowanie rzeczywistych użytkowników

Aby dowiedzieć się, jak użytkownicy korzystają z formularzy rejestracji, potrzebujesz danych z testów w terenie i danych laboratoryjnych. Analizy i monitorowanie rzeczywistych użytkowników (RUM) dostarczają danych o rzeczywistych wrażeniach użytkowników, np. o tym, ile czasu zajmuje wczytanie stron rejestracji, z którymi komponentami interfejsu użytkownicy wchodzą w interakcję (lub nie) oraz ile czasu zajmuje im ukończenie rejestracji.

Niewielkie zmiany mogą mieć duży wpływ na współczynnik wypełnień formularzy rejestracyjnych. Analizy i RUM umożliwiają optymalizację i ustalanie priorytetów zmian oraz monitorowanie witryny pod kątem problemów, które nie są wykrywane przez testy lokalne.

Ucz się dalej

Zdjęcie: @ecowarriorprincess, Unsplash