Prácticas recomendadas para los formularios de pago y dirección

Maximiza las conversiones ayudando a tus usuarios a completar los formularios de dirección y pago de la forma más rápida y sencilla posible.

Sam Dutton

Los formularios bien diseñados ayudan a los usuarios y aumentan los porcentajes de conversiones. Una pequeña corrección puede marcar una gran diferencia.

Este es un ejemplo de un formulario de pago simple que demuestra todas las prácticas recomendadas:

Este es un ejemplo de un formulario de dirección simple que demuestra todas las prácticas recomendadas:

Lista de tareas

• Usa elementos HTML significativos: <form>, <input>, <label> y <button>.
• Etiqueta cada campo de formulario con un elemento <label>.
• Usa atributos de elementos HTML para acceder a las funciones integradas del navegador, en particular, type y autocomplete con los valores adecuados.
• Evita usar type="number" para números que no se deben incrementar, como los números de tarjetas de pago. En su lugar, usa type="text" y inputmode="numeric".
• Si hay un valor de autocompletado adecuado disponible para un input, select o textarea, debes usarlo.
• Para ayudar a los navegadores a autocompletar formularios, asigna valores estables a los atributos name y id de entrada que no cambien entre las cargas de página o las implementaciones del sitio web.
• Inhabilita los botones de envío una vez que se hayan presionado o se haya hecho clic en ellos.
• Valida los datos durante el ingreso, no solo cuando se envía el formulario.
• Establece la opción de comprar como invitado como predeterminada y simplifica la creación de cuentas una vez que se complete la compra.
• Muestra el progreso del proceso de confirmación de la compra en pasos claros con llamados a la acción claros.
• Limita los posibles puntos de salida de la confirmación de la compra quitando el desorden y las distracciones.
• Muestra todos los detalles del pedido en la confirmación de la compra y realiza ajustes de forma sencilla.
• No solicites datos que no necesites.
• Solicita nombres con una sola entrada, a menos que tengas un buen motivo para no hacerlo.
• No apliques solo caracteres latinos para los nombres y los nombres de usuario.
• Permite una variedad de formatos de dirección.
• Considera usar un solo textarea para la dirección.
• Usa la función de autocompletar para la dirección de facturación.
• Internacionaliza y localiza donde sea necesario.
• Considera evitar la búsqueda de direcciones por código postal.
• Usa valores de autocompletar adecuados para las tarjetas de pago.
• Usa una entrada única para los números de tarjetas de pago.
• Evita usar elementos personalizados si interrumpen la experiencia de autocompletado.
• Realiza pruebas tanto en el campo como en el lab: estadísticas de páginas, estadísticas de interacciones y medición del rendimiento de los usuarios reales.
• Realiza pruebas en una variedad de navegadores, dispositivos y plataformas.

Usa HTML significativo

Usa los elementos y atributos creados para el trabajo:

• <form>, <input>, <label> y <button>
• type, autocomplete y inputmode

Estos habilitan la funcionalidad integrada del navegador, mejoran la accesibilidad y agregan significado a tu lenguaje de marcado.

Usa los elementos HTML según lo previsto

Coloca tu formulario en una etiqueta <form>

Es posible que sientas la tentación de no envolver tus elementos <input> en un <form> y de controlar el envío de datos únicamente con JavaScript.

No lo hagas.

Un <form> de HTML te brinda acceso a un conjunto potente de funciones integradas en todos los navegadores actualizados y puede ayudar a que tu sitio sea accesible para lectores de pantalla y otros dispositivos de asistencia. Un <form> también facilita la compilación de funciones básicas para navegadores más antiguos con compatibilidad limitada con JavaScript y la habilitación del envío de formularios, incluso si hay un error en tu código, y para la pequeña cantidad de usuarios que inhabilitan JavaScript.

Si tienes más de un componente de página para la entrada del usuario, asegúrate de colocar cada uno en su propio elemento <form>. Por ejemplo, si tienes una búsqueda y un registro en la misma página, coloca cada uno en su propio elemento <form>.

