Sprawdzone metody dotyczące formularza logowania

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

Sam Dutton

Jeśli użytkownicy muszą logować się w Twojej witrynie, musisz zadbać o odpowiednie zaprojektowanie formularza logowania. 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 logowania mają wysoki współczynnik odrzuceń. Każdy odskok może oznaczać utratę niezadowolonego użytkownika, a nie tylko utratę możliwości zalogowania się.

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

Lista kontrolna

• Używaj odpowiednich elementów HTML: <form>, <input>, <label> i <button>.
• Oznacz każde dane wejściowe znakiem <label>.
• Aby uzyskać dostęp do wbudowanych funkcji przeglądarki, użyj atrybutów elementów: type, name, autocomplete, required.
• Podaj stabilne wartości atrybutów wejściowych name i id, które nie zmieniają się podczas wczytywania strony ani wdrażania witryny.
• Umieść logowanie w osobnym elemencie <form>.
• Upewnij się, że formularz został przesłany.
• Użyj autocomplete="new-password" i id="new-password" do wpisania hasła w formularzu rejestracji oraz nowego hasła w formularzu resetowania hasła.
• Aby wpisać hasło, użyj autocomplete="current-password" i id="current-password".
• Dodaj funkcję Pokaż hasło.
• Do wprowadzania haseł używaj właściwości aria-label i aria-describedby.
• Nie podawaj podwójnych danych wejściowych.
• Zaprojektuj formularze tak, aby klawiatura mobilna nie zasłaniała pól wprowadzania danych ani przycisków.
• Zadbaj o to, aby formularze były użyteczne na urządzeniach mobilnych: używaj czytelnego tekstu oraz upewnij się, że pola wprowadzania danych i przyciski są wystarczająco duże, aby można było je dotknąć.
• Zachowaj branding i styl na stronach rejestracji i logowania.
• Testuj na miejscu i w laboratorium: dodaj do procesu rejestracji i logowania funkcje analizy stron, analizy interakcji i mierzenia skuteczności pod kątem użytkownika.
• Testowanie w różnych przeglądarkach i na różnych urządzeniach: zachowanie formularzy różni się znacznie na różnych platformach.

Używaj zrozumiałego kodu HTML

Użyj elementów stworzonych na potrzeby zadania: <form>, <label> i <button>. Umożliwiają one korzystanie z wbudowanych funkcji przeglądarki, ułatwiają dostępność i dodają znaczeń do znaczników.

Użyj konta <form>

Może Cię kusić, aby umieszczać dane 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 Twoja witryna będzie dostępna dla czytników ekranu i innych urządzeń wspomagających, będzie obsługiwać szereg wbudowanych funkcji przeglądarki, ułatwi Ci tworzenie podstawowych funkcji logowania dla starszych przeglądarek i będzie działać nawet wtedy, gdy JavaScript się nie wczyta.

Użyj konta <label>

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

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

Dwie przyczyny:

• Kliknięcie etykiety spowoduje przeniesienie kursora na pole wprowadzania. Powiąż etykietę z danymi wejściowymi, używając atrybutu for etykiety z wartościami name lub id danych wejściowych.
• Czytniki ekranu informują, że etykieta lub dane wejściowe etykiety są wyróżnione.

Nie używaj obiektów zastępczych jako etykiet danych wejściowych. Gdy zaczną wpisywać tekst, ludzie mogą zapomnieć, czego dotyczyło dane wejściowe, zwłaszcza jeśli coś ich rozprasza („Czy wpisałem adres e-mail, numer telefonu czy identyfikator konta?”). Z zastępnikami wiąże się wiele innych potencjalnych problemów. Jeśli nie jesteś przekonany/a, przeczytaj artykuły Nie używaj atrybutu zastępczego i Zastępniki w formularzach są szkodliwe.

Chyba najlepiej jest umieścić etykiety nad danymi wejściowymi. Umożliwia to spójny wygląd na urządzeniach mobilnych i komputerach, a także, zgodnie z badaniach nad sztuczną inteligencją Google, szybsze skanowanie przez użytkowników. Etykiety i pola tekstowe mają pełną szerokość, więc nie musisz dostosowywać ich szerokości do tekstu.

Otwórz Glitcha label-position na urządzeniu mobilnym, aby się o tym przekonać.

Użyj konta <button>

