Sprawdzone metody dotyczące formularzy logowania

Korzystaj z funkcji przeglądarki na wielu platformach, aby tworzyć formularze logowania, które są bezpieczne, dostępne i łatwe w użyciu.

Sam Dutton

Jeśli użytkownicy muszą logować się w Twojej witrynie, dobrze zaprojektowany formularz logowania 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 logowania 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 prostego formularza logowania, prezentujący wszystkie sprawdzone metody:

Lista kontrolna

• Używaj znaczących elementów HTML: <form>, <input>, <label> i <button>.
• Oznacz każde pole wejściowe za pomocą elementu <label>.
• Używaj atrybutów elementów, aby uzyskać dostęp do wbudowanych funkcji przeglądarki: type, name, autocomplete, required.
• Nadaj atrybutom wejściowym name i id stabilne wartości, które nie zmieniają się między wczytaniami strony ani wdrożeniami witryny.
• Umieść logowanie w osobnym elemencie <form>.
• Zadbaj o prawidłowe przesyłanie formularza.
• Użyj autocomplete="new-password" i id="new-password" w przypadku pola do wpisywania hasła w formularzu rejestracji oraz nowego hasła w formularzu resetowania hasła.
• Użyj autocomplete="current-password" i id="current-password" do wprowadzania hasła logowania.
• Zapewnij funkcję Pokaż hasło.
• Używaj aria-label i aria-describedby do wprowadzania haseł.
• Nie dubluj danych wejściowych.
• Projektuj formularze tak, aby klawiatura mobilna nie zasłaniała pól do wprowadzania danych ani przycisków.
• Upewnij się, że formularze są użyteczne na urządzeniach mobilnych: używaj czytelnego tekstu i zadbaj o to, aby pola i przyciski były wystarczająco duże, aby można było je kliknąć.
• Zachowaj markę i styl na stronach rejestracji i logowania.
• Prowadź testy w terenie i w laboratorium: uwzględnij w procesie rejestracji i logowania statystyki stron, statystyki interakcji i pomiary wydajności pod kątem użytkownika.
• Testuj w różnych przeglądarkach i na różnych urządzeniach: działanie formularzy różni się znacznie w zależności od platformy.

Używanie znaczących znaczników HTML

Używaj elementów stworzonych do tego celu: <form>, <label> i <button>. Umożliwiają one korzystanie z wbudowanych funkcji przeglądarki, poprawiają ułatwienia dostępu i nadają znaczenie znacznikom.

Otwórz <form>

Możesz ulec pokusie, aby umieścić pola wejściowe w elemencie <div> i obsługiwać przesyłanie danych wejściowych wyłącznie za pomocą JavaScriptu. Zwykle lepiej jest użyć zwykłego elementu <form>. Dzięki temu witryna jest dostępna dla czytników ekranu i innych urządzeń wspomagających, umożliwia korzystanie z szeregu wbudowanych funkcji przeglądarki, upraszcza tworzenie podstawowych funkcji logowania w starszych przeglądarkach i może działać nawet wtedy, gdy JavaScript nie działa.

Otwórz <label>

Aby oznaczyć dane wejściowe, użyj elementu <label>.

<label for="email">Email</label>
<input id="email" …>

Z 2 powodów:

• Kliknięcie etykiety powoduje przeniesienie zaznaczenia do jej pola wprowadzania. Powiąż etykietę z polem wejściowym, używając atrybutu for etykiety z atrybutem name lub id pola wejściowego.
• Czytniki ekranu odczytują tekst etykiety, gdy etykieta lub jej pole wejściowe zostaną zaznaczone.

Nie używaj obiektów zastępczych jako etykiet danych wejściowych. Użytkownicy mogą zapomnieć, do czego służy dane pole, gdy zaczną wpisywać tekst, zwłaszcza jeśli coś ich rozproszy („Czy wpisuję adres e-mail, numer telefonu czy identyfikator konta?”). Istnieje wiele innych potencjalnych problemów z obiektami zastępczymi. Jeśli nie masz pewności, przeczytaj artykuły Don't Use The Placeholder Attribute (Nie używaj atrybutu obiektu zastępczego) i Placeholders in Form Fields Are Harmful (Obiekty zastępcze w polach formularza są szkodliwe).

Najlepiej umieścić etykiety nad polami wejściowymi. Zapewnia to spójny wygląd na urządzeniach mobilnych i komputerach, a według badań nad sztuczną inteligencją Google umożliwia użytkownikom szybsze skanowanie. Etykiety i pola wejściowe mają pełną szerokość i nie trzeba dostosowywać ich szerokości do tekstu etykiety.

