Sprawdzone metody dotyczące formularza logowania

Używaj funkcji przeglądarki działających na wielu platformach, aby tworzyć bezpieczne, dostępne i łatwe w obsłudze formularze logowania.

Jeśli użytkownik będzie chciał zalogować się w Twojej witrynie, zadbaj o dobre projektowanie formularza logowania. Dotyczy to zwłaszcza osób, które mają słabe połączenie z siecią, korzystają z urządzeń mobilnych, są spieszące się lub są zestresowane. Źle zaprojektowane formularze logowania mają wysoki współczynnik odrzuceń. Każde odrzucenie może oznaczać utratę i niezadowolonego użytkownika, a nie tylko straconą okazję do zalogowania się.

Oto przykład prostego formularza logowania, który obejmuje wszystkie sprawdzone metody:

Lista kontrolna

Używaj zrozumiałych kodu HTML

Używaj elementów utworzonych na potrzeby zadania: <form>, <label> i <button>. Włączają one wbudowane funkcje przeglądarki, poprawiają dostępność i nadają znaczenie znaczników.

Użyj <form>

Być może zechcesz opakować dane wejściowe w elemencie <div> i obsługiwać przesyłanie danych wyłącznie za pomocą JavaScriptu. Lepiej jest użyć zwykłego starego elementu <form>. Dzięki temu witryna jest dostępna dla czytników ekranu i innych urządzeń wspomagających, udostępnia szereg wbudowanych funkcji przeglądarki, ułatwia stworzenie podstawowych funkcji logowania w starszych przeglądarkach i będzie działać nawet w przypadku awarii JavaScriptu.

Użyj <label>

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

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

Z dwóch powodów:

  • Dotknięcie etykiety powoduje przesunięcie zaznaczenia na wybraną etykietę. Powiąż etykietę z danymi wejściowymi, używając atrybutu for etykiety z danymi wejściowymi name lub id.
  • Czytniki ekranu odczytują tekst etykiety, gdy etykieta lub dane wejściowe etykiety są zaznaczone.

Jako etykiet wejściowych nie używaj obiektów zastępczych. Gdy użytkownicy zaczynają wpisywać tekst, są zmuszeni zapomnieć o tym, czego dotyczyło dane wejściowe, zwłaszcza jeśli jest rozproszony („Czy podałem adres e-mail, numer telefonu czy identyfikator konta?”). Istnieje wiele innych potencjalnych problemów z obiektami zastępczymi. Zapoznaj się z artykułami Nie używaj atrybutu zastępczego i Obiekty zastępcze w polach formularza są szkodliwe, jeśli nie chcesz się przekonywać.

Najlepiej jest umieścić etykiety nad danymi wejściowymi. Pozwala to uzyskać spójny projekt na urządzeniach mobilnych i komputerach oraz, zgodnie z badaniami nad AI opracowanymi przez Google, umożliwia użytkownikom szybsze skanowanie. Otrzymujesz etykiety i dane wejściowe o pełnej szerokości i nie musisz dostosowywać szerokości etykiety ani danych wejściowych, aby dopasować ją do tekstu.

Zrzut ekranu przedstawiający pozycję etykiety wprowadzania danych na urządzeniu mobilnym: obok danych wejściowych i powyżej.
Szerokość etykiet i danych wejściowych jest ograniczona, gdy oba znajdują się w tej samej linii.

Otwórz błąd label-position na urządzeniu mobilnym, aby się przekonać.

Użyj <button>

Użyj w przypadku przycisków <button>. Elementy przycisków zapewniają łatwy sposób działania i wbudowaną funkcję przesyłania formularzy. Można też łatwo dostosować ich styl. Nie ma sensu używać elementu <div> ani żadnego innego elementu udającego przycisk.

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

Zapewnienie pomyślnego przesłania formularza

Ułatw menedżerom haseł rozpoznanie tego, że formularz został przesłany. Można to zrobić na 2 sposoby:

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

Jeśli wysyłasz żądanie XMLHttpRequest lub fetch, upewnij się, że pomyślne logowanie jest zgłaszane w odpowiedzi i obsługiwane za pomocą formularza DOM oraz informowania użytkownika o powodzeniu.

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

