Опубликовано: 20 ноября 2024 г.
Успех электронной коммерции зависит от бесперебойного процесса оформления заказа. Формы имеют решающее значение для конверсий. Чтобы оптимизировать взаимодействие с пользователем, важно понимать, как пользователи взаимодействуют с вашими формами. Автозаполнение играет важную роль в этом процессе.
Плавное автозаполнение может привести к увеличению конверсий, более быстрой отправке форм, снижению количества отказов от форм и повышению удовлетворенности пользователей.
Но есть ли у вас представление об использовании автозаполнения и проблемах на вашем сайте?
В этом руководстве объясняется, как собирать и анализировать данные о том, как пользователи используют автозаполнение в ваших формах.
Вот как вы можете использовать эту информацию об автозаполнении:
- Согласуйте свой подход к тестированию с реальными рабочими процессами пользователей. Если данные об использовании автозаполнения указывают на то, что ваши пользователи в значительной степени полагаются на автозаполнение, вы знаете, что крайне важно включить тестирование автозаполнения в ваши рабочие процессы.
- Выявить регрессии. Сравните сигналы использования автозаполнения в отдельных полях между развертываниями, которые влияют на 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"
.
Заключение
Понимая и используя поведение автозаполнения, вы можете улучшить взаимодействие с пользователем на своем веб-сайте. Внедрите методы, описанные в этом руководстве, чтобы получить ценную информацию о том, как пользователи взаимодействуют с вашими формами, и определить области, требующие улучшения.
Помните, автозаполнение — это мощный инструмент, позволяющий оптимизировать путь пользователя. Оптимизация форм для автозаполнения может сделать их более удобными для посетителей.
Просмотрите все наши ресурсы по автозаполнению .