Sprawdzone metody dotyczące formularza rejestracyjnego

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

Sam Dutton

Jeśli użytkownicy muszą logować się w Twojej witrynie, musisz zadbać o odpowiednie zaprojektowanie formularza rejestracyjnego. Dotyczy to zwłaszcza osób, które mają słabe połączenie, korzystają z telefonu komórkowego, są w pośpiechu lub są zestresowane. Źle zaprojektowane formularze rejestracyjne mają wysoki współczynnik odrzuceń. Każdy odskok może oznaczać utratę niezadowolonego użytkownika, a nie tylko utratę możliwości rejestracji.

Oto przykład bardzo prostego formularza rejestracyjnego, który zawiera wszystkie sprawdzone metody:

Lista kontrolna

Jeśli możesz, nie loguj się

Zanim wdrożysz formularz rejestracji i poprosisz użytkowników o utworzenie konta w swojej witrynie, zastanów się, czy na pewno jest to konieczne. W miarę możliwości unikaj stosowania funkcji wymagających logowania.

Najlepszy formularz rejestracji to brak formularza rejestracyjnego.

Prosząc użytkownika o utworzenie konta, wchodzisz między nimi a tym, co chce osiągnąć. prosisz o łaskę i prosisz użytkownika, aby zaufał Ci w sprawie danych osobowych; Każde hasło i każdy element przechowywanych danych wiąże się z „zadłużeniem danych” w zakresie prywatności i bezpieczeństwa, co staje się kosztem i zobowiązaniem Twojej witryny.

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

Ułatwienie logowania

Określ wyraźnie, jak utworzyć konto w witrynie, np. za pomocą przycisku Zaloguj się lub Zaloguj się w prawym górnym rogu strony. Unikaj niejednoznacznych ikon lub niejasnych sformułowań („Dołącz do nas!”, „Dołącz do nas”) i nie ukrywać logowania w menu nawigacyjnym. Ekspert ds. użyteczności Steve Krug podsumował to podejście do użyteczności witryny w ten sposób: Nie zmuszaj mnie do myślenia! Jeśli chcesz przekonać innych członków zespołu ds. stron internetowych, użyj analiz, aby pokazać wpływ różnych opcji.

Dwa zrzuty ekranu przedstawiające przykładową witrynę e-commerce na telefonie z Androidem. Ta po lewej, z ikoną linku logowania, która jest nieco niejednoznaczna, a ta po prawej zawiera tylko napis „Zaloguj się”.
Ułatwij logowanie. Ikona może być niejednoznaczna, ale link lub przycisk Zaloguj się jest oczywisty.
Zrzuty ekranu logowania do Gmaila: strona z przyciskiem Logowanie, który po kliknięciu prowadzi do formularza zawierającego też link Utwórz konto.
Na stronie logowania w Gmailu znajduje się link umożliwiający utworzenie konta.
W oknach większych niż pokazany tutaj Gmail wyświetla link Zaloguj się i przycisk Utwórz konto.

Upewnij się, że konta użytkowników, którzy rejestrują się za pomocą dostawcy tożsamości, takiego jak Google, są połączone. Użytkownicy powinni też rejestrować się za pomocą adresu e-mail i hasła. Możesz to łatwo zrobić, jeśli możesz uzyskać dostęp do adresu e-mail użytkownika z danych profilowych dostawcy tożsamości i dopasować oba konta. Poniżej znajduje się kod, który pokazuje, jak uzyskać dostęp do danych e-mailowych 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;

Po zalogowaniu się wyraźnie określ, jak użytkownik może uzyskać dostęp do danych na koncie. W szczególności należy wyraźnie wskazać, jak zmieniać i resetować hasła.

Ograniczenie bałaganu w formularzach

Podczas rejestracji Twoim zadaniem jest ograniczenie złożoności i skupienie się na użytkowniku. ograniczenie bałaganu; To nie jest czas na rozpraszanie i kusicielskie pokusy.

Nie rozpraszaj użytkowników podczas 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 wyraźnie widzi korzyści z ich udostępnienia. Pamiętaj, że każda przesyłana i przechowywana przez Ciebie informacja wiąże się z kosztami i odpowiedzialnością.

Nie podawaj podwójnych danych tylko po to, aby mieć pewność, że użytkownicy otrzymają prawidłowe dane kontaktowe. To spowalnia wypełnianie formularza i nie ma sensu, jeśli pola formularza są wypełniane automatycznie. Zamiast tego wyślij użytkownikowi kod potwierdzenia, gdy podał swoje dane kontaktowe, a gdy odpowie, kontynuuj tworzenie konta. Jest to typowy sposób rejestracji, do którego użytkownicy są przyzwyczajeni.