Użyj <button> do przycisków. Elementy przycisku zapewniają ułatwienia dostępu i wbudowaną funkcję przesyłania formularzy. Można je też łatwo stylizować. Nie ma sensu używać <div> ani innego elementu, który udawałby przycisk.

Upewnij się, że przycisk przesyłania informuje o tym, co robi. Przykłady obejmują Utwórz konto lub Zaloguj się, a nie Prześlij czy Rozpocznij.

Zapewnienie prawidłowego przesłania formularza

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

• Przejdź na inną stronę.
• Udaj nawigację za pomocą History.pushState() lub History.replaceState()i usuń formularz hasła.

W przypadku żądania XMLHttpRequest lub fetch sprawdź, czy w odpowiedzi jest raportowany sukces logowania, a formularz jest usuwany z DOM, a także czy użytkownik otrzymuje informację o pomyślnym zalogowaniu.

Po kliknięciu przez użytkownika przycisku Zaloguj się rozważ wyłączenie tego przycisku. Wielu użytkowników klika przyciski wielokrotnie, nawet w przypadku witryn, które są szybkie i responsywne. Spowalnia to interakcje i zwiększa obciążenie serwera.

Nie wyłączaj też możliwości przesłania formularza, gdy oczekujesz na dane od użytkownika. Nie wyłączaj na przykład przycisku Zaloguj się, jeśli użytkownicy nie wpisali kodu PIN klienta. Użytkownicy mogą pominąć jakieś dane w formularzu, a potem wielokrotnie kliknąć przycisk Zaloguj się (wyłączony) i myśleć, że to 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

W niektórych witrynach użytkownicy wymuszają na użytkownikach podwójne wpisanie adresu e-mail lub hasła. Może to zmniejszyć liczbę błędów u niektórych użytkowników, ale spowoduje dodatkową pracę dla wszystkich użytkowników i zwiększy współczynniki porzuceń. Dwukrotne pytanie też nie ma sensu, jeśli przeglądarki automatycznie uzupełniają adresy e-mail lub podpowiadają silne hasła. Lepiej jest umożliwić użytkownikom potwierdzenie adresu e-mail (i tak musisz to zrobić) i ułatwić im w razie potrzeby zresetowanie hasła.

W pełni wykorzystuj atrybuty elementów

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

Zachowaj hasła w prywatności, ale pozwól użytkownikom je zobaczyć, jeśli chcą

Dane wejściowe haseł powinny mieć właściwość type="password", aby ukryć tekst hasła i ułatwić przeglądarce rozpoznanie, że dane wejściowe dotyczą haseł. (Pamiętaj, że przeglądarki używają różnych technik do określania ról danych wejściowych i podejmowania decyzji o zapisywaniu haseł).

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

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

Użyj <input type="email">, aby udostępnić użytkownikom mobilnym odpowiednią klawiaturę i włączyć podstawową wbudowaną walidację adresów e-mail przez przeglądarkę. Nie jest wymagany JavaScript.

Jeśli zamiast adresu e-mail musisz podać numer telefonu, funkcja <input type="tel"> włącza klawiaturę telefonu na urządzeniu mobilnym. W razie potrzeby możesz też użyć atrybutu inputmode: inputmode="numeric" jest idealny do numerów PIN. Sekcja Wszystko, co chcesz wiedzieć o trybie wejścia zawiera więcej szczegółów.

Zapobieganie blokowaniu przycisku Zaloguj się przez klawiaturę mobilną

Jeśli nie zachowasz ostrożności, klawiatura mobilna może zakryć formularz lub, co gorsza, częściowo zasłonić przycisk Zaloguj się. Użytkownicy mogą się poddać, nie zrozumieją, co się stało.

Jeśli to możliwe, unikaj tego, wyświetlając u góry strony logowania tylko pola tekstowe z adresem e-mail lub numerem telefonu i hasłem oraz przycisk Zaloguj się. Poniżej umieść inne treści.

Testowanie na różnych urządzeniach

Musisz przetestować aplikację na różnych urządzeniach docelowych odbiorców i w odpowiednim stopniu ją dostosować. BrowserStack umożliwia bezpłatne testowanie projektów open source na różnych prawdziwych urządzeniach i 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ż korzystanie z aplikacji: użytkownik ma do wykonania tylko jedno zadanie naraz.