Usa <label> para etiquetar elementos

Para etiquetar un <input>, <select> o <textarea>, usa un <label>.

Asocia una etiqueta con una entrada asignando al atributo for de la etiqueta el mismo valor que el atributo id de la entrada.

<label for="address-line1">Address line 1</label>
<input id="address-line1" …>

Usa una sola etiqueta para una sola entrada: no intentes etiquetar varias entradas con una sola etiqueta. Esto funciona mejor para los navegadores y los lectores de pantalla. Si se presiona o se hace clic en una etiqueta, el enfoque se mueve a la entrada con la que está asociada, y los lectores de pantalla anuncian el texto de la etiqueta cuando la etiqueta o la entrada de la etiqueta reciben el enfoque.

Crea botones útiles

Usa <button> para los botones. También puedes usar <input type="submit">, pero no uses un div ni algún otro elemento aleatorio que actúe como botón. Los elementos de botón proporcionan un comportamiento accesible, una funcionalidad integrada de envío de formularios y se les puede aplicar diseño fácilmente.

Asigna a cada botón de envío de formulario un valor que indique lo que hace. Para cada paso hacia la confirmación de la compra, usa un llamado a la acción descriptivo que muestre el progreso y haga que el siguiente paso sea obvio. Por ejemplo, etiqueta el botón de envío en tu formulario de dirección de entrega como Proceder al pago en lugar de Continuar o Guardar.

Considera inhabilitar el botón de envío una vez que el usuario lo haya presionado o haya hecho clic en él, en especial cuando esté realizando un pago o un pedido. Muchos usuarios hacen clic en los botones varias veces, incluso si funcionan bien. Esto puede arruinar la confirmación de la compra y aumentar la carga del servidor.

const form = document.querySelector('form');
const submitButton = form.querySelector('button[type="submit"]');

form.addEventListener('submit', () => {
  submitButton.disabled = true;
  submitButton.textContent = 'Placing order…';
});

Por otro lado, no inhabilites un botón de envío que espera una entrada de usuario completa y válida. Por ejemplo, no dejes inhabilitado un botón Guardar dirección porque falta algo o no es válido. Eso no ayuda al usuario, ya que puede seguir presionando o haciendo clic en el botón y suponer que no funciona. En su lugar, si los usuarios intentan enviar un formulario con datos no válidos, explícales qué salió mal y qué deben hacer para corregirlo. Esto es especialmente importante en dispositivos móviles, donde el ingreso de datos es más difícil y es posible que los datos de formulario faltantes o no válidos no se vean en la pantalla del usuario cuando intente enviar un formulario.

Aprovecha al máximo los atributos HTML

Facilita el ingreso de datos para los usuarios

Usa el atributo type de entrada adecuado para proporcionar el teclado correcto en dispositivos móviles y habilitar la validación integrada básica del navegador.

Por ejemplo, usa type="email" para las direcciones de correo electrónico y type="tel" para los números de teléfono.

En el caso de las fechas, intenta evitar el uso de elementos select personalizados. Si no se implementan correctamente, interrumpen la experiencia de autocompletado y no funcionan en los navegadores más antiguos. Para números como el año de nacimiento, considera usar un elemento input en lugar de un select, ya que ingresar dígitos de forma manual puede ser más fácil y menos propenso a errores que seleccionar de una lista desplegable larga, especialmente en dispositivos móviles. Usa inputmode="numeric" para garantizar que se muestre el teclado correcto en dispositivos móviles y agrega sugerencias de validación y formato con texto o un marcador de posición para asegurarte de que el usuario ingrese los datos en el formato adecuado.

Usa la función de autocompletar para mejorar la accesibilidad y ayudar a los usuarios a evitar volver a ingresar datos

El uso de valores de autocomplete adecuados permite que los navegadores ayuden a los usuarios almacenando datos de forma segura y completando automáticamente los valores de input, select y textarea. Esto es especialmente importante en dispositivos móviles y fundamental para evitar porcentajes de abandono de formularios altos. La función Autocompletar también proporciona varios beneficios de accesibilidad.