I na odwrót: nie wyłączaj przesyłania formularzy oczekiwania na odpowiedź użytkownika. Nie wyłączaj na przykład przycisku Zaloguj się, jeśli użytkownik nie wpisał jeszcze kodu PIN klienta. Użytkownicy mogą przegapić jakąś informację w formularzu i wielokrotnie kliknąć (wyłączony) przycisk Zaloguj się, uznając, że to nie działa. Jeśli musisz wyłączyć przesyłanie formularza, wyjaśnij użytkownikowi, czego brakuje po kliknięciu wyłączonego przycisku.

Nie podwajaj danych wejściowych

Niektóre witryny wymuszają na użytkownikach dwukrotne wpisywanie adresów e-mail lub haseł. Może to zmniejszyć liczbę błędów u niektórych użytkowników, ale wymaga dodatkowej pracy u wszystkich użytkowników i zwiększa współczynniki porzuceń. Dwukrotne pytanie też nie ma sensu, gdy przeglądarki automatycznie uzupełniają adresy e-mail lub podpowiadają silne hasła. Lepiej jest umożliwić użytkownikom potwierdzenie swojego adresu e-mail (musisz to zrobić) i w razie potrzeby ułatwić im zresetowanie hasła.

W pełni wykorzystaj atrybuty elementów

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

Hasła powinny być prywatne, ale użytkownicy mogą je widzieć, jeśli zechcą

Dane wejściowe hasła powinny zawierać właściwość type="password", która ukrywa tekst hasła i ułatwia przeglądarce rozpoznanie, że jest to hasło. Pamiętaj, że przeglądarki korzystają z różnych technik, aby zrozumieć role wpisywane i podjąć decyzję, czy zdecydować się na zapisywanie haseł.

Dodaj przełącznik Pokaż hasło, aby umożliwić użytkownikom sprawdzenie wpisanego tekstu. Nie zapomnij też dodać linku Nie pamiętam hasła. Zobacz Włączanie wyświetlania hasła.

Formularz logowania Google z ikoną Pokaż hasło.
Hasło wpisane w formularzu logowania Google: ikona Pokaż hasło i link Nie pamiętam hasła.

Zapewnij użytkownikom urządzeń mobilnych odpowiednią klawiaturę

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

Jeśli chcesz podać numer telefonu zamiast adresu e-mail, <input type="tel"> włącza klawiaturę telefoniczną na telefonie komórkowym. W razie potrzeby możesz też użyć atrybutu inputmode: inputmode="numeric" to idealna opcja dla kodów PIN. Więcej informacji znajdziesz w artykule Wszystko, co warto wiedzieć o inputmode.

Klawiatura urządzenia mobilnego nie zasłania przycisku Zaloguj się

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

Dwa zrzuty ekranu przedstawiające formularz logowania na telefonie z Androidem. Jeden z nich pokazuje, jak przycisk Prześlij jest przesłonięty na klawiaturze telefonu.
Przycisk Zaloguj się: teraz go widzisz, teraz go nie widzisz.

Aby tego uniknąć, w miarę możliwości staraj się wyświetlać tylko adres e-mail, numer telefonu i hasło oraz przycisk Zaloguj się u góry strony logowania. Umieść inne treści poniżej.

Zrzut ekranu z formularzem logowania na telefonie z Androidem: przycisk Zaloguj się nie jest przesłonięty przez klawiaturę telefonu.
Klawiatura nie zasłania przycisku Zaloguj się.

Testuj na różnych urządzeniach

Testy będą przeprowadzane na różnych urządzeniach docelowych odbiorców i odpowiednio dostosują ustawienia. BrowserStack umożliwia bezpłatne testowanie projektów open source na różnych urządzeniach i w różnych przeglądarkach.

Zrzuty ekranu formularza logowania na iPhone&#39;ach 7, 8 i 11. Na iPhone&#39;ach 7 i 8 przycisk Zaloguj się jest przysłonięty za pomocą klawiatury telefonu, ale nie na iPhonie 11
Przycisk Zaloguj się: jest zasłonięty na iPhonie 7 i 8, ale nie na iPhonie 11.