Najlepiej zaimplementować to za pomocą jednego elementu <form>. Użyj JavaScriptu, aby najpierw wyświetlić tylko pole tekstowe z adresem e-mail, a potem ukryć to pole i wyświetlić pole tekstowe z hasłem. Jeśli musisz zmusić użytkownika do przejścia na nową stronę między wpisaniem adresu e-mail a hasłem, formularz na drugiej stronie powinien zawierać ukryty element danych z wartością adresu e-mail, aby umożliwić menedżerom haseł zapisanie prawidłowej wartości. Przykładowy kod znajdziesz w artykule Password Form Styles that Chromium Understands.

Pomaganie użytkownikom w unikaniu ponownego wprowadzania danych

Możesz pomóc przeglądarkom prawidłowo przechowywać dane i automatycznie uzupełniać dane wejściowe, aby użytkownicy nie musieli pamiętać o podaniu adresu e-mail i hasła. Jest to szczególnie ważne na urządzeniach mobilnych i kluczowe w przypadku danych wejściowych e-maili, które mają wysokie współczynniki porzuceń.

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

1. Atrybuty autocomplete, name, id i type pomagają przeglądarkom zrozumieć rolę danych wejściowych w celu przechowywania danych, 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 stabilną wartość name lub id (nie generowaną losowo przy każdym wczytaniu strony lub wdrażaniu witryny) i były w elementach <form> z przyciskiem submit.

2. Atrybut autocomplete pomaga przeglądarkom prawidłowo wypełniać pola za pomocą przechowywanych danych.

W przypadku adresów e-mail użyj wartości autocomplete="username", ponieważ username jest rozpoznawana przez menedżerów haseł w nowoczesnych przeglądarkach. Mimo to powinieneś używać wartości type="email". Możesz też użyć wartości id="email" i name="email".

W przypadku danych wejściowych hasła użyj odpowiednich wartości autocomplete i id, aby ułatwić przeglądarkom rozróżnianie nowych i obecnych haseł.

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

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

Użyj ustawień autocomplete="current-password" i id="current-password", aby ustawić hasło

• W formularzu logowania wpisz autocomplete="current-password" i id="current-password", a w formularzu zmiany hasła – wpisz stare hasło użytkownika. Informuje to przeglądarkę, że ma użyć aktualnego hasła zapisanego dla witryny.

W przypadku formularza rejestracyjnego:

<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 poczty e-mail i sugerowanie haseł trochę inaczej, ale efekty są bardzo podobne. W Safari w wersji 11 lub nowszej na komputerze wyświetlany jest menedżer haseł, a następnie używane jest uwierzytelnianie biometryczne (odcisk palca lub rozpoznawanie twarzy), jeśli jest dostępne.

Chrome na komputerze wyświetla sugestie adresów e-mail, pokazuje menedżera haseł i automatycznie uzupełnia hasło.

Systemy haseł i autouzupełniania w przeglądarce nie są proste. Algorytmy służące 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 swoją heurystykę o system przepisów”.

Autouzupełnianie: co deweloperzy powinni wiedzieć, ale nie wiedzą zawiera więcej informacji o używaniu name i autocomplete. Specyfikacja HTML zawiera listę wszystkich 59 możliwych wartości.

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

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

Oto jak Safari robi to na komputerze.

(zalecenie dotyczące silnego, unikalnego hasła jest dostępne w Safari od wersji 12.0).

Wbudowane w przeglądarkę narzędzia do generowania haseł sprawiają, że użytkownicy i deweloperzy nie muszą się zastanawiać, czym jest „mocne hasło”. Ponieważ przeglądarki mogą bezpiecznie przechowywać hasła i w razie potrzeby automatycznie je wypełniać, użytkownicy nie muszą ich zapamiętywać ani wpisywać. Zachęcanie użytkowników do korzystania z wbudowanych w przeglądarkę generatorów haseł zwiększa też prawdopodobieństwo, że w Twojej witrynie będą używać unikalnych, silnych haseł, a mniej prawdopodobieństwo, że będą używać haseł, które mogły zostać przejęte w innych miejscach.

Pomóż chronić użytkowników przed przypadkowymi brakującymi danymi wejściowymi

Dodaj atrybut required do pól adresu e-mail i hasła. Nowoczesne przeglądarki automatycznie wyświetlają podpowiedzi i zaznaczają brakujące dane. Nie wymaga JavaScriptu.