Aby przekonać się, jak to działa, otwórz wersję demonstracyjną label-position na urządzeniu mobilnym.

Otwórz <button>

Użyj <button>, aby utworzyć przyciski. Elementy przycisków zapewniają ułatwienia dostępu i wbudowaną funkcję przesyłania formularzy, a ich styl można łatwo dostosować. Nie ma sensu używać elementu <div> ani innego elementu, który udaje przycisk.

Upewnij się, że przycisk przesyłania informuje o swoim działaniu. Przykłady: Utwórz konto lub Zaloguj się, a nie Prześlij lub Rozpocznij.

Zapewnianie prawidłowego przesyłania formularzy

Pomóż menedżerom haseł zrozumieć, że formularz został przesłany. Możesz to zrobić na 2 sposoby:

• Otwórz inną stronę.
• Zasymuluj nawigację za pomocą History.pushState() lub History.replaceState() i usuń formularz hasła.

W przypadku żądania XMLHttpRequest lub fetch upewnij się, że w odpowiedzi jest zgłaszane pomyślne logowanie i jest ono obsługiwane przez usunięcie formularza z DOM oraz poinformowanie użytkownika o powodzeniu.

Rozważ wyłączenie przycisku Zaloguj się, gdy użytkownik go kliknie. Wielu użytkowników klika przyciski wielokrotnie, nawet na stronach, które są szybkie i responsywne. Spowalnia to interakcje i zwiększa obciążenie serwera.

Nie wyłączaj też przesyłania formularza, gdy oczekujesz na dane wejściowe użytkownika. Na przykład nie wyłączaj przycisku Zaloguj się, jeśli użytkownicy nie wpisali kodu PIN klienta. Użytkownicy mogą pominąć coś w formularzu, a następnie wielokrotnie klikać (wyłączony) przycisk Zaloguj się i myśleć, że nie działa. Jeśli musisz wyłączyć przesyłanie formularza, wyjaśnij użytkownikowi, czego brakuje, gdy kliknie wyłączony przycisk.

Nie dubluj danych wejściowych

Niektóre witryny wymagają od użytkowników dwukrotnego wpisania adresu e-mail lub hasła. Może to zmniejszyć liczbę błędów u niektórych użytkowników, ale powoduje dodatkową pracę dla wszystkich użytkowników i zwiększa współczynnik porzuceń. Dwukrotne pytanie o adres e-mail nie ma też sensu, gdy przeglądarki automatycznie uzupełniają adresy e-mail lub sugerują silne hasła. Lepiej jest umożliwić użytkownikom potwierdzenie adresu e-mail (i tak trzeba będzie to zrobić) i ułatwić im zresetowanie hasła, jeśli będzie to konieczne.

Wykorzystaj w pełni atrybuty elementów

To tutaj dzieje się magia. Przeglądarki mają wiele przydatnych wbudowanych funkcji, które korzystają z atrybutów elementów wejściowych.

zachowywać prywatność haseł, ale umożliwiać użytkownikom ich wyświetlanie, jeśli chcą;

Pola do wprowadzania haseł powinny mieć atrybut type="password", aby ukryć tekst hasła i pomóc przeglądarce zrozumieć, że pole jest przeznaczone na hasła. (Pamiętaj, że przeglądarki używają różnych technik, aby zrozumieć role danych wejściowych i zdecydować, czy zaproponować zapisanie haseł).

Warto dodać przełącznik Pokaż hasło, aby użytkownicy mogli sprawdzić wpisany tekst. Nie zapomnij też o linku Nie pamiętam hasła. Zobacz Włączanie wyświetlania hasła.

Udostępnianie użytkownikom urządzeń mobilnych odpowiedniej klawiatury

Użyj <input type="email">, aby zapewnić użytkownikom urządzeń mobilnych odpowiednią klawiaturę i włączyć podstawową wbudowaną weryfikację adresu e-mail przez przeglądarkę – bez konieczności używania JavaScriptu.

Jeśli zamiast adresu e-mail musisz użyć numeru telefonu, <input type="tel"> umożliwia korzystanie z klawiatury telefonu na urządzeniu mobilnym. W razie potrzeby możesz też użyć atrybutu inputmode: inputmode="numeric" idealnie nadaje się do kodów PIN. Więcej informacji znajdziesz w artykule Everything You Ever Wanted to Know About inputmode.