Rozważ użycie 2 stron

W niektórych witrynach (w tym Amazon i eBay) można uniknąć tego problemu, wyświetlając na 2 stronach prośbę o podanie adresu e-mail/telefonu i hasła. Takie podejście upraszcza też obsługę: użytkownik ma za zadanie wykonać tylko jedną czynność naraz.

Zrzut ekranu z formularzem logowania na stronie Amazon: adres e-mail/telefon i hasło na 2 osobnych „stronach”.
Logowanie dwuetapowe: adres e-mail lub telefon, a następnie hasło.

Najlepiej jest wdrożyć go za pomocą pojedynczego elementu <form>. Użyj JavaScriptu, aby początkowo wyświetlać tylko adres e-mail, a potem ukryć go i wyświetlać hasło. Jeśli musisz wymusić przejście użytkownika na nową stronę po wpisaniu adresu e-mail i hasła, formularz na drugiej stronie powinien zawierać ukryty element do wprowadzania danych z wartością adresu e-mail, aby umożliwić menedżerom haseł zapisywanie prawidłowej wartości. Przykładowy kod znajdziesz w sekcji Style formularzy z hasłami rozpoznawane przez Chromium.

Pomóż użytkownikom uniknąć ponownego wpisywania danych

Możesz pomóc przeglądarkom prawidłowo zapisywać dane i automatycznie uzupełniać dane wejściowe, aby użytkownicy nie musieli zapamiętywać adresu e-mail i hasła. Jest to szczególnie ważne w przypadku urządzeń mobilnych i ma kluczowe znaczenie w przypadku adresów e-mail, które uzyskują wysokie współczynniki porzuceń.

Składa się na to 2 części:

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

  2. Atrybut autocomplete ułatwia przeglądarkom prawidłowe autouzupełnianie danych wejściowych z wykorzystaniem przechowywanych danych.

Podczas wprowadzania adresów e-mail używaj autocomplete="username", ponieważ username jest rozpoznawany przez menedżerów haseł w nowoczesnych przeglądarkach. Możesz używać type="email" oraz id="email" i name="email".

W przypadku wpisywania haseł używaj odpowiednich wartości autocomplete i id, aby ułatwić przeglądarkom rozróżnianie nowych i bieżących haseł.

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

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

Użyj hasła autocomplete="current-password" i id="current-password" w przypadku istniejącego hasła

  • Użyj autocomplete="current-password" i id="current-password" do wpisania hasła w formularzu logowania lub do wprowadzenia starego hasła użytkownika w formularzu zmiany hasła. Informuje to przeglądarkę, że ma ona używać bieżącego hasła zapisanego dla danej witryny.

W przypadku formularza rejestracyjnego:

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

Logowanie:

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

Menedżery haseł pomocy

Różne przeglądarki obsługują autouzupełnianie e-maili i sugestie haseł nieco inaczej, ale efekt jest niemal taki sam. Na przykład w Safari w wersji 11 i nowszych na komputerach wyświetlany jest menedżer haseł, a o ile jest dostępne uwierzytelnianie biometryczne (odcisk palca lub rozpoznawanie twarzy).

Zrzuty ekranu przedstawiające 3 etapy procesu logowania się w Safari na komputerze: menedżer haseł, uwierzytelnianie biometryczne, autouzupełnianie.
Logowanie się z autouzupełnianiem – nie musisz wpisywać tekstu.

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

Zrzuty ekranu przedstawiające 4 etapy procesu logowania się w Chrome na komputerze: uzupełnianie e-maili, sugerowanie e-maili, menedżer haseł, autouzupełnianie przy wyborze.
Automatyczne uzupełnianie logowania w Chrome 84.

Systemy haseł przeglądarki i autouzupełniania nie są proste. Algorytmy do zgadywania, przechowywania i wyświetlania wartości nie są ustandaryzowane i różnią się w zależności od platformy. Na przykład, jak wskazuje Hidde de Vries: „Menedżer haseł Firefoksa uzupełnia swoje mechanizmy heurystyczne o system przepisów”.

