Измерьте автозаполнение браузером ваших форм

Мод Налпас
Maud Nalpas

Опубликовано: 20 ноября 2024 г.

Успех электронной коммерции зависит от бесперебойного процесса оформления заказа. Формы имеют решающее значение для конверсий. Чтобы оптимизировать взаимодействие с пользователем, важно понимать, как пользователи взаимодействуют с вашими формами. Автозаполнение играет важную роль в этом процессе.

Демонстрация автозаполнения в Chrome.
Автозаполнение в Chrome

Плавное автозаполнение может привести к увеличению конверсий, более быстрой отправке форм, снижению количества отказов от форм и повышению удовлетворенности пользователей.

Но есть ли у вас представление об использовании автозаполнения и проблемах на вашем сайте?

В этом руководстве объясняется, как собирать и анализировать данные о том, как пользователи используют автозаполнение в ваших формах.

Вот как вы можете использовать эту информацию об автозаполнении:

  • Согласуйте свой подход к тестированию с реальными рабочими процессами пользователей. Если данные об использовании автозаполнения указывают на то, что ваши пользователи в значительной степени полагаются на автозаполнение, вы знаете, что крайне важно включить тестирование автозаполнения в ваши рабочие процессы.
  • Выявить регрессии. Сравните сигналы использования автозаполнения в отдельных полях между развертываниями, которые влияют на UX формы. Большие различия могут означать, что поведение автозаполнения ухудшилось.
  • Убедитесь, что ваша реализация с поддержкой автозаполнения работает должным образом. Выявляйте тенденции, когда пользователи вручную заполняют поля, для которых вы предпочитаете использовать автозаполнение.

Демо и код

Поиграйтесь с нашей демо-версией и изучите код на GitHub .

Демо наблюдателя автозаполнения.
Используйте демонстрационный код, чтобы программно наблюдать за действиями пользователя в каждом поле формы (оставить пустым, заполнить вручную, заполнить с помощью автозаполнения или заполнить с помощью автозаполнения, а затем изменить поле). Попробуйте .

Что стоит попробовать:

  • Автозаполнение всех полей.
  • Автозаполните поле, а затем очистите его вручную.
  • Автозаполните поле, а затем измените его вручную.
  • Заполните поле полностью вручную.
  • Оставьте поле пустым.

Поддержка браузера

Демо-версия работает на новейших устройствах и версиях браузеров. Он основан на обнаружении псевдокласса CSS :autofill , который хорошо поддерживается во всех браузерах.

Шаг 1. Соберите данные автозаполнения

Определение статусов автозаполнения

Сначала определите возможные статусы полей автозаполнения, которые вас интересуют:

  • EMPTY : пользователь оставляет поле пустым.
  • AUTOFILLED : пользователь заполняет поле, используя только автозаполнение.
  • AUTOFILLED_THEN_MODIFIED : пользователь сначала заполняет поле с помощью автозаполнения, а затем вручную редактирует значение автозаполнения. Например, пользователь автоматически заполняет свой адрес и контактные данные, но вручную вводит другой номер телефона.
  • ONLY_MANUAL : пользователь заполняет поле полностью вручную.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

Реализация служебных функций

Теперь пришло время реализовать основную функциональность этого кода: проверку того, было ли поле только что заполнено автоматически. Под капотом это использует две функции:

  • getAllAutofilledFields просматривает все элементы <input> и <select> в заданной форме и проверяет наличие псевдокласса CSS :autofill . Он выводит список элементов, которые были заполнены автоматически.
  • checkIsAutofilled затем проверяет, является ли конкретный элемент частью этого списка.
// 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);

Кроме того, вам нужна служебная функция, чтобы проверить, пусто ли поле.

// 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;
}

Инициализировать статус автозаполнения

Создайте глобальный объект autofillStatuses для хранения статуса автозаполнения каждого поля.

Соберите все id полей из формы и инициализируйте статус каждого поля как 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'));

Чтобы собрать все интересующие вас элементы поля, initializeAutofillStatuses использует служебную функцию:

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

Наблюдайте за изменениями

Теперь все готово для наблюдения за поведением автозаполнения.

Прикрепите прослушиватель событий изменения к каждому элементу формы. Когда происходит изменение, он проверяет, выполняется ли в данный момент автозаполнение элемента, с помощью служебной функции checkIsAutofilled . Затем статус автозаполнения элемента обновляется в объекте autofillStatuses на основе текущего и предыдущего состояний.

Например, если предыдущий статус был AUTOFILLED , а теперь поле не было автозаполнено (то есть у него нет класса :autofill ), это означает, что поле было обновлено вручную после автозаполнения. Таким образом, состояние обновляется до 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'));

Отправьте результаты на свой сервер

После отправки формы отправьте объект autofillStatuses на сервер. Например, для формы адреса вы получите на сервере следующие данные:

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
Демо-версия обозревателя автозаполнения: область отображения различных статусов автозаполнения.
Область отображения статусов автозаполнения различных полей. Только для демонстрационных целей.

Шаг 2: Проанализируйте результаты

Объедините объекты autofillStatuses , которые вы получаете от многих пользователей, и проанализируйте тенденции в данных.

Во-первых, посмотрите на статистику общего использования автозаполнения: какой процент ваших пользователей использует автозаполнение браузера для заполнения хотя бы одного поля?

Затем вы можете погрузиться в отдельные поля. Например, вы заметили, что значительная часть пользователей не заполняет автоматически определенные поля, которые должны быть совместимы с автозаполнением. Теперь вы можете исследовать потенциальные причины.

  • Поле <label> неясно? Есть ли какие-либо подсказки или заполнители, которые могут ввести в заблуждение?
  • Использовали ли вы правильный синтаксис для значения автозаполнения ? Распространенной проблемой является <input autocomplete="first-name"> , который браузеры не заполняют, поскольку правильное значение — "given-name" .

Заключение

Понимая и используя поведение автозаполнения, вы можете улучшить взаимодействие с пользователем на своем веб-сайте. Внедрите методы, описанные в этом руководстве, чтобы получить ценную информацию о том, как пользователи взаимодействуют с вашими формами, и определить области, требующие улучшения.

Помните, автозаполнение — это мощный инструмент, позволяющий оптимизировать путь пользователя. Оптимизация форм для автозаполнения может сделать их более удобными для посетителей.

Просмотрите все наши ресурсы по автозаполнению .