Sprawdzone metody dotyczące formularza rejestracyjnego

Pomóż użytkownikom zarejestrować się i logować na ich kontach oraz zarządzać ich danymi.

Sam Dutton

Jeśli użytkownicy muszą się kiedyś logować w witrynie, formularz rejestracji powinien być krytyczny. Dotyczy to zwłaszcza użytkowników korzystających ze słabych połączeń, pośpiechu lub stresu. Źle zaprojektowane formularze rejestracyjne mają wysoki współczynnik odrzuceń. Każde odrzucenie może oznaczać zgubnego i niezadowolonego użytkownika – nie tylko utraconą rejestrację. możliwość.

Oto przykład bardzo prostego formularza rejestracyjnego, który przedstawia 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 witrynie, zastanów się, bez względu na potrzebę. Gdy tylko jest to możliwe, unikaj ograniczania dostępu do funkcji wymagających logowania.

Najlepszym formularzem rejestracji nie jest formularz rejestracyjny.

Prosząc użytkownika o utworzenie konta, wchodzisz między nimi a tym, co chce osiągnąć. Prosisz użytkownika o przysługę i żeby powierzył Ci swoje dane osobowe. Wszystkie hasła i wszystkie elementy danych, które przechowujesz, skutkuje „długą danych” w zakresie ochrony prywatności i bezpieczeństwa, co staje się kosztem i odpowiedzialnością w Twojej witrynie.

Jeśli głównym powodem, dla którego prosisz użytkowników o utworzenie konta, jest zapisywanie informacji między elementami nawigacji lub sesji przeglądania, zastanów się nad korzystaniem z pamięci po stronie klienta. Na zakupy witryny, zmuszające użytkowników do utworzenia konta w celu dokonania zakupu, jest wymieniana jako główny powód dokonania zakupu porzucania koszyka. Ustaw opcję Zapłać bez logowania jako domyślną.

Logowanie jest oczywiste

Wyjaśnij, jak utworzyć konto w witrynie, na przykład za pomocą lub logowania. w prawym górnym rogu strony. Unikaj niejednoznacznych ikon i niejasnych sformułowań (np. „Dołącz do nas”) i nie ukrywaj loginu w menu nawigacyjnym. Steve Krug, ekspert ds. użyteczności, podsumował takie podejście do użyteczności witryny: Nie zmuszaj mnie do myślenia! W razie potrzeby przekonania innych osób ze swojego zespołu ds. witryny, skorzystaj ze statystyk, aby wykazać wpływ .

Dwa zrzuty ekranu przedstawiające przykładową witrynę e-commerce na telefonie z Androidem. Ta po lewej ma nieco niejednoznaczny charakter linku logowania. ta po prawej ma tylko „Zaloguj się”
Logowanie musi być oczywiste. Ikona może być niejednoznaczna, ale znak w czy link jest oczywisty.
. .
Zrzuty ekranu przedstawiające logowanie do Gmaila: jedna strona z przyciskiem Zaloguj się, gdy kliknięcie prowadzi do formularza z linkiem 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ę oraz link Utwórz konta.

Połącz konta dla użytkowników, którzy zarejestrowali się za pośrednictwem dostawcy tożsamości, takiego jak Google, możesz też zarejestrować się przy użyciu adresu e-mail i hasła. Jest to łatwe, jeśli masz 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 zalogowanego przez Google.

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

Jasno wyjaśnij, jak uzyskać dostęp do danych konta.

Po zalogowaniu się wyraźnie określ, jak użytkownik może uzyskać dostęp do danych na koncie. Przede wszystkim zadbaj o to, To oczywiste, jak zmienić lub zresetować hasła.

Zredukuj bałagan

Podczas rejestracji Twoim zadaniem jest ograniczenie złożoności aplikacji i skupienie się na użytkowniku. Pozbądź się bałaganu. To nie jest czas na rozpraszanie uwagi i pokusy!

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

Podczas rejestracji poproś o jak najmniejsze informacje. Zbieranie dodatkowych danych użytkownika (takich jak imię i nazwisko oraz adres) tylko wtedy, gdy jest to konieczne i gdy użytkownik zauważy wyraźną korzyść z dostarczenia tych danych. Pamiętaj że każdy element przesyłanych i przechowywanych danych wiąże się z kosztami i odpowiedzialnością.