Autouzupełnianie: co powinni wiedzieć deweloperzy stron internetowych, ale niewiele zawiera więcej informacji o używaniu name i autocomplete. Specyfikacja HTML zawiera wszystkie 59 możliwych wartości.

Włącz przeglądarkę, aby zasugerować silne hasło

Nowoczesne przeglądarki korzystają z metod heurystycznych, aby zdecydować, kiedy wyświetlić interfejs menedżera haseł, i zaproponować silne hasło.

Safari na komputerze działa w ten sposób.

Zrzut ekranu z Menedżera haseł Firefox na komputerze.
Sugestie hasła w Safari.

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

Dzięki wbudowanym generatorom haseł w przeglądarce użytkownicy i programiści nie muszą wiedzieć, co to jest „silne hasło”. Przeglądarki mogą bezpiecznie przechowywać hasła i automatycznie je uzupełniać, więc użytkownicy nie muszą zapamiętywać ani podawać haseł. Zachęcanie użytkowników do korzystania z wbudowanych generatorów haseł w przeglądarkach oznacza również, że korzystają oni z unikalnego, silnego hasła w witrynie i są mniej podatne na ponowne użycie hasła, które może zostać przejęte w innym miejscu.

Ochrona użytkowników przed przypadkowym brakiem danych wejściowych

Dodaj atrybut required do pól adresu e-mail i hasła. Nowoczesne przeglądarki automatycznie pytają o brakujące dane i zaznaczają, które dane są potrzebne. Obsługa JavaScriptu nie jest wymagana.

Zrzut ekranu przedstawiający przeglądarki Firefox i Chrome na Androida na komputerach, z widocznym komunikatem „Wypełnij to pole” dotyczącym brakujących danych.
Wyświetlaj komunikaty i zaznaczaj brakujące dane w Firefoksie na komputer (wersja 76) i Chrome na Androida (wersja 83).

Projektowanie na palce i kciuki

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

Upewnij się, że dane wejściowe i przyciski są wystarczająco duże

Domyślny rozmiar i dopełnienie elementów wejściowych i przycisków są za małe na komputerach, a nawet gorsze na urządzeniach mobilnych.

Zrzut ekranu przedstawiający formularz w niezmienionym stylu w Chrome na komputery i w Chrome na Androida.

Zgodnie z wytycznymi dotyczącymi ułatwień dostępu na Androidzie zalecany rozmiar docelowy obiektów na ekranie dotykowym to 7–10 mm. Wskazówki dotyczące interfejsu Apple zalecają rozmiar 48 × 48 piks., a W3C zaleca co najmniej 44 x 44 piksele CSS. Dodaj więc około 15 pikseli dopełnienia elementów wejściowych i przycisków w przypadku urządzeń mobilnych oraz około 10 pikseli na komputerach. Spróbuj to zrobić na prawdziwym urządzeniu mobilnym i palcem lub kciukiem. Powinno być możliwe wygodne dotykanie każdego wejścia i przycisku.

Niewłaściwy rozmiar docelowych elementów kliknięcia audyt Lighthouse może pomóc zautomatyzować proces wykrywania zbyt małych elementów wejściowych.

Projektowanie na kciuki

Wyszukaj docelowy element dotykowy, a zobaczysz dużo zdjęć palców wskazujących. Jednak w rzeczywistości wiele osób do interakcji z telefonami używa kciuków. Kciuks jest większy niż palec wskazujący, a kontrola jest mniej precyzyjna. To kolejny powód, dla którego warto odpowiednio dopasować docelowe elementy dotykowe.

Dodaj wystarczająco duży tekst

Tak jak w przypadku rozmiaru i dopełnienia, domyślny rozmiar czcionki w elementach wejściowych i przyciskach w przeglądarce jest za mały (zwłaszcza na urządzeniach mobilnych).