Si hay un valor de autocompletado adecuado disponible para un campo de formulario, debes usarlo. MDN Web Docs tiene una lista completa de valores y explicaciones sobre cómo usarlos correctamente.

Valores estables

Dirección de facturación

De forma predeterminada, establece la dirección de facturación para que sea la misma que la de entrega. Para reducir el desorden visual, proporciona un vínculo para editar la dirección de facturación (o usa los elementos summary y details) en lugar de mostrar la dirección de facturación en un formulario.

Usa valores de autocompletado adecuados para la dirección de facturación, tal como lo haces para la dirección de envío, de modo que el usuario no tenga que ingresar datos más de una vez. Agrega una palabra de prefijo a los atributos de autocompletado si tienes valores diferentes para las entradas con el mismo nombre en secciones distintas.

<input autocomplete="shipping address-line1" ...>
<!-- Other fields omitted. -->
<input autocomplete="billing address-line1" ...>

Ayuda a los usuarios a ingresar los datos correctos

Evita "regañar" a los clientes porque "hicieron algo mal". En su lugar, ayuda a los usuarios a completar formularios con mayor rapidez y facilidad, y a solucionar los problemas a medida que ocurren. Durante el proceso de confirmación de la compra, los clientes intentan pagarle a tu empresa por un producto o servicio; tu trabajo es ayudarlos, no castigarlos.

Puedes agregar atributos de restricción a los elementos de formulario para especificar valores aceptables, incluidos min, max y pattern. El estado de validez del elemento se establece automáticamente según si el valor del elemento es válido, al igual que las pseudoclases CSS :valid y :invalid, que se pueden usar para aplicar diseño a elementos con valores válidos o no válidos.

Por ejemplo, el siguiente código HTML especifica la entrada para un año de nacimiento entre 1900 y 2020. El uso de type="number" restringe los valores de entrada solo a números, dentro del rango especificado por min y max. Si intentas ingresar un número fuera del rango, la entrada se configurará para tener un estado no válido.

En el siguiente ejemplo, se usa pattern="[\d ]{10,30}" para garantizar que el número de tarjeta de pago sea válido y, al mismo tiempo, permitir espacios:

Los navegadores actualizados también realizan una validación básica de las entradas con el tipo email o url.

Cuando se envía un formulario, los navegadores enfocan automáticamente los campos con valores obligatorios problemáticos o faltantes. No se requiere JavaScript.

Valida los datos de forma intercalada y proporciona comentarios al usuario a medida que ingresa datos, en lugar de proporcionar una lista de errores cuando hace clic en el botón de envío. Si necesitas validar los datos en tu servidor después de que se envíe el formulario, enumera todos los problemas que se encuentren y destaca claramente todos los campos del formulario con valores no válidos. Además, muestra un mensaje intercalado junto a cada campo problemático en el que se explique qué se debe corregir. Revisa los registros del servidor y los datos de estadísticas para detectar errores comunes. Es posible que debas rediseñar el formulario.

También debes usar JavaScript para realizar una validación más sólida mientras los usuarios ingresan datos y cuando envían el formulario. Usa la API de validación de restricciones (que es ampliamente compatible) para agregar una validación personalizada con la IU integrada del navegador para establecer el enfoque y mostrar mensajes.

Obtén más información en Validación de formularios del cliente.

Ayuda a los usuarios a evitar que falten datos obligatorios

Usa el atributo required en las entradas para los valores obligatorios.

Cuando se envía un formulario, los navegadores actualizados solicitan automáticamente que se completen los campos required con datos faltantes y se enfocan en ellos. Además, puedes usar la pseudoclase :required para destacar los campos obligatorios. No se requiere JavaScript.

Agrega un asterisco a la etiqueta de cada campo obligatorio y una nota al principio del formulario para explicar qué significa el asterisco.

Simplifica la confirmación de la compra

Cierra la brecha del comercio móvil

Imagina que tus usuarios tienen un presupuesto de fatiga. Si lo agotas, tus usuarios se irán.

