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 elementów HTML: <form>, <input>, <label> i <button>.
• Oznacz dane wejściowe etykietą <label>.
• Aby uzyskać dostęp do wbudowanych funkcji przeglądarki, użyj atrybutów elementu: type, name, autocomplete, required.
• Nadaj atrybutom wejściowym name i id stabilne wartości, które nie zmieniają się po wczytaniu strony lub podczas wdrażania witryny.
• Umieść parametr logowania w oddzielnym elemencie <form>.
• Zadbaj o prawidłowe przesłanie formularza.
• Użyj autocomplete="new-password" i id="new-password", aby podać hasło w formularzu rejestracyjnym, a nowe hasło w formularzu resetowania hasła.
• Aby wpisać hasło logowania, użyj autocomplete="current-password" i id="current-password".
• Zapewnij funkcję Pokaż hasło.
• Do wpisywania hasła używaj aria-label i aria-describedby.
• Nie podwajaj danych wejściowych.
• Zaprojektuj formularze w taki sposób, aby klawiatura mobilna nie zasłaniała wprowadzania ani przycisków.
• Upewnij się, że formularze są obsługiwane na urządzeniach mobilnych: używaj czytelnego tekstu, a elementy wejściowe i przyciski muszą być dostatecznie duże, by działały jako docelowe elementy dotykowe.
• Zachowaj markę i styl na stronach rejestracji i logowania.
• Przeprowadzaj testy w terenie i w laboratorium: uwzględniaj w procesie rejestracji i logowania statystyki strony, analitykę interakcji i zorientowane na użytkownika pomiary skuteczności.
• Testowanie w różnych przeglądarkach i na różnych urządzeniach: zachowanie formularza znacznie się różni w zależności od platformy.

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.

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.

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.

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.

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.

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.

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).

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

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.

(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.

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.

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).

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.

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.

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.

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:

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

• Tworzenie niesamowitych formularzy
• Sprawdzone metody projektowania formularzy mobilnych
• Ulepszone opcje sterowania formularzem
• Tworzenie formularzy z ułatwieniami dostępu
• Uproszczenie procesu logowania za pomocą interfejsu Credential Management API
• Weryfikowanie numerów telefonów w internecie za pomocą interfejsu WebOTP API

Zdjęcie: Meghan Schiereck, Unsplash.