Pomiar autouzupełniania w formularzach przez przeglądarkę

Maud Nalpas
Maud Nalpas

Data publikacji: 20 listopada 2024 r.

Kluczem do sukcesu w e-commerce jest bezproblemowy proces płatności. Formularze są kluczowe dla konwersji. Aby zoptymalizować wrażenia użytkowników, musisz zrozumieć, jak użytkownicy korzystają z formularzy. Ważną rolę w tym procesie odgrywa autouzupełnianie.

Prezentacja autouzupełniania w Chrome
Autouzupełnianie w Chrome

Sprawne działanie funkcji autouzupełniania może zwiększać liczbę konwersji, przyspieszać przesyłanie formularzy, zmniejszać liczbę porzuconych formularzy i podnosić zadowolenie użytkowników.

Czy wiesz, jak użytkownicy korzystają z autouzupełniania i czy napotykają w Twojej witrynie jakieś trudności?

Z tego przewodnika dowiesz się, jak zbierać i analizować dane o tym, jak użytkownicy korzystają z autouzupełniania w formularzach.

Oto jak możesz korzystać z tych statystyk autouzupełniania:

  • Dostosuj podejście do testowania do rzeczywistych procesów użytkownika. Jeśli statystyki dotyczące korzystania z automatycznego wypełniania wskazują, że użytkownicy często korzystają z tego rozwiązania, musisz uwzględnić testowanie automatycznego wypełniania w swoich procesach.
  • Zidentyfikuj regresje. Porównywanie sygnałów dotyczących korzystania z autouzupełniania w poszczególnych polach między wdrożeniami, które wpływają na UX formularza. Duże różnice mogą oznaczać, że zachowanie autouzupełniania się pogorszyło.
  • Sprawdź, czy implementacja obsługująca autouzupełnianie działa zgodnie z oczekiwaniami. Wykrywanie trendów, w których użytkownicy ręcznie wypełniają pola, które powinny być wypełniane automatycznie.

Wersja demonstracyjna i kod

Wypróbuj naszą wersję demonstracyjną i zapoznaj się z kodem na GitHubie.

Demonstracja obserwatora autouzupełniania
Użyj kodu demonstracyjnego, aby za pomocą kodu obserwować działanie użytkownika w każdym polu formularza (pozostaw puste, wypełnij ręcznie, wypełnij za pomocą autouzupełniania lub wypełnij za pomocą autouzupełniania, a potem zmodyfikuj pole). Wypróbuj

Do wypróbowania:

  • automatycznie wypełnić wszystkie pola.
  • Wypełnij pole automatycznie, a potem opróżnij je ręcznie.
  • Pole możesz wypełnić automatycznie, a potem zmodyfikować ręcznie.
  • Wypełnij pole całkowicie ręcznie.
  • Pozostaw pole puste.

Obsługa przeglądarek

Wersja demonstracyjna działa na najnowszych urządzeniach i w najnowszych wersjach przeglądarek. Polega ono na wykrywaniu pseudoklasy CSS :autofill, która jest dobrze obsługiwana w różnych przeglądarkach.

Krok 1. Zbierz dane autouzupełniania

Definiowanie stanów autouzupełniania

Najpierw określ możliwe stany pól autouzupełniania, które Cię interesują:

  • EMPTY: użytkownik pozostawia pole puste.
  • AUTOFILLED: użytkownik wypełnia pole tylko za pomocą automatycznego wypełniania.
  • AUTOFILLED_THEN_MODIFIED: użytkownik najpierw wypełnia pole za pomocą autouzupełniania, a potem ręcznie zmienia jego wartość. Użytkownik wypełnia automatycznie adres i dane kontaktowe, ale ręcznie wpisuje inny numer telefonu.
  • ONLY_MANUAL: użytkownik wypełnia pole całkowicie ręcznie.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

Implementacja funkcji użyteczności

Czas wdrożyć główną funkcję tego kodu: sprawdzić, czy pole zostało właśnie automatycznie wypełnione. W ramach tej funkcji wykorzystywane są 2 funkcje:

  • getAllAutofilledFields sprawdza wszystkie elementy <input><select> w danym formularzu oraz sprawdza, czy występuje pseudoklasa CSS :autofill. Wypisuje listę elementów, które zostały automatycznie wypełnione.
  • checkIsAutofilled sprawdza, czy dany element znajduje się na tej liście.
// Get all elements that are autofilled, using the :autofill pseudo-class
function getAllAutofilledFields(formElement) {
  return formElement.querySelectorAll(':autofill');
}

// Check if the passed element is in the list of autofilled fields
function checkIsAutofilled(allAutofilledFields, fieldElement) {
  return Array.from(allAutofilledFields).includes(fieldElement);
}

// Usage
const allAutofilledFields = getAllAutofilledFields(formElement);
const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);

Dodatkowo potrzebujesz funkcji pomocniczej, która sprawdza, czy pole jest puste.

// Check if the value of the element is empty
function checkIsEmpty(fieldElement) {
  const value = fieldElement.value.trim();
  // value is a string, even for a type = number field
  const isEmpty = value === '';
  return isEmpty;
}

Stan inicjowania autouzupełniania

Utwórz obiekt globalny autofillStatuses, aby przechowywać stan autouzupełniania w każdym polu.

Pobierz wszystkie pola id z formularza i inicjuj stan każdego pola na EMPTY.