Zapobieganie zasłanianiu przycisku Zaloguj się przez klawiaturę mobilną

Jeśli nie zachowasz ostrożności, klawiatury mobilne mogą zasłonić formularz lub, co gorsza, częściowo zasłonić przycisk Zaloguj się. Użytkownicy mogą się poddać, zanim zorientują się, co się stało.

Jeśli to możliwe, unikaj tego, wyświetlając u góry strony logowania tylko pola adresu e-mail (lub numeru telefonu) i hasła oraz przycisk Zaloguj się. Inne treści umieść poniżej.

Testowanie na różnych urządzeniach

Musisz przetestować aplikację na różnych urządzeniach docelowych odbiorców i odpowiednio ją dostosować. BrowserStack umożliwia bezpłatne testowanie projektów open source na różnych rzeczywistych urządzeniach i w różnych przeglądarkach.

Rozważ użycie 2 stron

Niektóre witryny (w tym Amazon i eBay) unikają tego problemu, prosząc o adres e-mail (lub numer telefonu) i hasło na 2 stronach. Takie podejście upraszcza też proces: użytkownik musi wykonać tylko jedno zadanie naraz.

Najlepiej zaimplementować to za pomocą jednego elementu <form>. Użyj JavaScriptu, aby początkowo wyświetlić tylko pole do wpisania adresu e-mail, a następnie ukryć je i wyświetlić pole do wpisania hasła. Jeśli musisz wymusić na użytkowniku przejście na nową stronę między wpisaniem adresu e-mail a hasła, formularz na drugiej stronie powinien zawierać ukryty element wejściowy z wartością adresu e-mail, aby umożliwić menedżerom haseł zapisanie prawidłowej wartości. W artykule Password Form Styles that Chromium Understands (Style formularzy haseł, które Chromium rozumie) znajdziesz przykładowy kod.

Pomaganie użytkownikom w unikaniu ponownego wprowadzania danych

Możesz pomóc przeglądarkom prawidłowo przechowywać dane i autouzupełniać dane wejściowe, aby użytkownicy nie musieli pamiętać o wpisywaniu adresu e-mail i hasła. Jest to szczególnie ważne na urządzeniach mobilnych i ma kluczowe znaczenie w przypadku pól do wpisywania adresów e-mail, które mają wysoki współczynnik porzuceń.

Składa się on z 2 części:

1. Atrybuty autocomplete, name, id i type pomagają przeglądarkom zrozumieć rolę danych wejściowych, aby mogły przechowywać dane, które później można wykorzystać do autouzupełniania. Aby umożliwić przechowywanie danych na potrzeby autouzupełniania, nowoczesne przeglądarki wymagają też, aby dane wejściowe miały stabilną wartość name lub id (nie generowaną losowo przy każdym wczytaniu strony lub wdrożeniu witryny) i znajdowały się w elemencie <form> z przyciskiem submit.

2. Atrybut autocomplete pomaga przeglądarkom prawidłowo autouzupełniać dane wejściowe za pomocą przechowywanych danych.

W przypadku pól do wpisywania adresu e-mail używaj autocomplete="username", ponieważ username jest rozpoznawany przez menedżery haseł w nowoczesnych przeglądarkach – mimo że należy używać type="email" i możesz chcieć używać id="email" i name="email".

W przypadku pól do wpisywania haseł używaj odpowiednich wartości autocomplete i id, aby ułatwić przeglądarkom odróżnianie nowych haseł od obecnych.

Użyj autocomplete="new-password" i id="new-password", aby utworzyć nowe hasło

• Użyj autocomplete="new-password" i id="new-password" w przypadku pola hasła w formularzu rejestracji lub nowego hasła w formularzu zmiany hasła.

Użyj klawiszy autocomplete="current-password" i id="current-password", aby wybrać istniejące hasło

• Użyj autocomplete="current-password" i id="current-password" w przypadku pola do wpisywania hasła w formularzu logowania lub pola do wpisywania starego hasła użytkownika w formularzu zmiany hasła. W ten sposób informujesz przeglądarkę, że chcesz użyć bieżącego hasła zapisanego dla tej witryny.

W przypadku formularza rejestracji:

<input type="password" autocomplete="new-password" id="new-password" …>

Logowanie:

<input type="password" autocomplete="current-password" id="current-password" …>

Obsługa menedżerów haseł

