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ą się w danej chwili logować w witrynie, formularz powinien być krytyczny. Dotyczy to zwłaszcza użytkowników korzystających ze słabych połączeń, pośpiechu lub stresu. Źle zaprojektowane formularze logowania mają wysoki współczynnik odrzuceń. Każde odrzucenie może oznaczać zgubnego i niezadowolonego użytkownika – nie tylko utraconą prośbę o zalogowanie się. możliwość.

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

Lista kontrolna

.

Używaj zrozumiałego kodu HTML

Użyj elementów stworzonych na potrzeby zadania: <form>, <label> i <button>. Dzięki nim wbudowane funkcje przeglądarki, ułatwiają ułatwienia dostępu i nadają treści znacznikami.

Użyj konta <form>

Może Cię kusić, aby uwzględnić dane wejściowe w elemencie <div> i obsługiwać dane wejściowe czysto za pomocą JavaScriptu. Ogólnie lepiej jest użyć zwykłego, starego formatu <form> . Dzięki temu witryna będzie dostępna dla czytników ekranu i innych elementów wspomagających urządzeń, obsługuje szereg wbudowanych funkcji przeglądarki, ułatwia tworzenie podstawowych funkcji logowania w starszych przeglądarkach. Występuje błąd JavaScriptu.

Użyj konta <label>

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

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

Z 2 powodów:

  • Kliknięcie etykiety powoduje przejście do jej danych wejściowych. Powiązywanie etykiety z etykietą dane wejściowe za pomocą atrybutu for etykiety z wartościami name lub id danych wejściowych.
  • Czytniki ekranu informują, kiedy etykieta lub dane wejściowe etykiety ostrość.

Nie używaj obiektów zastępczych jako etykiet wejściowych. Ludzie są odpowiedzialni za zapomnienie wpisywanych informacji, zwłaszcza jeśli użytkownicy zaczęli wpisywać tekst. rozproszony („Czy wpisałem adres e-mail, numer telefonu lub konto, ID?”). Istnieje wiele potencjalnych problemów z symbolami zastępczymi: patrz sekcja Nie Używanie obiektu zastępczego Atrybut Symbole zastępcze w polach formularzy to Szkodliwe, jeśli bez obaw.

Chyba najlepiej jest umieścić etykiety nad danymi wejściowymi. Zapewnia to spójność, w wersji na urządzenia mobilne i komputery, a także według AI od Google badania, umożliwia szybsze skanowanie. Otrzymujesz etykiety i dane wejściowe o pełnej szerokości, nie muszą dostosowywać etykiety ani szerokości danych wejściowych, aby dopasować je do tekstu etykiety.

Zrzut ekranu pokazujący pozycję etykiety do wprowadzania danych na urządzeniu mobilnym: obok pola do wprowadzania danych i nad danymi wejściowymi.
Szerokość etykiety i danych wejściowych jest ograniczona, gdy obie znajdują się w tym samym wierszu.

Otwórz zakłócenie pozycji etykiety na urządzenia mobilnego, aby przekonać się na własne oczy.

Użyj konta <button>

Użyj formatu <button> dla przycisków! Elementy przycisków zapewniają łatwo dostępne działanie i wbudowaną formę. funkcji przesyłania i łatwo zmieniać ich styl. Nie ma sensu za pomocą właściwości <div> lub innego elementu udającego, że jest to przycisk.

Upewnij się, że na przycisku przesyłania jest widoczna nazwa. Przykłady obejmują Utwórz konto lub Zaloguj się, a nie Prześlij ani Rozpocznij.

Upewnij się, że formularz został przesłany

Pomóż menedżerom haseł zrozumieć, że przesłano formularz. Dostępne są 2 Jak to zrobić:

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

W przypadku żądania XMLHttpRequest lub fetch sprawdź, czy logowanie są zgłaszane w odpowiedzi i obsługiwane przez przeniesienie formularza jako wskaźnik sukcesu.