Możesz rozważyć logowanie bez hasła – w tym celu wysyłaj 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 korzystają z tej wersji.

Logowanie bez hasła na medium.com

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

Rozważ długość sesji

Niezależnie od tego, jakie podejście zastosujesz w przypadku tożsamości użytkownika, musisz podjąć przemyślaną decyzję dotyczącą długości sesji: jak długo użytkownik ma pozostać zalogowany i co może spowodować wylogowanie.

Zastanów się, czy użytkownicy korzystają z urządzeń mobilnych czy komputerów oraz czy udostępniają treści na komputerze czy na urządzeniach.

Pomóż menedżerom haseł w bezpiecznym sugerowaniu i przechowywaniu haseł

Możesz pomóc menedżerom haseł innych firm i wbudowanym menedżerom haseł w przeglądarce w sugerowaniu i przechowywaniu haseł, dzięki czemu użytkownicy nie muszą ich wybierać, zapamiętywać ani wpisywać samodzielnie. Menedżery haseł dobrze działają w nowoczesnych przeglądarkach, synchronizując konta na różnych urządzeniach, w aplikacjach na różne platformy i w aplikacjach internetowych, a także na nowych urządzeniach.

Dlatego niezwykle ważne jest poprawne kodowanie formularzy rejestracyjnych, a w szczególności używanie prawidłowych wartości autouzupełniania. W formularzach rejestracyjnych używaj wartości autocomplete="new-password" dla nowych haseł i w miarę możliwości dodawaj do innych pól formularza prawidłowe wartości autouzupełniania, np. autocomplete="email" i autocomplete="tel". Możesz też pomagać menedżerom haseł, używając różnych wartości name i id w formularzach rejestracji i logowania, dla elementu form oraz dowolnych elementów input, select i textarea.

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

Zapewnianie użytkownikom możliwości wpisywania bezpiecznych haseł

Najlepszym rozwiązaniem jest włączenie sugerowania haseł przez menedżerów haseł. Zachęcaj użytkowników do akceptowania silnych haseł sugerowanych przez przeglądarki i menedżerów przeglądarek innych firm.

Wielu użytkowników chce jednak wpisywać własne hasła, dlatego musisz wdrożyć zasady dotyczące ich siły. Amerykański Narodowy Instytut Standaryzacji i Technologii wyjaśnia, jak unikać słabych 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 bezpieczeństwa.

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

Menedżer haseł Google pozwala też sprawdzać, czy któreś z Twoich dotychczasowych haseł nie zostało ujawnione.

Jeśli odrzucisz hasło zaproponowane przez użytkownika, wyjaśnij mu dokładnie, dlaczego zostało odrzucone. Pokazuj problemy w tekście i wyjaśnij, jak je rozwiązać, gdy tylko użytkownik wprowadzi wartość, a nie po przesłaniu formularza rejestracyjnego i czekaniu na odpowiedź serwera.

Podaj powód odrzucenia hasła.

Nie blokuj wklejania haseł

Niektóre witryny nie zezwalają na wklejanie tekstu w polu z hasłem.

Zabranie użytkownikom wklejania haseł denerwuje ich, zachęca do tworzenia haseł łatwych do zapamiętania (a zatem podatnych na przechwycenie) i może w ogóle obniżać poziom bezpieczeństwa (co potwierdzają organizacje takie jak brytyjskie Narodowe Centrum Bezpieczeństwa Cybernetycznego). Użytkownicy dowiadują się o tym, że wklejanie jest zabronione, dopiero po próbie wklejenia hasła. Zabranie wklejania haseł nie zapobiega wykorzystywaniu luk w buforze wymiany.

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

Pamiętaj, aby zastosować sól i zrobić haszowanie haseł. Nie próbuj tworzyć własnego algorytmu haszowania.

Nie wymuszaj aktualizacji haseł

Nie zmuszaj użytkowników do arbitralnej zmiany haseł.

Wymuszanie aktualizacji haseł może być kosztowne dla działów IT, irytować użytkowników i nie ma większego wpływu na bezpieczeństwo. Może też zachęcać użytkowników do używania niezabezpieczonych haseł, które można zapamiętać, lub do fizycznego przechowywania haseł.

Zamiast wymuszać zmianę haseł, lepiej monitoruj aktywność na koncie i ostrzegaj użytkowników. Jeśli to możliwe, sprawdzaj też hasła, które zostały przejęte w wyniku naruszenia bezpieczeństwa danych.