Różne przeglądarki obsługują autouzupełnianie adresów e-mail i sugerowanie haseł w nieco inny sposób, ale efekty są bardzo podobne. Na przykład w Safari 11 i nowszych wersjach na komputerze wyświetlany jest menedżer haseł, a następnie używane jest uwierzytelnianie biometryczne (rozpoznawanie odcisków palców lub twarzy), jeśli jest dostępne.

Chrome na komputerze wyświetla sugestie dotyczące adresu e-mail, pokazuje menedżera haseł i automatycznie uzupełnia hasło.

Systemy haseł i autouzupełniania w przeglądarkach nie są proste. Algorytmy odgadywania, przechowywania i wyświetlania wartości nie są ustandaryzowane i różnią się w zależności od platformy. Jak zauważa Hidde de Vries: „Menedżer haseł Firefoksa uzupełnia swoje heurystyki systemem przepisów”.

Więcej informacji o używaniu atrybutów name i autocomplete znajdziesz w artykule Autofill: What web devs should know, but don't (Autouzupełnianie: co deweloperzy stron internetowych powinni wiedzieć, ale nie wiedzą). Specyfikacja HTML zawiera listę wszystkich 59 możliwych wartości.

Włączanie sugerowania silnego hasła przez przeglądarkę

Nowoczesne przeglądarki używają heurystyki, aby decydować, kiedy wyświetlić interfejs menedżera haseł i zasugerować silne hasło.

Oto jak robi to Safari na komputerze.

(Sugestia silnego, unikalnego hasła jest dostępna w Safari od wersji 12.0).

Wbudowane w przeglądarkę generatory haseł oznaczają, że użytkownicy i programiści nie muszą się zastanawiać, czym jest „silne hasło”. Przeglądarki mogą bezpiecznie przechowywać hasła i automatycznie je uzupełniać, więc użytkownicy nie muszą ich pamiętać ani wpisywać. Zachęcanie użytkowników do korzystania z wbudowanych w przeglądarkę generatorów haseł zwiększa prawdopodobieństwo, że będą oni używać w Twojej witrynie unikalnego, silnego hasła, a nie hasła, które mogło zostać przejęte w innym miejscu.

Pomoc w zapobieganiu przypadkowemu pominięciu danych wejściowych przez użytkowników

Dodaj atrybut required do pól adresu e-mail i hasła. Nowoczesne przeglądarki automatycznie wyświetlają prośbę o brakujące dane i ustawiają na nie kursor. Nie jest wymagany żaden kod JavaScript.

Projektowanie z myślą o obsłudze palcami

Domyślny rozmiar przeglądarki dla prawie wszystkich elementów wejściowych i przycisków jest zbyt mały, zwłaszcza na urządzeniach mobilnych. Może się to wydawać oczywiste, ale jest to częsty problem z formularzami logowania w wielu witrynach.

Upewnij się, że pola i przyciski są wystarczająco duże

Domyślny rozmiar i dopełnienie pól wejściowych i przycisków są za małe na komputerach, a na urządzeniach mobilnych jest jeszcze gorzej.

Zgodnie ze wskazówkami dotyczącymi ułatwień dostępu na Androidzie zalecany rozmiar elementów na ekranie dotykowym to 7–10 mm. Wytyczne dotyczące interfejsu Apple sugerują 48 x 48 pikseli, a W3C sugeruje co najmniej 44 x 44 piksele CSS. Na tej podstawie dodaj (co najmniej) około 15 pikseli dopełnienia do elementów wejściowych i przycisków na urządzeniach mobilnych oraz około 10 pikseli na komputerach. Wypróbuj to na prawdziwym urządzeniu mobilnym i prawdziwym palcu lub kciuku. Użytkownik powinien móc bez problemu kliknąć każde pole i każdy przycisk.

Kontrola Lighthouse Elementy klikalne nie mają odpowiedniego rozmiaru może pomóc Ci zautomatyzować proces wykrywania zbyt małych elementów wejściowych.

Projektowanie z myślą o kciukach

Wyszukaj docelowy element dotykowy, a zobaczysz wiele zdjęć palców wskazujących. Jednak w rzeczywistości wiele osób używa do tego kciuków. Kciuki są większe niż palce wskazujące, a kontrola jest mniej precyzyjna. To kolejny argument za tym, aby docelowe elementy dotykowe miały odpowiedni rozmiar.

Używaj wystarczająco dużego tekstu

Podobnie jak w przypadku rozmiaru i dopełnienia, domyślny rozmiar czcionki w przeglądarce dla elementów wejściowych i przycisków jest zbyt mały, zwłaszcza na urządzeniach mobilnych.