Rozważ wyłączenie przycisku Zaloguj się po kliknięciu przez użytkownika . Wielu użytkowników klika przyciski wiele razy nawet w przypadku szybkich i elastycznych stron. Spowalnia to interakcje, powoduje zwiększenie obciążenia serwera.

I na odwrót – nie wyłączaj przesyłania formularza w oczekiwaniu na dane wejściowe użytkownika. Przykład: Nie wyłączaj przycisku Zaloguj się, jeśli użytkownicy nie podali nazwy klienta kod PIN. Użytkownicy mogą coś pominąć w formularzu, a następnie wielokrotnie klikać (wyłączone) Przycisk Zaloguj się, który chyba nie działa. Przynajmniej, jeśli musisz wyłączyć przesyłanie formularza, wyjaśnić użytkownikowi, czego brakuje kliknij 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ć w przypadku kilku użytkowników, ale powoduje dodatkową pracę u wszystkich użytkowników i zwiększa porzucenie . Dwukrotne pytanie też nie ma sensu, jeśli przeglądarki automatycznie uzupełniają adresy e-mail lub zasugeruj silnych haseł. Lepiej umożliwić użytkownikom potwierdzanie adresu e-mail (ale musisz to zrobić) i ułatw im zresetowanie w razie potrzeby hasło.

W pełni wykorzystuj 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.

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

Wpisywane hasła powinny zawierać parametr type="password", aby ukryć tekst hasła i ułatwić wie, że dane wejściowe dotyczą haseł. (Pamiętaj, że przeglądarki używają różnych technik, które pomogą Ci zrozumieć role wejściowe i zdecydować, czy proponować zapisywanie haseł).

Dodaj przełącznik Pokaż hasło, aby umożliwić użytkownikom sprawdzanie wpisany tekst – i nie zapomnij dodać linku Nie pamiętam hasła. Zobacz Włącz wyświetlanie haseł

Formularz logowania Google z ikoną Pokaż hasło.
Wprowadzanie hasła z formularza logowania Google: ikona Pokaż hasło i link Nie pamiętam hasła.

Zapewnianie użytkownikom urządzeń mobilnych odpowiedniej klawiatury

Użyj <input type="email">, aby udostępnić użytkownikom urządzenia mobilne odpowiednią klawiaturę i włącz podstawową, wbudowaną weryfikację adresu e-mail przez przeglądarkę... bez JavaScriptu wymagane!

Jeśli zamiast adresu e-mail musisz podać numer telefonu, funkcja <input type="tel"> włącza klawiaturę telefonu na urządzeniu mobilnym. Możesz też użyć usługi Atrybut inputmode, gdy jest potrzebny: inputmode="numeric" to idealny wybór w przypadku kodu PIN liczby. Wszystko, co chcesz wiedzieć inputmode .

Nie zasłaniaj przycisku Zaloguj się przez klawiaturę telefonu.

Jeśli nie zachowasz ostrożności, klawiatura komórki może zasłaniać formularz lub Co gorsza, częściowo zasłaniać przycisk Zaloguj się. Użytkownicy mogą zrezygnować przed zdając sobie sprawę z tego, co się stało.

Dwa zrzuty ekranu formularza logowania na telefonie z Androidem. Jeden z nich pokazuje, jak przycisk Prześlij jest zasłonięty przez klawiaturę telefonu.
Przycisk Zaloguj się – teraz go nie widać.

W miarę możliwości unikaj wyświetlania tylko adresu e-mail/numer telefonu i hasła oraz przycisku Zaloguj się u góry strony logowania. Inne treści umieść poniżej.

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

Testowanie na różnych urządzeniach

Musisz przeprowadzić testy na różnych urządzeniach docelowych odbiorców i dostosować odpowiednio się zmienia. BrowserStack umożliwia bezpłatne testowanie wersji open source projektów na wielu rzeczywistych urządzeniach i przeglądarkami.