Debes reducir la fricción y mantener el enfoque, especialmente en dispositivos móviles. Muchos sitios obtienen más tráfico en dispositivos móviles, pero más conversiones en computadoras de escritorio, un fenómeno conocido como la brecha del comercio móvil. Es posible que los clientes simplemente prefieran completar una compra en una computadora de escritorio, pero los porcentajes de conversiones móviles más bajos también son el resultado de una experiencia del usuario deficiente. Tu trabajo es minimizar las conversiones perdidas en dispositivos móviles y maximizar las conversiones en computadoras de escritorio. Las investigaciones demostraron que existe una gran oportunidad para brindar una mejor experiencia con los formularios para dispositivos móviles.

Sobre todo, es más probable que los usuarios abandonen los formularios que parecen largos, que son complejos y que no tienen un sentido de dirección. Esto es especialmente cierto cuando los usuarios están en pantallas más pequeñas, distraídos o apurados. Solicita la menor cantidad de datos posible.

Establece la opción de comprar como invitado como predeterminada

En el caso de una tienda en línea, la forma más sencilla de reducir las dificultades con los formularios es establecer la opción de comprar como invitado de forma predeterminada. No obligues a los usuarios a crear una cuenta antes de realizar una compra. No permitir la compra como invitado se cita como un motivo importante para abandonar el carrito de compras.

Puedes ofrecer el registro de la cuenta después de la confirmación de la compra. En ese momento, ya tienes la mayoría de los datos que necesitas para configurar una cuenta, por lo que la creación de la cuenta debería ser rápida y fácil para el usuario.

Muestra el progreso de la confirmación de la compra

Puedes hacer que el proceso de confirmación de la compra parezca menos complejo si muestras el progreso y dejas en claro qué se debe hacer a continuación. En el siguiente video, se muestra cómo lo logra la tienda minorista del Reino Unido johnlewis.com.

¡No pierdas el impulso! Para cada paso hacia el pago, usa encabezados de página y valores de botones descriptivos que dejen en claro lo que se debe hacer ahora y cuál es el siguiente paso de la confirmación de la compra.

Usa el atributo enterkeyhint en las entradas de formulario para establecer la etiqueta de la tecla Intro del teclado para dispositivos móviles. Por ejemplo, usa enterkeyhint="previous" y enterkeyhint="next" en un formulario de varias páginas, enterkeyhint="done" para la entrada final del formulario y enterkeyhint="search" para una entrada de búsqueda.

El atributo enterkeyhint es compatible con iOS y Android. Puedes obtener más información en la explicación de enterkeyhint.

Facilita que los usuarios vayan y vuelvan dentro del proceso de confirmación de la compra para que puedan ajustar su pedido con facilidad, incluso cuando se encuentren en el paso final del pago. Muestra todos los detalles del pedido, no solo un resumen limitado. Permite que los usuarios ajusten fácilmente las cantidades de artículos desde la página de pago. Tu prioridad en la confirmación de la compra es evitar interrumpir el progreso hacia la conversión.

Quitar distracciones

Limita los posibles puntos de salida quitando el desorden visual y las distracciones, como las promociones de productos. Muchos minoristas exitosos incluso quitan la navegación y la búsqueda de la confirmación de la compra.

Mantén el recorrido enfocado. Este no es el momento de tentar a los usuarios para que hagan otra cosa.

En el caso de los usuarios recurrentes, puedes simplificar aún más el proceso de confirmación de compra ocultando los datos que no necesitan ver. Por ejemplo, muestra la dirección de entrega en texto sin formato (no en un formulario) y permite que los usuarios la cambien siguiendo un vínculo.

Facilita el ingreso del nombre y la dirección

Solo solicita los datos que necesitas

Antes de comenzar a programar tus formularios de nombre y dirección, asegúrate de comprender qué datos son obligatorios. No solicites datos que no necesites. La forma más sencilla de reducir la complejidad de un formulario es quitar los campos innecesarios. Esto también es bueno para la privacidad del cliente y puede reducir el costo y la responsabilidad de los datos del backend.