Użytkownikom należy też udostępnić historię logowania na konto, pokazując, kiedy i gdzie nastąpiło logowanie.

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

Ułatwienie zmiany i zresetowania haseł

Określ, gdzie i jak użytkownicy mogą zmienić hasło do konta. W przypadku niektórych witryn jest to zaskakująco trudne.

Oczywiście musisz też umożliwić użytkownikom zresetowanie hasła, jeśli je zapomną. Projekt Open Web Application Security Project zawiera szczegółowe wskazówki dotyczące radzenia sobie z utratą hasła.

Aby zapewnić bezpieczeństwo Twojej firmie i użytkownikom, musisz pomóc im zmienić hasło, jeśli dowiedzą się, że zostało ono złamane. Aby ułatwić to zadanie, dodaj do swojej witryny adres URL /.well-known/change-password, który przekierowuje do strony zarządzania hasłami. Dzięki temu menedżerowie haseł mogą przekierowywać użytkowników bezpośrednio na stronę, na której mogą zmienić hasło do Twojej witryny. Ta funkcja jest teraz dostępna w Safari i Chrome, a wkrótce pojawi się też w innych przeglądarkach. Artykuł Pomóż użytkownikom łatwo zmieniać hasła, dodając znany adres URL do zmiany hasła wyjaśnia, jak to zrobić.

Użytkownikom musisz też ułatwić usuwanie konta, jeśli tego chcą.

Oferowanie logowania za pomocą zewnętrznych dostawców tożsamości

Wielu użytkowników woli logować się na stronach internetowych, korzystając z formularza rejestracyjnego zawierającego adres e-mail i hasło. Musisz jednak też umożliwić użytkownikom logowanie się za pomocą zewnętrznego dostawcy tożsamości, czyli logowania federowanego.

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 tworzą konto za pomocą logowania federacyjnego, nie musisz prosić o hasła, przekazywać ich ani ich przechowywać.

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

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

Proste przeniesienie 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 logują się za pomocą logowania federacyjnego, czy nie, upewnij się, że zmiana konta jest prosta.

Gmail – przełączanie kont
Przełączanie kont w Gmailu.

Zastanów się nad włączeniem uwierzytelniania wielopoziomowego

Uwierzytelnianie wielopoziomowe polega na tym, że użytkownicy muszą uwierzytelniać się na więcej niż jeden 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 bądź za pomocą jednorazowego kodu aplikacji, klucza bezpieczeństwa lub czytnika linii papilarnych. W artykułach sprawdzonych metod dotyczących jednorazowego hasła SMS i Włączanie uwierzytelniania silnego za pomocą WebAuthn znajdziesz informacje o wdrażaniu uwierzytelniania wielopoziomowego.

Jeśli Twoja witryna ma dostęp do danych osobowych lub informacji poufnych, powinna oferować (lub wymagać) uwierzytelniania wielopoziomowego.

Uważaj na nazwy użytkowników

Nie nalegaj na użycie nazwy użytkownika, chyba że jest ona potrzebna. Umożliwiaj użytkownikom rejestrowanie się i logowanie przy użyciu samego adresu e-mail (lub numeru telefonu) i hasła – lub logowania sfederowanego, jeśli chcą. Nie wymuszaj na nich wyboru i zapamiętania nazwy użytkownika.

Jeśli Twoja witryna wymaga nazw użytkowników, nie narzucaj nierozsądnych zasad i nie uniemożliwiaj użytkownikom aktualizowania nazwy użytkownika. Na zapleczu 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 używać znaku autocomplete="username" w nazwach użytkowników.

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

Przetestuj formularze rejestracyjne na platformach, które są najczęściej używane przez Twoich użytkowników. Funkcje elementów 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 open source na różnych urządzeniach i w różnych przeglądarkach.

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

Potrzebne są dane pól oraz dane laboratoryjne, aby zrozumieć, jak użytkownicy korzystają z formularzy rejestracyjnych. Analytics i monitorowanie użytkowników (RUM) dostarczają danych o rzeczywistych wrażeniach użytkowników, np. o czasie wczytywania stron rejestracji, komponentach interfejsu, z którymi użytkownicy się stykają (lub nie) oraz o czasie, jaki zajmuje im rejestracja.

Drobne zmiany mogą mieć duży wpływ na współczynniki wypełnienia formularzy rejestracyjnych. Analytics i RUM umożliwiają optymalizację zmian i ustalanie ich priorytetów oraz monitorowanie witryny pod kątem problemów, które nie są widoczne podczas testów lokalnych.

Ucz się dalej

Zdjęcie: @ecowarriorprincess z Unsplash.