Zrzuty ekranu przedstawiające formularz logowania na iPhonie 7, 8 i 11 Na iPhonie 7 i 8 przycisk logowania jest zasłonięty przez klawiaturę telefonu, ale nie na iPhonie 11
Przycisk Zaloguj się: ukryty na iPhonie 7 i 8, ale nie na iPhonie 11.

Rozważ użycie 2 stron

Niektóre strony (w tym Amazon i eBay) unikają problemu, prosząc o adres e-mail/telefon i hasło na dwóch stronach. Takie podejście upraszcza też Doświadczenie: użytkownik zajmuje się tylko jedną rzeczą w danym momencie.

Zrzut ekranu przedstawiający formularz logowania w witrynie Amazon: adres e-mail/telefon i hasło na 2 oddzielnych „stronach”.
Logowanie dwuetapowe: adres e-mail lub telefon, a następnie hasło.

W idealnej sytuacji najlepiej je zaimplementować za pomocą jednego elementu <form>. Używaj JavaScriptu aby początkowo wyświetlać tylko adres e-mail, potem ukryć go i wyświetlić hasło. Jeśli musisz zmusić użytkownika do przejścia na nową stronę między wpisaniem jego adresu e-mail a , formularz na drugiej stronie powinien zawierać ukryty element do wprowadzania danych z ciągiem e-mail, aby ułatwić menedżerom haseł zapisywanie prawidłowej wartości. Hasło Style formularzy rozpoznawane przez Chromium znajdziesz przykładowy kod.

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 mogli pamiętaj o wpisaniu adresu e-mail i hasła. Jest to szczególnie ważne, na urządzeniach mobilnych oraz jest kluczowe dla adresów e-mail, które zapewniają wysoki współczynnik porzuceń.

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

  1. Atrybuty autocomplete, name, id i type pomagają przeglądarkom zrozumieć roli 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ż danych wejściowych mają stabilną wartość name lub id (nie są generowane losowo przy każdym wczytaniu strony ani wdrożenie w witrynie) oraz aby uzyskać <form> z przyciskiem submit.

  2. Atrybut autocomplete pomaga przeglądarkom poprawnie automatycznie uzupełniać dane wejściowe za pomocą zapisanych danych.

Jako adres e-mail wpisz autocomplete="username", ponieważ username jest rozpoznawany w nowoczesnych przeglądarkach, nawet jeśli należy używać type="email" Jeśli chcesz, możesz użyć usług id="email" i name="email".

Podczas wpisywania hasła użyj odpowiednich wartości autocomplete i id, aby ułatwić przeglądarkom odróżniać nowe i bieżące hasła.

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

  • Podczas rejestracji wpisz hasło autocomplete="new-password" i id="new-password" lub w formularzu zmiany hasła.

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

  • Wpisz hasło w polu autocomplete="current-password" i id="current-password" formularza logowania lub dane wejściowe starego hasła użytkownika w formularzu zmiany hasła. Dzięki temu która ma używać aktualnego hasła zapisanego dla tej strony.

W przypadku formularza rejestracyjnego:

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

Aby się zalogować:

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

Pomoc dla menedżerów haseł

Różne przeglądarki trochę obsługują autouzupełnianie e-maili i sugestie haseł ale rezultaty są bardzo podobne. W przeglądarce Safari w wersji 11 lub nowszej na komputerze: np. wyświetlany jest menedżer haseł, a potem biometryczne uwierzytelnianie (odcisk palca lub rozpoznawanie twarzy) jest możliwe, jeśli jest dostępne.

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

Chrome na komputerze wyświetla sugestie dotyczące e-maili, pokazuje 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-maila, sugestia dotycząca e-maila, menedżer haseł, autouzupełnianie po wybraniu.
Autouzupełnianie procesu logowania w Chrome 84.

