Mide el autocompletado del navegador en tus formularios

Maud Nalpas
Maud Nalpas

Fecha de publicación: 20 de noviembre de 2024

El éxito del comercio electrónico depende de un proceso de confirmación de la compra sin inconvenientes. Los formularios son fundamentales para las conversiones. Para optimizar la experiencia del usuario, es fundamental comprender cómo interactúan los usuarios con tus formularios. La función Autocompletar desempeña un papel importante en este proceso.

Demostración de Autocompletar en Chrome.
Autocompletar en Chrome

Una experiencia de autocompletado fluida puede generar más conversiones, envíos de formularios más rápidos, menos abandonos de formularios y una mayor satisfacción del usuario.

Sin embargo, ¿tienes visibilidad sobre el uso del autocompletado y los problemas que genera en tu sitio?

En esta guía, se explica cómo recopilar y analizar datos sobre cómo los usuarios usan la función de autocompletar en tus formularios.

A continuación, te indicamos cómo puedes usar estas estadísticas de autorrelleno:

  • Alinea tu enfoque de prueba con los flujos de trabajo de los usuarios reales. Si las estadísticas de uso del autocompletado indican que tus usuarios dependen en gran medida de esta función, debes saber que es fundamental incorporar pruebas de autocompletado en tus flujos de trabajo.
  • Identifica las regresiones. Compara los indicadores de uso de Autocompletar en campos individuales entre las implementaciones que afectan la UX del formulario. Las variaciones grandes pueden significar que un comportamiento de autocompletado tuvo una regresión.
  • Asegúrate de que tu implementación compatible con la función Autocompletar funcione como se espera. Detecta tendencias en las que los usuarios parecen completar manualmente campos en los que preferirías que usaran la función Autocompletar.

Demostración y código

Prueba nuestra demo y, luego, investiga el código en GitHub.

Demostración del observador de autocompletado.
Usa el código de demostración para observar de forma programática la acción del usuario en cada campo del formulario (dejar en blanco, completar manualmente, completar con autocompletado o completar con autocompletado y, luego, modificar el campo). Pruébala.

Solución:

  • Completa automáticamente todos los campos.
  • Completa automáticamente un campo y, luego, vacíalo de forma manual.
  • Completa automáticamente un campo y, luego, modifícalo de forma manual.
  • Completa un campo por completo de forma manual.
  • Deja un campo en blanco.

Navegadores compatibles

La demostración funciona en los dispositivos y las versiones de navegador más recientes. Se basa en la detección de la pseudoclase CSS :autofill, que es compatible con todos los navegadores.

Paso 1: Recopila datos de Autocompletar

Define los estados de Autocompletar

Primero, define los posibles estados de los campos de autocompletar que te interesan:

  • EMPTY: El usuario deja el campo vacío.
  • AUTOFILLED: El usuario completa el campo solo con la función Autocompletar.
  • AUTOFILLED_THEN_MODIFIED: El usuario primero completa el campo con Autocompletar y, luego, edita el valor completado automáticamente de forma manual. Por ejemplo, el usuario completa automáticamente su dirección y detalles de contacto, pero ingresa manualmente un número de teléfono diferente.
  • ONLY_MANUAL: El usuario completa el campo completamente de forma manual.
// Possible values for autofill statuses
const EMPTY = 'empty';
const AUTOFILLED = 'autofilled';
const AUTOFILLED_THEN_MODIFIED = 'autofilled-then-modified';
const ONLY_MANUAL = 'only-manual';

Implementa funciones de utilidad

Ahora es el momento de implementar la funcionalidad principal de este código: verificar si un campo se completó automáticamente. En segundo plano, usa dos funciones:

  • getAllAutofilledFields analiza todos los elementos <input> y <select> dentro de un formulario determinado y verifica la presencia de la seudoclase CSS :autofill. Genera una lista de los elementos que se completaron automáticamente.
  • Luego, checkIsAutofilled verifica si un elemento en particular forma parte de esta 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);

Además, necesitas una función de utilidad para verificar si un campo está vacío.

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

Cómo inicializar el estado de Autocompletar

Crea un objeto global, autofillStatuses, para almacenar el estado de autocompletado de cada campo.

Recopila todos los id de campo del formulario y, luego, inicializa el estado de cada campo en 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 recopilar todos los elementos de campo que te interesan, initializeAutofillStatuses usa una función de utilidad:

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

Observa los cambios

Ya está todo listo para observar el comportamiento del autocompletado.

Adjunta un objeto de escucha de eventos de cambio a cada elemento del formulario. Cuando se produce un cambio, verifica si el elemento se está completando automáticamente con la función de utilidad checkIsAutofilled. Luego, el estado de autocompletado del elemento se actualiza en el objeto autofillStatuses, según los estados actual y anterior.

Por ejemplo, si el estado anterior era AUTOFILLED y el campo ahora no se completó automáticamente (es decir, no tiene la clase :autofill), significa que el campo se actualizó manualmente después del autocompletado. Por lo tanto, el estado se actualiza a 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'));

Envía los resultados a tu servidor

Cuando envíes el formulario, envía el objeto autofillStatuses al servidor. Por ejemplo, en el caso de un formulario de dirección, recibirías los siguientes datos en el servidor:

{
    "name": "only-manual",
    "street-address": "only-manual",
    "postal-code": "autofilled-then-modified",
    "city": "autofilled",
    "country": "autofilled"
}
Demostración del observador de Autocompletar: área de visualización para varios estados de Autocompletar.
Área de visualización para los estados de autocompletado de varios campos. Solo para demostraciones.

Paso 2: Analiza los resultados

Agrupa los objetos autofillStatuses que recibes de muchos usuarios y analiza las tendencias en los datos.

En primer lugar, observa las estadísticas sobre el uso general de la función Autocompletar: ¿qué porcentaje de tus usuarios usa la función Autocompletar del navegador para completar al menos un campo?

Luego, puedes analizar los campos individuales. Por ejemplo, observas que una parte significativa de los usuarios no completa automáticamente ciertos campos que deberían ser compatibles con la función. Ahora puedes investigar los posibles motivos.

  • ¿Los campos <label> no son claros? ¿Hay sugerencias o marcadores de posición que puedan ser engañosos?
  • ¿Usaste la sintaxis correcta para el valor de autocomplete? Un problema común es <input autocomplete="first-name">, que los navegadores no completan porque el valor correcto es "given-name".

Conclusión

Si comprendes y aprovechas el comportamiento del autorrelleno, puedes mejorar la experiencia del usuario en tu sitio web. Implementa las técnicas que se describen en esta guía para obtener estadísticas valiosas sobre la forma en que los usuarios interactúan con tus formularios y para identificar áreas de mejora.

Recuerda que el autocompletado es una herramienta poderosa para optimizar el recorrido del usuario. Optimizar tus formularios para el autocompletado puede crear una experiencia más fácil de usar para los visitantes.

Revisa todos nuestros recursos de autocompletado.