Publicado em 20 de novembro de 2024
O sucesso do comércio eletrônico depende de um processo de finalização de compra tranquilo. Os formulários são essenciais para as conversões. Para otimizar a experiência do usuário, é essencial entender como ele interage com seus formulários. O preenchimento automático desempenha um papel importante nesse processo.
Uma experiência de preenchimento automático tranquila pode aumentar as conversões, acelerar os envios de formulários, reduzir o abandono de formulários e melhorar a satisfação do usuário.
Mas você tem visibilidade sobre o uso do preenchimento automático e a fricção no seu site?
Este guia explica como coletar e analisar dados sobre como os usuários usam o preenchimento automático nos formulários.
Confira como usar esses insights de preenchimento automático:
- Alinhar sua abordagem de teste com os fluxos de trabalho de usuários reais. Se os insights de uso do preenchimento automático indicarem que os usuários dependem muito dele, é crucial incorporar os testes de preenchimento automático aos seus fluxos de trabalho.
- Identifique regressões. Compare os indicadores de uso do preenchimento automático em campos individuais entre implantações que afetam a UX do formulário. Variações grandes podem significar que um comportamento de preenchimento automático regrediu.
- Confira se a implementação compatível com o preenchimento automático funciona conforme o esperado. Detecte tendências em que os usuários parecem preencher manualmente campos em que você prefere que eles usem o preenchimento automático.
Demonstração e código
Teste nossa demonstração e investigue o código no GitHub.
O que tentar
- Preencha todos os campos automaticamente.
- Preencha um campo e esvazie-o manualmente.
- Preencha um campo automaticamente e depois modifique-o manualmente.
- Preencha um campo totalmente manualmente.
- Deixe um campo em branco.
Suporte ao navegador
A demonstração funciona em dispositivos e versões de navegador mais recentes. Ele depende da detecção da pseudoclasse CSS :autofill, que tem suporte em vários navegadores.
Etapa 1: coletar dados de preenchimento automático
Definir status de preenchimento automático
Primeiro, defina os possíveis status de campo de preenchimento automático em que você está interessado:
EMPTY
: o usuário deixa o campo em branco.AUTOFILLED
: o usuário preenche o campo usando apenas o preenchimento automático.AUTOFILLED_THEN_MODIFIED
: o usuário primeiro preenche o campo usando o preenchimento automático e, em seguida, edita manualmente o valor preenchido automaticamente. Por exemplo, o usuário preenche automaticamente o endereço e os detalhes de contato, mas insere manualmente um número de telefone diferente.ONLY_MANUAL
: o usuário preenche o campo totalmente manualmente.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';
Implementar funções utilitárias
Agora é hora de implementar a funcionalidade principal deste código: verificar se um campo foi preenchido automaticamente. Por trás, isso usa duas funções:
getAllAutofilledFields
analisa todos os elementos<input>
e<select>
em um determinado formulário e verifica a presença da pseudoclasse CSS:autofill
. Ele gera uma lista de elementos que foram preenchidos automaticamente.checkIsAutofilled
verifica se um elemento específico faz parte dessa lista.
// 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);
Além disso, você precisa de uma função utilitária para verificar se um campo está vazio.
// 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;
}
Inicializar o status de preenchimento automático
Crie um objeto global, autofillStatuses
, para armazenar o status de preenchimento automático de
cada campo.
Colete todos os id
s de campo do formulário e inicialize o status de cada campo como
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'));
Para coletar todos os elementos de campo em que você tem interesse,
initializeAutofillStatuses
usa uma função de utilitário:
// Collect all field elements for a given form
function getAllFieldsAsArray(formElement) {
return Array.from(formElement.querySelectorAll('input, select'));
}
Observar as mudanças
Agora está tudo pronto para observar o comportamento de preenchimento automático.
Anexe um listener de eventos de mudança a cada elemento do formulário. Quando uma mudança ocorre, ele
verifica se o elemento está sendo preenchido automaticamente usando a
função utilitária checkIsAutofilled
. Em seguida, o status de preenchimento automático do elemento é
atualizado no objeto autofillStatuses
com base nos estados atual e
anterior.
Por exemplo, se o status anterior era AUTOFILLED
e o campo não foi
preenchido automaticamente (ou seja, não tem a classe :autofill
), significa que o
campo foi atualizado manualmente após o preenchimento automático. Então o estado é atualizado para
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'));
Enviar os resultados para o servidor
Após o envio do formulário, envie o objeto autofillStatuses
para o servidor. Por
exemplo, para um formulário de endereço, você receberia os seguintes dados no
servidor:
{
"name": "only-manual",
"street-address": "only-manual",
"postal-code": "autofilled-then-modified",
"city": "autofilled",
"country": "autofilled"
}
Etapa 2: analisar os resultados
Agrupe os objetos autofillStatuses
recebidos de vários usuários e
analise as tendências nos dados.
Primeiro, analise os insights sobre o uso geral do preenchimento automático: qual porcentagem dos seus usuários usa o preenchimento automático do navegador para preencher pelo menos um campo?
Em seguida, você pode analisar campos individuais. Por exemplo, você observa que uma parte significativa dos usuários não preenche automaticamente determinados campos que deveriam ser compatíveis com o preenchimento automático. Agora você pode investigar os possíveis motivos.
- Os campos
<label>
estão claros? Há dicas ou marcadores que possam ser enganosos? - Você usou a sintaxe correta para o valor
autocomplete? Um problema comum é
<input autocomplete="first-name">
, que os navegadores não preenchem porque o valor adequado é"given-name"
.
Conclusão
Ao entender e aproveitar o comportamento de preenchimento automático, você pode melhorar a experiência do usuário no seu site. Implemente as técnicas descritas neste guia para ter insights valiosos sobre como os usuários interagem com seus formulários e identificar áreas de melhoria.
O preenchimento automático é uma ferramenta poderosa para simplificar a jornada do usuário. Otimizar seus formulários para preenchimento automático pode criar uma experiência mais fácil de usar para os visitantes.
Confira todos os nossos recursos de preenchimento automático.