Zrzut ekranu przedstawiający formularz bez stylu w Chrome na komputerze i na urządzeniu z Androidem.
Domyślny styl na komputerach i urządzeniach mobilnych: tekst wejściowy jest zbyt mały, aby był czytelny dla wielu użytkowników.

Przeglądarki na różnych platformach w różny sposób ustalają rozmiar czcionki, więc trudno jest określić konkretny rozmiar, który sprawdzi się wszędzie. W krótkiej ankiecie dotyczącej popularnych witryn można było sprawdzić, czy rozmiar na komputery wynosi od 13 do 16 pikseli. W przypadku tekstu na urządzeniu mobilnym dopasowanie takiego rozmiaru fizycznego będzie wystarczające.

Musisz w tym celu użyć większego rozmiaru pikseli na urządzeniu mobilnym: 16px w Chrome na komputery jest dość czytelny, ale nawet przy dobrym wzroku tekst 16px w Chrome na Androida jest trudny do odczytania. Za pomocą zapytań o multimedia możesz ustawić różne rozmiary czcionek w pikselach dla różnych rozmiarów widocznego obszaru. 20px działa na urządzeniach mobilnych, ale warto go przetestować ze znajomymi lub współpracownikami z wadami wzroku.

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

Zapewnij odpowiednią ilość miejsca między danymi wejściowymi

Dodaj taki margines, aby dane wejściowe działały dobrze jako docelowe elementy dotykowe. Innymi słowy, staraj się, by margines był szerokości palca.

Upewnij się, że dane wejściowe są dobrze widoczne

Domyślny styl obramowania dla danych wejściowych sprawia, że są one mało widoczne. Na niektórych platformach, np. w Chrome na Androida, są one prawie niewidoczne.

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

Zrzut ekranu interfejsu ze stylem w Chrome na Androida.
Czytelny tekst, widoczne ramki wejściowe, odpowiednie dopełnienie i marginesy.

Ostrzegaj o nieprawidłowych danych wejściowych, używając wbudowanych funkcji przeglądarki

Przeglądarki mają wbudowane funkcje, które pozwalają wykonać podstawową weryfikację formularzy w przypadku danych wejściowych z atrybutem type. Przeglądarki ostrzegają, gdy przesyłasz formularz z nieprawidłową wartością, i zwracają uwagę na problematyczne dane.

Zrzut ekranu z formularzem logowania w Chrome na komputerze, na którym widać prompt w przeglądarce i zaznaczony nieprawidłowy adres e-mail.
Podstawowa wbudowana weryfikacja w przeglądarce.

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

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 to konieczne

Przełącz wyświetlanie hasła

Dodaj przełącznik Pokaż hasło, aby umożliwić użytkownikom sprawdzanie wpisanego tekstu. Użyteczność występuje, gdy użytkownicy nie widzą wpisanego tekstu. Obecnie nie ma na to gotowego sposobu, ale istnieją plany, aby to zrobić. Użyj JavaScriptu.

Formularz logowania Google z widocznym przełącznikiem „Pokaż przełącznik hasła” i linkiem „Nie pamiętam hasła”.
Formularz logowania Google: z przełącznikami Pokaż hasło i linkiem Nie pamiętam hasła.

W poniższym kodzie użyto 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;
}

A kod JavaScript 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 rezultat:

Zrzuty ekranu formularza logowania z przyciskiem Pokaż hasło „przycisk” w przeglądarce Safari na Macu oraz iPhonie 7.
Formularz logowania się w przeglądarce Safari na Macu i iPhone'ie 7 z tekstem „button” Show password (Pokaż hasło).

Ułatwienia dostępu w polu wpisywania hasła

Użyj aria-describedby, aby nakreślić reguły haseł, podając identyfikator elementu opisującego ograniczenia. Czytniki ekranu podają tekst etykiety, typ danych wejściowych (hasło) i 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 dodasz funkcję Pokaż hasło, dodaj parametr aria-label, który ostrzega o wyświetleniu hasła. W przeciwnym razie użytkownicy mogą niechcący 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 działają w ramach tego błędu:

W artykule Tworzenie formularzy z ułatwieniami dostępu znajdziesz więcej wskazówek, które ułatwiają korzystanie z formularzy.

Weryfikacja w czasie rzeczywistym i przed przesłaniem

Elementy formularzy i atrybuty HTML mają wbudowane funkcje do podstawowej weryfikacji. Warto jednak użyć także JavaScriptu, aby przeprowadzić bardziej szczegółową weryfikację, gdy użytkownicy wprowadzają dane i przesyłają formularz.

W kroku 5 ćwiczenia z programowania dotyczącego formularza logowania korzystamy z interfejsu API weryfikacji ograniczeń (szeroko obsługiwanego), aby dodać niestandardową weryfikację za pomocą wbudowanego interfejsu przeglądarki w celu ustawiania zaznaczenia i wyświetlania promptów.

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

Statystyki i RUM

Wyrażenie „tego, czego nie można zmierzyć, nie jest możliwe” szczególnie w przypadku formularzy rejestracji i logowania. Trzeba wyznaczyć cele, mierzyć skuteczność, ulepszać witrynę i powtarzać działania.

Sprawdzanie rabatów może być pomocne przy wypróbowywaniu zmian, ale potrzebujesz rzeczywistych danych, aby dokładnie zrozumieć, jak użytkownicy odbierają formularze rejestracji i logowania:

  • Statystyki stron: wyświetlenia stron rejestracji i logowania, współczynniki odrzuceń i wyjścia.
  • Statystyki interakcji: ścieżki celów (gdzie użytkownicy rezygnują z procesu logowania lub logowania) i zdarzenia (jakie działania podejmują użytkownicy podczas interakcji z Twoimi formularzami?)
  • Skuteczność witryny: dane dotyczące użytkowników (czy formularze rejestracji i logowania się z jakiegoś powodu wydłużają proces rejestracji lub logowania, a jeśli tak, to co jest tego przyczyną).

Możesz też rozważyć wprowadzenie testów A/B, aby wypróbować różne metody rejestracji i logowania, oraz wdrażania etapowego w celu sprawdzenia zmian u części użytkowników, zanim zostaną one udostępnione wszystkim użytkownikom.

Ogólne wskazówki

Dobrze zaprojektowany interfejs i odpowiednie wrażenia mogą zmniejszyć liczbę porzuceń podczas wypełniania formularza logowania:

  • Nie zniechęcaj użytkowników do polowania na informacje potrzebne do zalogowania się. U góry strony umieść link do formularza logowania, używając zrozumiałego sformułowania, np. Zaloguj się, Utwórz konto lub Zarejestruj się.
  • Skup się. Formularze rejestracyjne nie służą do rozpraszania użytkowników ofertami i innymi funkcjami witryny.
  • Zminimalizuj złożoność rejestracji. Gromadzenie innych danych użytkownika (takich jak adresy lub dane kart kredytowych) tylko wtedy, gdy odnotowuje on wyraźną korzyść z przekazania tych danych.
  • Zanim użytkownicy zaczną wypełniać formularz rejestracyjny, wyjaśnij im, jaka jest jego wartość i jakie korzyści płyną z logowania się? Zachęcaj użytkowników do ukończenia rejestracji.
  • Jeśli to możliwe, zezwól użytkownikom na identyfikowanie się za pomocą numeru telefonu komórkowego zamiast adresu e-mail, ponieważ niektórzy mogą nie używać adresu e-mail.
  • Ułatw użytkownikom resetowanie hasła i zadbaj o to, aby link Nie pamiętasz hasła? był wyraźnie widoczny.
  • Podaj link do warunków korzystania z usługi i polityki prywatności: od razu wyjaśnij użytkownikom, jak chronisz ich dane.
  • Umieść logo i nazwę swojej firmy lub organizacji na stronach rejestracji i logowania. Upewnij się, że język, czcionki i style pasują do reszty witryny. Niektóre formularze nie wydają się należeć do tej samej witryny co inne treści, zwłaszcza jeśli mają znacznie inny adres URL.

Ucz się dalej

Zdjęcie: Meghan Schiereck, Unsplash.