Systemy autouzupełniania i hasła w przeglądarce nie są proste. Algorytmy zgadywanie, przechowywanie i wyświetlanie wartości nie są standaryzowane i różnią się od z platformy na platformę. Na przykład, na co wskazuje Hidde de Wideo: Menedżer haseł Firefoksa uzupełnia swoje działania heurystyczne systemu przepisów”.

Autouzupełnianie: co deweloperzy powinni wiedzieć, nie zawiera o wiele więcej informacji na temat korzystania z: name i autocomplete. Atrybut HTML dane techniczne wyświetla wszystkie 59 możliwych wartości.

Włącz w przeglądarce sugerowanie silnego hasła

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

Safari na komputerze robi to tak.

Zrzut ekranu przedstawiający Menedżera haseł Firefox na komputerze.
Proces sugerowania hasła w Safari.

(W przeglądarce Safari od wersji 12.0 dostępna jest silna sugestia dotycząca hasła).

Wbudowane generatory haseł w przeglądarce sprawiają, że użytkownicy i deweloperzy nie muszą aby ustalić, co jest „silnym hasłem” Ponieważ przeglądarki mogą bezpiecznie przechowywać i w razie potrzeby automatycznie uzupełniać je – użytkownicy nie muszą ich zapamiętywać. lub wpisz hasła. Zachęcanie użytkowników do korzystania z wbudowanej przeglądarki oznacza również większe prawdopodobieństwo, że użyją unikalnych, silnych i zmniejsza prawdopodobieństwo ponownego użycia hasła, które może być zostały przejęte w innym miejscu.

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. JavaScript nie jest wymagany.

Zrzut ekranu z przeglądarką Firefox i Chrome na Androida na komputerze z widoczną opcją „Wypełnij to pole” pojawi się prośba o brakujące dane.
Monitowanie i zaznaczanie brakujących danych w przeglądarce Firefox na komputery (wersja 76) oraz Chrome na Androida (wersja 83).

Dla palców i kciuków

Domyślny rozmiar przeglądarki do wszystkiego, co jest związane z elementami do wprowadzania danych i przyciski są zbyt małe, zwłaszcza na urządzeniach mobilnych. Może się to wydawać oczywiste, ale typowy problem z formularzami logowania w wielu witrynach.

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

Domyślny rozmiar i dopełnienie elementów wejściowych i przycisków są za małe na komputerach jeszcze gorzej na komórkach.

Zrzut ekranu przedstawiający niesformatowaną formę w Chrome na komputery i w Chrome na Androida.

Według ułatwień dostępu na Androidzie zalecany rozmiar docelowy obiektów na ekranie dotykowym to 7–10 mm. Interfejs Apple wytyczne zalecają rozmiar 48 x 48 pikseli, a W3C – co najmniej 44 x 44 piks. tego dnia dodaj (co najmniej) około 15 pikseli dopełnienia do elementów wejściowych i przycisków dla na urządzeniach mobilnych i około 10 pikseli w przypadku komputerów. Wypróbuj to na prawdziwym urządzeniu mobilnym, prawdziwy palec lub kciuk. Możesz w wygodny sposób dotknąć każdego ze wejścia i przyciski.

Elementy dotykowe mają nieodpowiedni rozmiar Audyt Lighthouse może pomóc Ci zautomatyzować proces wykrywania elementów wejściowych które są za małe.

Dla kciuków

Wyszukaj docelowy element dotykowy i zobaczysz dużo zdjęć palców wskazujących. Jednak w prawdziwym świecie wielu ludzi ludzie komunikują się z telefonami kciukami. Liczba kciuków jest większa niż palcem wskazującym, a kontrola jest mniej precyzyjna. Ten powód, dla którego należy o odpowiednich rozmiarach docelowych elementów dotykowych.

Powiększ tekst

Podobnie jak w przypadku rozmiaru i dopełnienia, domyślny rozmiar czcionki elementów wejściowych i są zbyt małe, zwłaszcza na urządzeniach mobilnych.