Nie podwajaj wpisywanych danych tylko po to, by mieć pewność, że użytkownicy będą podawać prawidłowe dane kontaktowe. To się spowalnia nie ma sensu, jeśli pola są wypełniane automatycznie. Zamiast tego wyślij potwierdzenie po podaniu danych kontaktowych użytkownikowi, a następnie kontynuuj tworzenie konta. po ich zareagowaniu. To typowy wzorzec rejestracji: użytkownicy są do niego przyzwyczajeni.

Warto rozważyć logowanie bez hasła – w tym celu przy każdym logowaniu użytkownik będzie otrzymywać kod nowego urządzenia lub przeglądarki. Witryny takie jak Slack i Medium korzystają z tej wersji.

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

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

Uwzględnij długość sesji

Niezależnie od podejścia do tożsamości użytkownika musisz podjąć przemyślaną decyzję co do sesji. długość: jak długo użytkownik pozostaje zalogowany i co może spowodować jego wylogowanie.

Zastanów się, czy Twoi użytkownicy korzystają z komórek, czy z komputerów udostępniane na komputerze lub na innych urządzeniach.

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

Możesz pomóc firmom zewnętrznym i wbudowanym menedżerom haseł w sugerowaniu i zapisywaniu haseł, użytkownicy nie muszą samodzielnie wybierać, zapamiętywać ani wpisywać haseł. Menedżery haseł działają nowoczesnych przeglądarek, synchronizowania kont na różnych urządzeniach, korzystania z określonych platform i aplikacji internetowych w przypadku nowych urządzeń.

Dlatego niezwykle ważne jest poprawne kodowanie formularzy rejestracyjnych, a zwłaszcza użycie poprawnego autouzupełniania. W formularzach rejestracyjnych używaj nowego hasła: autocomplete="new-password", a następnie dodaj Gdy tylko jest to możliwe, popraw wartości autouzupełniania w innych polach formularza, takie jak autocomplete="email" i autocomplete="tel". Możesz też pomóc menedżerom haseł, używając różnych name i id wartości w formularzach rejestracji i logowania, dla samego elementu form oraz dla dowolnych input i select i textarea elementów.

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

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

Najlepszym rozwiązaniem jest umożliwienie menedżerom haseł sugerowania haseł. i zaakceptować silne hasła sugerowane przez przeglądarki i menedżerów przeglądarek innych firm.

Jednak wielu użytkowników chce wpisywać własne hasła, dlatego musisz wdrożyć reguły dotyczące haseł i jego sił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 wybranych reguł dotyczących haseł nigdy nie należy zezwalać na używanie haseł, które zostały ujawnione naruszenia bezpieczeństwa.

Gdy użytkownik poda hasło, musisz sprawdzić, czy nie jest ono już używane przejętych. Witryna have I Been Pwned udostępnia interfejs API do obsługi haseł. Możesz też samodzielnie uruchomić tę usługę jako usługę.

Menedżer haseł Google umożliwia też sprawdzenie, czy któreś z Twoich haseł nie zostało przejętych kont.

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

Wyjaśnij, dlaczego hasło zostało odrzucone.

Nie zabraniaj wklejania hasła

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

Uniemożliwienie wklejania haseł irytuje użytkowników, zachęca do zapadania w pamięć haseł mogą być trudniejsze do naruszenia), a według organizacji takich jak UK National Cyber Security Centre może też zmniejszać bezpieczeństwo. Użytkownicy dowiadują się, że wklejanie jest zabronione po próbie wklejenia hasła, Nie pozwala to uniknąć luk w zabezpieczeniach schowka.

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

Sól i szyfruj hasła – i nie wymyślaj własnego algorytmu haszowania.

Nie wymuszaj aktualizacji haseł

Nie wymuszaj na użytkownikach samodzielnego aktualizowania haseł.

Wymuszanie aktualizacji haseł może być kosztowne dla działów IT, irytujące dla użytkowników i nie wymaga dużo pracy. wpływ na bezpieczeństwo. Mogą one też zachęcić odbiorcó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. W miarę możliwości sprawdzaj też, czy hasła nie zostały przejęte w wyniku naruszenia bezpieczeństwa danych.

Zapewnij też użytkownikom dostęp do historii logowania się na konto, pokazując im, gdzie i kiedy się zalogował.

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

Ułatwianie zmiany i resetowania haseł

Wyjaśnij użytkownikom, gdzie i jak zmienić hasło do konta. W niektórych witrynach zaskakująco trudne.