Dla palców i kciuków

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

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

Domyślny rozmiar i odstępy dla pól wprowadzania danych i przycisków są za małe na komputerach, a na urządzeniach mobilnych jest jeszcze gorzej.

Zgodnie z wytycznymi dotyczącymi dostępności na Androidzie zalecany rozmiar docelowy obiektów na ekranie dotykowym to 7–10 mm. Wytyczne Apple dotyczące interfejsu zalecają 48 x 48 pikseli, a wytyczne W3C zalecają co najmniej 44 x 44 piksele CSS. Z tego względu dodaj (co najmniej) około 15 pikseli dopełnienia do elementów wejściowych i przycisków w przypadku urządzeń mobilnych i około 10 pikseli w przypadku komputerów. Wypróbuj to na prawdziwym urządzeniu mobilnym i prawdziwym palcu. Wszystkie przyciski i wejścia powinny być łatwo dostępne.

Elementy dotykowe nie mają odpowiedniej wielkości Audyt Lighthouse może pomóc w zautomatyzowaniu procesu wykrywania elementów wprowadzania danych, które są za małe.

Projektowanie z myślą o użytkownikach

Wyszukaj obiekt dotykowy, a zobaczysz wiele zdjęć palców wskazujących. Jednak w rzeczywistości wiele osób używa kciuków do interakcji z telefonem. Kciuksy są większe niż kciuki, a kontrola jest mniej precyzyjna. To kolejny argument za dostosowaniem rozmiaru docelowych elementów dotykowych.

Ustaw odpowiedni rozmiar tekstu.

Podobnie jak w przypadku rozmiaru i wypełniania, domyślny rozmiar czcionki w przeglądarce dla elementów wprowadzania danych i przycisków jest za mały, zwłaszcza na urządzeniach mobilnych.

Przeglądarki na różnych platformach wyświetlają czcionki w różny sposób, więc trudno jest określić rozmiar czcionki, który sprawdza się wszędzie. Szybki przegląd popularnych witryn wskazuje, że na komputerach rozmiary ikon to 13–16 pikseli: taki rozmiar jest odpowiedni dla tekstu na urządzeniach mobilnych.

Oznacza to, że na urządzeniach mobilnych musisz używać większego rozmiaru piksela: 16px w Chrome na komputery jest całkiem czytelny, ale nawet przy dobrym wzroku trudno jest odczytać tekst 16px w Chrome na Androida. Za pomocą zapytań multimedialnych możesz ustawiać różne rozmiary czcionek w pikselach w zależności od rozmiaru widocznego obszaru. 20px to odpowiedni rozmiar na urządzeniach mobilnych, ale warto przetestować to na znajomych lub współpracownikach, którzy mają słaby wzrok.

W dokumencie nie są używane czytelne rozmiary czcionekAudyt Lighthouse może pomóc Ci zautomatyzować proces wykrywania tekstu, który jest zbyt mały.

Zapewnij wystarczającą ilość wolnego miejsca między danymi wejściowymi

Dodaj wystarczającą ilość marginesu, aby dane wejściowe dobrze działały jako punkty dotykowe. Inaczej mówiąc, staraj się zostawić margines o szerokości palca.

Upewnij się, że dane są wyraźnie widoczne

Domyślny styl obramowania pól wejściowych sprawia, że są one niewidoczne. Są niemal niewidoczne na niektórych platformach, takich jak Chrome na Androida.

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

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

Przeglądarki mają wbudowane funkcje do podstawowej walidacji formularzy w przypadku pól z atrybutem type. Przeglądarki ostrzegają, gdy przesyłasz formularz z nieprawidłową wartością, i wyróżniają problematyczne dane wejściowe.

Możesz użyć selektora CSS :invalid, aby wyróżnić nieprawidłowe dane. Użyj opcji :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.

W razie potrzeby używaj JavaScriptu.

Przełącz wyświetlanie hasła

Dodaj przełącznik Pokaż hasło, aby umożliwić użytkownikom sprawdzanie wpisanego tekstu. Utrudnia, gdy użytkownicy nie widzą wpisanego tekstu. Obecnie nie ma wbudowanego sposobu na wykonanie tej czynności, ale planujemy wdrożenie takiej funkcji. Zamiast tego musisz użyć kodu JavaScript.