Usa una sola entrada de nombre

Permite que los usuarios ingresen su nombre en un solo campo, a menos que tengas un buen motivo para almacenar por separado los nombres de pila, los apellidos, los títulos honoríficos o cualquier otra parte del nombre. Usar una sola entrada de nombre hace que los formularios sean menos complejos, permite cortar y pegar, y simplifica la función Autocompletar.

En particular, a menos que tengas un buen motivo para no hacerlo, no te molestes en agregar una entrada independiente para un prefijo o título (como Sra., Dr. o Lord). Los usuarios pueden escribirlo con su nombre si lo desean. Además, el autocompletado de honorific-prefix actualmente no funciona en la mayoría de los navegadores, por lo que agregar un campo para el prefijo o el título del nombre interrumpirá la experiencia de autocompletar el formulario de dirección para la mayoría de los usuarios.

Habilita el autocompletado de nombres

Usa name para un nombre completo:

<input autocomplete="name" ...>

Si realmente tienes un buen motivo para dividir las partes del nombre, asegúrate de usar los valores de autocompletado adecuados:

• honorific-prefix
• given-name
• nickname
• additional-name-initial
• additional-name
• family-name
• honorific-suffix

Permitir nombres internacionales

Te recomendamos validar las entradas de nombres o restringir los caracteres permitidos para los datos de nombres. Sin embargo, debes ser lo menos restrictivo posible con los alfabetos. Es de mala educación que te digan que tu nombre "no es válido".

Para la validación, evita usar expresiones regulares que solo coincidan con caracteres latinos. La opción Solo caracteres latinos excluye a los usuarios con nombres o direcciones que incluyen caracteres que no están en el alfabeto latino. En su lugar, permite la coincidencia de letras Unicode y asegúrate de que tu backend admita Unicode de forma segura como entrada y salida. Los navegadores modernos admiten Unicode en expresiones regulares.

<!-- Names with non-Latin characters (such as Françoise or Jörg) are 'invalid'. -->
<input pattern="[\w \-]+" ...>

<!-- Accepts Unicode letters. -->
<input pattern="[\p{L} \-]+" ...>

Permite una variedad de formatos de dirección

Cuando diseñes un formulario de dirección, ten en cuenta la desconcertante variedad de formatos de dirección, incluso dentro de un mismo país. Ten cuidado de no hacer suposiciones sobre las direcciones "normales". (Consulta UK Address Oddities! si no te convence).

Crea formularios de direcciones flexibles

No obligues a los usuarios a intentar ajustar su dirección en campos de formulario que no se adaptan a ella.

Por ejemplo, no insistas en que se ingresen el número de la casa y el nombre de la calle en entradas separadas, ya que muchas direcciones no usan ese formato, y los datos incompletos pueden interrumpir la función de autocompletar del navegador.

Ten especial cuidado con los campos de dirección de required. Por ejemplo, las direcciones de las ciudades grandes del Reino Unido no tienen condado, pero muchos sitios aún obligan a los usuarios a ingresar uno.

Usar dos líneas de dirección flexibles puede funcionar bastante bien para una variedad de formatos de dirección.

<input autocomplete="address-line1" id="address-line1" ...>
<input autocomplete="address-line2" id="address-line2" ...>

Agrega etiquetas para que coincidan:

<label for="address-line1">
Address line 1 (or company name)
</label>
<input autocomplete="address-line1" id="address-line1" ...>

<label for="address-line2">
Address line 2 (optional)
</label>
<input autocomplete="address-line2" id="address-line2" ...>

Considera usar un solo campo de texto para la dirección

La opción más flexible para las direcciones es proporcionar un solo textarea.

El enfoque de textarea se adapta a cualquier formato de dirección y es ideal para cortar y pegar, pero ten en cuenta que es posible que no se ajuste a tus requisitos de datos y que los usuarios se pierdan la función de autocompletar si antes solo usaban formularios con address-line1 y address-line2.

Para un área de texto, usa street-address como el valor de autocompletar.

Este es un ejemplo de un formulario que muestra el uso de un solo textarea para la dirección:

Internacionaliza y localiza tus formularios de dirección

Es especialmente importante que los formularios de dirección tengan en cuenta la internacionalización y la localización, según la ubicación de los usuarios.

Ten en cuenta que los nombres de las partes de la dirección varían, al igual que los formatos de dirección, incluso dentro del mismo idioma.

    ZIP code: US
 Postal code: Canada
    Postcode: UK
     Eircode: Ireland
         PIN: India

Puede ser irritante o desconcertante que se te presente un formulario que no se ajusta a tu dirección o que no usa las palabras que esperas.

Es posible que sea necesario personalizar los formularios de dirección para varias configuraciones regionales en tu sitio, pero puede ser adecuado usar técnicas para maximizar la flexibilidad del formulario (como se describió anteriormente). Si no localizas tus formularios de dirección, asegúrate de comprender las prioridades clave para abordar una variedad de formatos de dirección:

• Evita ser demasiado específico con las partes de la dirección, como insistir en el nombre de la calle o el número de la casa.
• Siempre que sea posible, evita que los campos sean required. Por ejemplo, las direcciones de muchos países no tienen código postal, y las direcciones rurales pueden no tener un nombre de calle o ruta.
• Usa nombres inclusivos: "País o región" en lugar de "País"; "Código postal" en lugar de "Código postal de EE.UU.".

Mantén la flexibilidad. El ejemplo de formulario de dirección simple anterior se puede adaptar para que funcione "lo suficientemente bien" en muchas configuraciones regionales.

Considera evitar la búsqueda de direcciones por código postal

Algunos sitios web usan un servicio para buscar direcciones según el código postal. Esto puede ser razonable para algunos casos de uso, pero debes tener en cuenta las posibles desventajas.

La sugerencia de dirección por código postal no funciona para todos los países y, en algunas regiones, los códigos postales pueden incluir una gran cantidad de direcciones posibles.

A los usuarios les resulta difícil seleccionar una dirección de una lista larga, especialmente en dispositivos móviles si tienen prisa o están estresados. Puede ser más fácil y menos propenso a errores permitir que los usuarios aprovechen la función Autocompletar y que ingresen su dirección completa con un solo toque o clic.

Simplifica los formularios de pago

Los formularios de pago son la parte más importante del proceso de confirmación de la compra. Un diseño deficiente del formulario de pago es una causa común de abandono del carrito de compras. El diablo está en los detalles: los pequeños errores pueden hacer que los usuarios abandonen una compra, especialmente en dispositivos móviles. Tu trabajo es diseñar formularios para que los usuarios puedan ingresar datos de la manera más fácil posible.

Ayuda a los usuarios a evitar volver a ingresar los datos de pago

Asegúrate de agregar los valores de autocomplete adecuados en los formularios de tarjetas de pago, incluidos el número de tarjeta de pago, el nombre que aparece en la tarjeta, la fecha de vencimiento y el código de seguridad:

• cc-number
• cc-name
• cc-exp, o cc-exp-month y cc-exp-year para campos separados
• cc-csc

Esto permite que los navegadores ayuden a los usuarios almacenando de forma segura los detalles de las tarjetas de pago y completando correctamente los datos de los formularios. Sin la función Autocompletar, es más probable que los usuarios mantengan un registro físico de los detalles de la tarjeta de pago o que almacenen los datos de la tarjeta de pago de forma no segura en su dispositivo.

Evita usar elementos personalizados para las fechas de las tarjetas de pago

Si no se diseñan correctamente, los elementos personalizados pueden interrumpir el flujo de pago, ya que rompen la función de autocompletar, y no funcionarán en navegadores más antiguos. Si todos los demás detalles de la tarjeta de pago están disponibles en la función de autocompletar, pero un usuario se ve obligado a buscar su tarjeta de pago física para buscar una fecha de vencimiento porque la función de autocompletar no funcionó para un elemento personalizado, es probable que pierdas una venta. En su lugar, considera usar elementos HTML estándar y darles el estilo correspondiente.