Zrzut ekranu przedstawiający niesformatowaną formę w Chrome na komputerze i na Androidzie.
Domyślny styl na komputerach i urządzeniach mobilnych: wpisany tekst jest zbyt mały, aby był czytelny dla wielu użytkowników.

Przeglądarki na różnych platformach mają różne rozmiary czcionek, dlatego trudno jest to zmienić. i określ rozmiar czcionki, który dobrze sprawdza się wszędzie. Krótka ankieta na temat: Na popularnych stronach internetowych rozmiar wynosi 13–16 pikseli, co odpowiada rozmiarowi fizycznemu. jest dobrym minimum dla reklam tekstowych na komórki.

Oznacza to, że na urządzeniach mobilnych musisz użyć większego rozmiaru piksela: 16px w Chrome komputer jest dość czytelny, ale przy dobrej jakości wzroku może być słabo odczytana. 16px tekstu w Chrome na Androida. Możesz ustawić różne rozmiary w pikselach czcionek rozmiarów widocznego obszaru korzystającego z multimediów, . Aplikacja 20px działa na urządzeniach mobilnych, ale warto ją przetestować ze znajomymi lub kolegów z wadami wzroku.

W dokumencie nie są używane czytelne rozmiary czcionek Audyt Lighthouse może pomóc Ci zautomatyzować proces wykrywania zbyt częstego tekstu bardzo małe.

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

Dodaj taki margines, aby wpisywane dane działały dobrze jak docelowe elementy dotykowe. Innymi słowy, staraj się na marginesie szerokości palca.

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

Domyślny styl obramowania danych wejściowych sprawia, że są one słabo widoczne. Już prawie niewidoczne na niektórych platformach, takich jak Chrome na Androida.

Oprócz dopełnienia dodaj obramowanie: na białym tle zgodnie z ogólną zasadą aby wybrać kolor #ccc lub ciemniejszy.

Zrzut ekranu przedstawiający stylizowany formularz w Chrome na Androida.
Czytelny tekst, widoczne obramowanie danych wejściowych, odpowiednie dopełnienie i marginesy.

Ostrzegaj o nieprawidłowych wartościach wejściowych za pomocą wbudowanych funkcji przeglądarki

Przeglądarki mają wbudowane funkcje służące do podstawowej weryfikacji formularza w przypadku type. Przeglądarki ostrzegają, gdy przesyłasz formularz z nieprawidłową wartością, i ustaw zaznaczenie na problematycznych danych wejściowych.

Zrzut ekranu z formularzem logowania w Chrome na komputerze, przedstawiający prośbę i zaznaczenie związane z nieprawidłową wartością adresu e-mail.
Podstawowa weryfikacja wbudowana w przeglądarce.

Za pomocą selektora arkusza CSS :invalid możesz wyróżnić nieprawidłowe dane. Używaj :not(:placeholder-shown), aby uniknąć wyboru 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 sprawdzanie wprowadzonego tekstu. Użyteczność narasta, gdy użytkownicy nie zobaczy wpisanego tekstu. Obecnie nie ma żadnej wbudowanej metody jednak są też plany implementacji. Za użyć JavaScriptu.

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

Ten kod dodaje funkcję Pokaż hasło przy użyciu przycisku tekstowego.

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 sprawia, że przycisk 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 efekt końcowy:

Zrzuty ekranu przedstawiające formularz logowania z przyciskiem Pokaż tekst hasła w przeglądarce Safari na Macu i iPhonie 7.
Formularz logowania z przyciskiem Pokaż hasło w Safari na Macu i iPhonie 7.

Udostępnij wpisywanie haseł

W polu aria-describedby określ reguły dotyczące haseł, nadając mu identyfikator z opisem ograniczeń. Czytniki ekranu podają tekst etykiety, typ danych wejściowych (hasło) oraz 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>

Podczas dodawania funkcji Pokaż hasło pamiętaj, aby podać aria-label ostrzega o wyświetleniu hasła. 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>