Należy też oczywiście ułatwić użytkownikom zresetowanie hasła, jeśli je zapomnieli. Projekt Open Web Application Security Project zapewnia szczegółowe wskazówki, jak postępować w przypadku utraty hasła.

Ze względu na bezpieczeństwo firmy i użytkowników jest szczególnie ważne, aby pomagać im w i hasła, jeśli odkryją, że zostało ono przejęte. Aby to ułatwić, dodaj /.well-known/change-password URL prowadzący do która przekierowuje na stronę zarządzania hasłami. Pozwoli to menedżerom haseł na poruszanie się użytkowników bezpośrednio na stronę, na której mogą zmienić swoje hasło do witryny. Ta funkcja jest jest teraz zaimplementowany w Safari i Chrome, a wkrótce pojawi się w innych przeglądarkach. Pomaganie użytkownikom w zmianie haseł dodając dobrze znany adres URL do zmiany hasła. wyjaśnia, jak za jego wdrożenie.

Trzeba też ułatwić użytkownikom usunięcie konta, jeśli tego chcą.

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

Wielu użytkowników woli logować się na stronach za pomocą adresu e-mail i formularza rejestracji hasła. Należy jednak umożliwić użytkownikom logowanie się za pomocą zewnętrznego dostawcy tożsamości, zwanego również logowanie sfederowane.

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 za pomocą sfederowanego logowania, nie muszą prosić o hasło, podawać je ani przechowywać.

Za pomocą logowania sfederowanego możesz też uzyskać dostęp do dodatkowych informacji zweryfikowanych, takich jak jako adres e-mail, co oznacza, że użytkownik nie musi wprowadzać tych danych, a Ty nie musisz tego robić. samodzielnie przeprowadzić weryfikację. Logowanie sfederowane może też znacznie ułatwić użytkownikom korzystanie z nowego urządzenia.

Integracja Logowania przez Google z aplikacją internetową zawiera opis sposobu dodawania logowania sfederowanego do opcji rejestracji. Dostępnych jest wiele innych platform tożsamości.

Proste przeniesienie kont

Wielu użytkowników współużytkuje urządzenia i przełącza się między kontami w tej samej przeglądarce. Dostęp użytkowników logowania sfederowanego, zmiana kont powinna być prosta.

Gmail z wyświetloną opcją przełączania 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 albo za pomocą jednorazowego kodu w aplikacji kodu, klucza bezpieczeństwa lub czytnika linii papilarnych. Sprawdzone metody tworzenia haseł jednorazowych przy użyciu SMS-ów oraz Włączanie silnego uwierzytelniania przy użyciu WebAuthn Wyjaśnimy, jak wdrożyć uwierzytelnianie wielopoziomowe.

Jeśli Twoja witryna obsługuje osobiste lub informacji poufnych.

Uważaj na nazwy użytkowników

Nie nalegaj na nazwę użytkownika, chyba że jest Ci potrzebna (lub dopóki jej nie potrzebujesz). Pozwól użytkownikom na rejestrowanie się i logowanie się tylko adres e-mail (lub numer telefonu) i hasło – albo logowanie sfederowane. jeśli chcą. Nie wymuszaj na nich wyboru i zapamiętania nazwy użytkownika.

Jeśli Twoja witryna wymaga podawania nazw użytkowników, nie nakładaj na nie bezzasadnych reguł ani nie zatrzymuj użytkowników. aktualizacji swojej nazwy użytkownika. Na backendzie musisz wygenerować unikalny identyfikator dla każdego konta użytkownika, a nie identyfikatora opartego na danych osobowych, takich jak nazwa użytkownika.

Pamiętaj też, by nazwy użytkowników wpisać autocomplete="username".

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

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

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

Potrzebne będą dane pól oraz dane laboratoryjne aby dowiedzieć się, jak użytkownicy odbierają formularze rejestracyjne. Analytics i monitorowanie rzeczywistych użytkowników (RUM) dostarczają danych o rzeczywistych wrażeniach użytkowników, takich jak czas potrzebny do rejestracji na stronie wczytywania, z którymi komponentami interfejsu użytkownika (lub nie) oraz ile czasu zajmuje jego ukończenie, rejestracji.

Niewielkie zmiany mogą mieć duży wpływ na współczynnik wypełniania formularzy rejestracyjnych. Analytics i RUM pozwalają optymalizować i określać priorytety zmian, a także monitorować witrynę pod kątem problemów, ale są też poddawane testom lokalnym.

Ucz się dalej

Autor zdjęcia: @ecowarriorprincess, Unsplash.