Usa una sola entrada para los números de teléfono y de tarjetas de pago

Para los números de tarjetas de pago y de teléfono, usa un solo campo de entrada: no dividas el número en partes. Esto facilita que los usuarios ingresen datos, simplifica la validación y permite que los navegadores completen automáticamente los campos. Considera hacer lo mismo con otros datos numéricos, como el PIN y los códigos de entidad bancaria.

Valida con cuidado

Debes validar la entrada de datos en tiempo real y antes de enviar el formulario. Una forma de hacerlo es agregar un atributo pattern a una entrada de tarjeta de pago. Si el usuario intenta enviar el formulario de pago con un valor no válido, el navegador muestra un mensaje de advertencia y se enfoca en la entrada. No se requiere JavaScript.

Sin embargo, tu expresión regular de pattern debe ser lo suficientemente flexible como para controlar el rango de longitudes de los números de tarjetas de pago: de 14 dígitos (o posiblemente menos) a 20 (o más). Puedes obtener más información sobre la estructuración de los números de tarjetas de pago en LDAPwiki.

Permite que los usuarios incluyan espacios cuando ingresen un número de tarjeta de pago nuevo, ya que así es como se muestran los números en las tarjetas físicas. Esto es más amigable para el usuario (no tendrás que decirle que "hizo algo mal"), es menos probable que interrumpa el flujo de conversión y es sencillo quitar los espacios en los números antes de procesarlos.

Realiza pruebas en una variedad de dispositivos, plataformas, navegadores y versiones

Es especialmente importante probar los formularios de dirección y pago en las plataformas más comunes para tus usuarios, ya que la funcionalidad y la apariencia de los elementos del formulario pueden variar, y las diferencias en el tamaño del viewport pueden generar un posicionamiento problemático. BrowserStack permite realizar pruebas gratuitas para proyectos de código abierto en una variedad de dispositivos y navegadores.

Implementa estadísticas y RUM

Probar la usabilidad y el rendimiento de forma local puede ser útil, pero necesitas datos del mundo real para comprender correctamente cómo los usuarios experimentan tus formularios de pago y dirección.

Para ello, necesitas estadísticas y supervisión de usuarios reales, es decir, datos sobre la experiencia de los usuarios reales, como el tiempo que tardan en cargarse las páginas de confirmación de compra o el tiempo que tarda en completarse el pago:

• Estadísticas de la página: vistas de página, porcentajes de rebote y salidas de cada página con un formulario
• Estadísticas de interacción: Los embudos de objetivos y los eventos indican dónde abandonan los usuarios el proceso de confirmación de compra y qué acciones realizan cuando interactúan con tus formularios.
• Rendimiento del sitio web: Las métricas centradas en el usuario pueden indicarte si tus páginas de confirmación de compra tardan en cargarse y, de ser así, cuál es la causa.

Las estadísticas de páginas, las estadísticas de interacciones y la medición del rendimiento de los usuarios reales se vuelven especialmente valiosas cuando se combinan con los registros del servidor, los datos de conversiones y las pruebas A/B, lo que te permite responder preguntas como si los códigos de descuento aumentan los ingresos o si un cambio en el diseño del formulario mejora las conversiones.

Esto, a su vez, te brinda una base sólida para priorizar el esfuerzo, realizar cambios y recompensar el éxito.

Sigue aprendiendo

• Prácticas recomendadas para los formularios de acceso
• Prácticas recomendadas para los formularios de registro
• Verifica números de teléfono en la Web con la API de WebOTP
• Crea formularios asombrosos
• Prácticas recomendadas para el diseño de formularios para dispositivos móviles
• Controles de formulario más capaces
• Crea formularios accesibles
• Optimiza el flujo de registro con la API de Credential Manager
• La Guía compulsiva de Frank sobre direcciones postales proporciona vínculos útiles y orientación exhaustiva sobre los formatos de direcciones en más de 200 países.
• Countries Lists tiene una herramienta para descargar códigos y nombres de países en varios idiomas y en varios formatos.

Foto de @rupixen en Unsplash.