Możesz zobaczyć działanie obu funkcji ARIA w tym przypadku:

W artykule Tworzenie formularzy ułatwień dostępu znajdziesz więcej wskazówek, które pomogą Ci zwiększyć dostępność formularzy.

Weryfikuj w czasie rzeczywistym i przed przesłaniem

Elementy formularza HTML i atrybuty mają wbudowane funkcje do podstawowej weryfikacji ale także przy użyciu JavaScriptu do dokładniejszej weryfikacji, gdy użytkownicy wprowadzania danych i próby przesłania formularza.

Krok 5 formularza logowania Codelab korzysta z walidacji ograniczeń API (czyli szeroko obsługiwane), aby dodać niestandardową weryfikację za pomocą wbudowanego interfejsu przeglądarki do ustawiania ostrości i wyświetlania promptów.

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

Analytics i RUM

„Czego nie można zmierzyć, nie można poprawić” dotyczy zwłaszcza rejestracji, i formularze logowania. Musisz wyznaczyć cele, zmierzyć skuteczność, ulepszyć witrynę i powtarzać.

Wykorzystanie rabatu jest testem, pomocne w testowaniu zmian, ale do stworzenia zrozumieć, jak użytkownicy odbierają formularze rejestracji i logowania:

  • Statystyki strony: wyświetlenia strony po rejestracji i zalogowaniu, współczynniki odrzuceń, i wyjścia.
  • Analiza interakcji: cel ścieżki (gdzie użytkowników rezygnują z procesu logowania się?) i wydarzenia (jakie działania podejmują użytkownicy podczas interakcji z formularzami?)
  • Skuteczność witryny: ukierunkowana na użytkowników (dotyczące rejestracji i logowania) z jakiegoś powodu linki są wolniejsze, a jeśli tak, to jaka jest tego przyczyna?).

Możesz też rozważyć wdrożenie testów A/B, aby wypróbować różnych metod rejestracji i logowania oraz wdrażanie etapowe, zmian na podzbiorze użytkowników przed opublikowaniem zmian dla wszystkich użytkowników.

Ogólne wskazówki

Dobrze zaprojektowany interfejs i wygoda mogą zmniejszyć liczbę porzuceń podczas logowania:

  • Nie zmuszaj użytkowników do szukania logowania. Umieść link do formularza logowania u góry używając dobrze zrozumiałych sformułowań, np. Zaloguj się, Utwórz konto. lub Zarejestruj się.
  • Utrzymuj koncentrację. Formularze rejestracyjne nie służą do rozpraszania uwagi oferty i inne funkcje witryny.
  • Uprość proces rejestracji. zbierania innych danych użytkownika (takich jak adresy lub danych karty kredytowej) tylko wtedy, gdy po udostępnieniu tych danych użytkownicy zauważą wyraźną korzyść z ich udostępnienia. i skalowalnych danych.
  • Zanim użytkownicy zaczną korzystać z formularza rejestracyjnego, wyjaśnij im, jest twierdząca. Jaką korzyść przynosi im zalogowanie się? Konkretne informacje dla użytkowników zachęty 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 użytkownicy mogą nie korzystać z poczty e-mail.
  • Ułatwiaj użytkownikom resetowanie hasła oraz wymagaj, aby funkcja Nie pamiętaj hasło?.
  • Link do warunków korzystania z usługi i polityki prywatności: jasno określ, użytkowników od podstaw, w jaki sposób chronić ich dane.
  • Podczas rejestracji umieść logo oraz nazwę firmy lub organizacji. i upewnij się, że język, czcionki i style w Twojej witrynie. Niektóre formularze nie sprawiają wrażenia, że należą do tej samej witryny co inne zwłaszcza tych, których adresy URL znacznie się od siebie różnią.

Ucz się dalej

Zdjęcie: Meghan Schiereck, Unsplash.