Przeglądarki na różnych platformach różnie skalują czcionki, więc trudno jest określić konkretny rozmiar czcionki, który będzie dobrze wyglądał wszędzie. Szybka analiza popularnych witryn pokazuje, że na komputerach rozmiary czcionek wynoszą 13–16 pikseli. Dopasowanie do tego rozmiaru fizycznego to dobre minimum dla tekstu na urządzeniach mobilnych.

Oznacza to, że na urządzeniach mobilnych musisz używać większego rozmiaru pikseli: 16px w Chrome na komputerze jest całkiem czytelny, ale nawet przy dobrym wzroku trudno jest odczytać tekst 16px w Chrome na Androidzie. Możesz ustawić różne rozmiary czcionki w pikselach dla różnych rozmiarów widocznego obszaru, używając zapytań o media. 20px jest odpowiedni na urządzeniach mobilnych, ale warto przetestować go ze znajomymi lub współpracownikami, którzy mają słaby wzrok.

Kontrola Lighthouse Dokument nie używa czytelnych rozmiarów czcionek może pomóc Ci zautomatyzować proces wykrywania zbyt małego tekstu.

Zapewnij wystarczająco dużo miejsca między danymi wejściowymi.

Dodaj wystarczający margines, aby pola wejściowe działały dobrze jako docelowe elementy dotykowe. Innymi słowy, staraj się zachować margines o szerokości mniej więcej palca.

Upewnij się, że dane wejściowe są wyraźnie widoczne.

Domyślny styl obramowania pól wejściowych utrudnia ich dostrzeżenie. Są one prawie niewidoczne na niektórych platformach, takich jak Chrome na Androida.

Oprócz dopełnienia dodaj obramowanie: na białym tle najlepiej użyć koloru #ccc lub ciemniejszego.

Używanie wbudowanych funkcji przeglądarki do ostrzegania o nieprawidłowych wartościach wejściowych

Przeglądarki mają wbudowane funkcje, które umożliwiają podstawową weryfikację formularzy w przypadku danych wejściowych z atrybutem type. Przeglądarki ostrzegają, gdy przesyłasz formularz z nieprawidłową wartością, i ustawiają kursor na problematycznym polu.

Możesz użyć selektora CSS :invalid, aby wyróżnić nieprawidłowe dane. Użyj :not(:placeholder-shown), aby uniknąć wybierania danych wejściowych bez treści.

input[type=email]:not(:placeholder-shown):invalid {
  color: red;
  outline-color: red;
}

Wypróbuj różne sposoby wyróżniania danych wejściowych z nieprawidłowymi wartościami.

Używaj JavaScriptu tam, gdzie jest to konieczne

Przełącz wyświetlanie hasła

Dodaj przełącznik Pokaż hasło, aby umożliwić użytkownikom sprawdzenie wpisanego tekstu. Użyteczność spada, gdy użytkownicy nie widzą wpisanego tekstu. Obecnie nie ma wbudowanego sposobu, aby to zrobić, ale planujemy wdrożenie takiego rozwiązania. Zamiast tego musisz użyć JavaScriptu.

Poniższy kod używa przycisku tekstowego, aby dodać funkcję Pokaż hasło.

HTML:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="current-password" required>
</section>

Oto kod CSS, który sprawi, że przycisk będzie wyglądał jak zwykły tekst:

button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  /* Media query isn't shown here. */
  font-size: var(--mobile-font-size);
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0;
  right: 0;
}

oraz kod JavaScriptu do wyświetlania hasła:

const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

Oto efekt końcowy:

Ułatwianie dostępu do pól wprowadzania haseł

Użyj atrybutu aria-describedby, aby określić reguły dotyczące haseł, podając mu identyfikator elementu opisującego ograniczenia. Czytniki ekranu odczytują tekst etykiety, typ danych wejściowych (hasło), a następnie opis.

<input type="password" aria-describedby="password-constraints" …>
<div id="password-constraints">Eight or more characters with a mix of letters, numbers and symbols.</div>

Gdy dodajesz funkcję Pokaż hasło, pamiętaj o uwzględnieniu elementu aria-label, który ostrzega, że hasło zostanie wyświetlone. W przeciwnym razie użytkownicy mogą nieumyślnie ujawnić hasła.

<button id="toggle-password"
        aria-label="Show password as plain text.
                    Warning: this will display your password on the screen.">
  Show password
</button>

Obie funkcje ARIA możesz zobaczyć w praktyce w tym filmie demonstracyjnym:

Więcej wskazówek dotyczących tworzenia dostępnych formularzy znajdziesz w artykule Tworzenie dostępnych formularzy.

Weryfikacja w czasie rzeczywistym i przed przesłaniem

Elementy i atrybuty formularzy HTML mają wbudowane funkcje podstawowej weryfikacji, ale warto też używać JavaScriptu, aby przeprowadzać bardziej rygorystyczną weryfikację podczas wpisywania danych przez użytkowników i przesyłania formularza.

W kroku 5 ćwiczeń z tworzenia formularza logowania używamy interfejsu Constraint Validation API (który jest powszechnie obsługiwany), aby dodać walidację niestandardową za pomocą wbudowanego interfejsu przeglądarki do ustawiania zaznaczenia i wyświetlania próśb.

Więcej informacji: Używanie JavaScriptu do bardziej złożonej weryfikacji w czasie rzeczywistym.

Statystyki i RUM

„Nie można ulepszyć tego, czego nie da się zmierzyć” – to powiedzenie szczególnie dobrze pasuje do formularzy rejestracji i logowania. Musisz wyznaczać cele, mierzyć sukces, ulepszać witrynę i powtarzać te czynności.

Testowanie użyteczności z rabatami może być przydatne do wypróbowywania zmian, ale aby naprawdę zrozumieć, jak użytkownicy korzystają z formularzy rejestracji i logowania, potrzebujesz danych z rzeczywistego środowiska:

• Analityka strony: wyświetlenia strony rejestracji i logowania, współczynniki odrzuceń i wyjścia.
• Analityka interakcji: ścieżki do celu (w którym miejscu użytkownicy rezygnują z procesu logowania lub rejestracji?) i zdarzenia (jakie działania podejmują użytkownicy podczas interakcji z formularzami?).
• Wydajność witryny: wskaźniki dotyczące użytkowników (czy formularze rejestracji i logowania działają wolno i dlaczego?).

Możesz też rozważyć wdrożenie testów A/B, aby wypróbować różne podejścia do rejestracji i logowania, oraz wdrażanie etapowe, aby sprawdzić zmiany na podzbiorze użytkowników przed udostępnieniem ich wszystkim użytkownikom.

Ogólne wskazówki

Dobrze zaprojektowany interfejs i wygoda użytkowników mogą zmniejszyć liczbę porzuceń formularza logowania:

• Nie zmuszaj użytkowników do szukania przycisku logowania. Umieść link do formularza logowania u góry strony, używając zrozumiałych sformułowań, takich jak Zaloguj się, Utwórz konto lub Zarejestruj się.
• Skup się na jednym temacie. Formularze rejestracji nie są miejscem, w którym należy rozpraszać użytkowników ofertami i innymi funkcjami witryny.
• Uprość proces rejestracji. Zbieraj inne dane użytkowników (np. adresy lub dane kart kredytowych) tylko wtedy, gdy użytkownicy widzą wyraźną korzyść z ich podania.
• Zanim użytkownicy zaczną wypełniać formularz rejestracji, jasno przedstaw im propozycję wartości. Jakie korzyści odniosą z zalogowania się? Zaoferuj użytkownikom konkretne korzyści za dokończenie rejestracji.
• Jeśli to możliwe, pozwól użytkownikom na identyfikowanie się za pomocą numeru telefonu komórkowego zamiast adresu e-mail, ponieważ niektórzy użytkownicy mogą nie korzystać z poczty e-mail.
• Ułatw użytkownikom resetowanie hasła i umieść link Nie pamiętasz hasła? w widocznym miejscu.
• Link do warunków korzystania z usługi i dokumentów dotyczących polityki prywatności: od samego początku jasno informuj użytkowników, jak chronisz ich dane.
• Umieść logo i nazwę swojej firmy lub organizacji na stronach rejestracji i logowania oraz upewnij się, że język, czcionki i style są zgodne z resztą witryny. Niektóre formularze nie wyglądają, jakby należały do tej samej witryny co inne treści, zwłaszcza jeśli mają znacznie inny adres URL.

Kontynuuj naukę

• Tworzenie niesamowitych formularzy
• Sprawdzone metody projektowania formularzy na urządzenia mobilne
• Bardziej zaawansowane elementy sterujące formularza
• Tworzenie dostępnych formularzy
• Usprawnianie procesu logowania za pomocą interfejsu Credential Management API
• Weryfikowanie numerów telefonów w internecie za pomocą interfejsu WebOTP API