// Global variable storing autofill statuses for each field
const autofillStatuses = {};
// Example: {
//     "name": "autofilled",
//     "street-address": "autofilled-then-modified",
//     "country": "only-manual"
// }

// Initialize autofill status for all fields
function initializeAutofillStatuses(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    autofillStatuses[fieldElement.id] = EMPTY;
  });
}

initializeAutofillStatuses(document.getElementById('form'));

Aby zebrać wszystkie interesujące Cię elementy pola, funkcja initializeAutofillStatuses używa funkcji użyteczności:

// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
  return Array.from(formElement.querySelectorAll('input, select'));
}

Obserwowanie zmian

Teraz wszystko jest gotowe do obserwowania działania autouzupełniania.

Do każdego elementu formularza dołącz detektor zdarzenia zmiany. Gdy nastąpi zmiana, sprawdza, czy element jest obecnie wypełniany automatycznie za pomocą funkcji użyteczności checkIsAutofilled. Następnie stan autouzupełniania elementu jest aktualizowany w obiekcie autofillStatuses na podstawie bieżącego i poprzedniego stanu.

Jeśli na przykład poprzedni stan to AUTOFILLED, a pole nie zostało automatycznie wypełnione (czyli nie ma klasy :autofill), oznacza to, że zostało ono zaktualizowane ręcznie po wypełnieniu automatycznym. Stan został zaktualizowany do AUTOFILLED_THEN_MODIFIED.

// Add event listener to all fields to update autofill status
function initializeChangeObserver(formElement) {
  const allFieldsAsArray = getAllFieldsAsArray(formElement);
  allFieldsAsArray.forEach((fieldElement) => {
    fieldElement.addEventListener('change', () => {
      updateAutofillStatus(formElement, fieldElement);
    });
  });
}

// Update autofill status
function updateAutofillStatus(formElement, fieldElement) {
  const isEmpty = checkIsEmpty(fieldElement);
  const allAutofilledFields = getAllAutofilledFields(formElement);
  const isAutofilled = checkIsAutofilled(allAutofilledFields, fieldElement);
  const previousAutofillStatus = autofillStatuses[fieldElement.id];
  if (isEmpty) {
    autofillStatuses[fieldElement.id] = EMPTY;
    // NOTE: if (previousAutofillStatus === AUTOFILLED), the field has just been emptied manually. Autofill can't empty fields.
  } else {
    if (isAutofilled) {
      autofillStatuses[fieldElement.id] = AUTOFILLED;
    } else {
      if (
        previousAutofillStatus === ONLY_MANUAL ||
        previousAutofillStatus === EMPTY
      ) {
        // NOTE: ONLY_MANUAL is only used for fields where autofilled was *never* used. A field where autofilled was used will be AUTOFILLED_THEN_MODIFIED, even if the user has completely retyped the whole value
        autofillStatuses[fieldElement.id] = ONLY_MANUAL;
      } else if (
        previousAutofillStatus === AUTOFILLED ||
        previousAutofillStatus === AUTOFILLED_THEN_MODIFIED
      ) {
        autofillStatuses[fieldElement.id] = AUTOFILLED_THEN_MODIFIED;
      }
    }
  }
}

initializeChangeObserver(document.getElementById('form'));

Wysyłanie wyników do serwera

Po przesłaniu formularza wyślij na serwer obiekt autofillStatuses. Na przykład w przypadku formularza adresu na serwerze będą dostępne te dane:

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
Demonstracja obserwatora automatycznego uzupełniania: obszar wyświetlania różnych stanów automatycznego uzupełniania.
Obszar wyświetlania stanu autouzupełniania w różnych polach. Tylko do celów demonstracyjnych.

Krok 2. Przeanalizuj wyniki

Agregate obiekty autofillStatuses otrzymane od wielu użytkowników i analizuj trendy w danych.

Najpierw sprawdź statystyki dotyczące ogólnego korzystania z autouzupełniania: jaki odsetek użytkowników korzysta z autouzupełniania w przeglądarce, aby wypełnić co najmniej jedno pole?

Następnie możesz przejść do poszczególnych pól. Możesz na przykład zauważyć, że znaczna część użytkowników nie wypełnia automatycznie niektórych pól, które powinny być zgodne z automatycznym wypełnianiem. Możesz teraz sprawdzić potencjalne przyczyny.

  • Czy pola <label>są niejasne? Czy są jakieś wskazówki lub pola zastępcze, które mogą wprowadzać w błąd?
  • Czy używasz prawidłowej składni w przypadku wartości autocomplete? Typowym problemem jest <input autocomplete="first-name">, którego przeglądarki nie wypełniają, ponieważ właściwą wartością jest "given-name".

Podsumowanie

Poznanie i wykorzystanie zachowania związanego z automatycznym wypełnianiem formularzy może pomóc Ci zwiększyć wygodę korzystania z Twojej witryny. Stosuj techniki opisane w tym przewodniku, aby zdobywać cenne informacje o tym, jak użytkownicy wchodzą w interakcję z formularzami, i identyfikować obszary, które można ulepszyć.

Pamiętaj, że autouzupełnianie to potężne narzędzie do usprawniania ścieżki użytkownika. Optymalizacja formularzy pod kątem automatycznego wypełniania może zwiększyć wygodę użytkowników.

Zapoznaj się ze wszystkimi zasobami dotyczącymi automatycznego wypełniania.