Medir o preenchimento automático do navegador nos formulários

Maud Nalpas
Maud Nalpas

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.

Demonstração do preenchimento automático no Chrome.
Preenchimento automático no Chrome

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.

Demonstração do observador de preenchimento automático.
Use o código de demonstração para observar a ação do usuário em cada campo de formulário de forma programática (deixar em branco, preencher manualmente, preencher com preenchimento automático ou preencher com preenchimento automático e modificar o campo). Teste.

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 ids 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"
}
Demonstração do observador de preenchimento automático: área de exibição para vários status de preenchimento automático.
Área de exibição para status de preenchimento automático de vários campos. Apenas para fins de demonstração.

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.