Ten kod używa przycisku tekstowego do dodania funkcji 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 wynik końcowy:

Dostęp do pól tekstowych z hasłami

Użyj elementu aria-describedby, aby określić reguły dotyczące haseł, podając identyfikator elementu, który opisuje ograniczenia. Czytniki ekranu podają 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>

Dodając funkcję Pokaż hasło, pamiętaj, aby uwzględnić aria-label, aby ostrzec użytkownika, że hasło zostanie wyświetlone. W przeciwnym razie użytkownicy mogą przypadkowo 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 na stronie Glitch:

Więcej wskazówek na temat tworzenia dostępnych formularzy znajdziesz w artykule Tworzenie dostępnych formularzy.

Weryfikuj w czasie rzeczywistym i przed przesłaniem

Elementy i atrybuty formularza HTML mają wbudowane funkcje podstawowej walidacji, ale warto też używać JavaScriptu, aby przeprowadzać bardziej zaawansowaną walidację podczas wprowadzania przez użytkowników danych i próby przesłania formularza.

Krok 5 formularza logowania w codelab korzysta z interfejsu API weryfikacji ograniczeń (który jest powszechnie obsługiwany) do dodawania weryfikacji niestandardowej za pomocą wbudowanego interfejsu użytkownika przeglądarki w celu ustawienia fokusa i wyświetlania promptów.

Dowiedz się więcej: używaj JavaScript do bardziej złożonej walidacji w czasie rzeczywistym.

Analytics i RUM

Zasada „nie możesz ulepszyć tego, czego nie możesz zmierzyć” dotyczy w szczególnym stopniu formularzy rejestracji i logowania. Musisz wyznaczać cele, mierzyć skuteczność i ulepszać swoją witrynę. I tak w kółko.

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

• Statystyki strony: wyświetlenia stron rejestracji i logowania, współczynniki odrzuceń oraz wyjścia.
• Analiza interakcji: ścieżki celu (gdzie użytkownicy rezygnują z logowania lub procesu logowania?),zdarzenia (jakie działania wykonują użytkownicy podczas interakcji z formularzami?).
• Skuteczność witryny: wskaźniki dotyczące użytkowników (czy formularze rejestracji i logowania są z jakiegoś powodu wolne i jeśli tak, to z jakiego powodu?).

Warto też rozważyć wdrożenie testów A/B, aby wypróbować różne podejścia do rejestracji i logowania, oraz wdrożenia etapowego, aby sprawdzić zmiany na podzbiorze użytkowników przed ich wdrożeniem dla wszystkich użytkowników.

Ogólne wskazówki

Dobrze zaprojektowany interfejs i UX mogą zmniejszyć liczbę porzuconych formularzy logowania:

• Nie zmuszaj użytkowników do szukania logowania. U góry strony umieść link do formularza logowania, używając dobrze zrozumiałych sformułowań, takich jak Zaloguj się, Utwórz konto czy Zarejestruj się.
• Skup się. Formularze rejestracyjne nie są miejscem na rozpraszanie użytkowników ofertami i innymi funkcjami witryny.
• Uprość proces rejestracji. Zbieraj inne dane użytkownika (takie jak adresy lub dane karty kredytowej) tylko wtedy, gdy podanie tych danych jest dla użytkownika wyraźną korzyścią.
• Zanim użytkownicy zaczną wypełniać formularz rejestracji, wyraźnie określ, na czym polega wartość oferty. Jakie korzyści odniosą, gdy się zarejestrują? Daj użytkownikom konkretne zachęty do ukończenia procesu rejestracji.
• Jeśli to możliwe, zezwól użytkownikom na identyfikację 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ść widoczny link Nie pamiętasz hasła?
• Link do dokumentów z warunkami korzystania z usługi i polityką prywatności: od razu wyjaśnij użytkownikom, jak chronisz ich dane.
• Umieścić logo i nazwę firmy lub organizacji na stronach rejestracji i logowania oraz zadbać o to, aby język, czcionki i style były spójne z resztą witryny. Niektóre formularze nie wyglądają na należące 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 na urządzenia mobilne
• Bardziej zaawansowane elementy sterowania formularzem
• Tworzenie formularzy z ułatwieniami dostępu
• Usprawnienie 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.