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

Para maximizar las conversiones, ayuda a los usuarios a completar los formularios de dirección y pago de la manera más rápida y fácil 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 del formulario con una <label>.
• Usa los 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 a los atributos de entrada name y id valores estables que no cambien entre cargas de páginas o implementaciones de sitios web.
• Inhabilita los botones de envío después de presionarlos o hacer clic en ellos.
• Valide los datos durante el ingreso, no solo durante el envío del formulario.
• Establece la opción de compra como invitado como predeterminada y simplifica la creación de la cuenta una vez que se complete la confirmación de 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 los detalles completos del pedido en la confirmación de la compra y realiza ajustes fácilmente.
• No solicites datos que no necesites.
• Pide nombres con una sola entrada, a menos que tengas un buen motivo para no hacerlo.
• No apliques caracteres solo en latín para los nombres y los nombres de usuario.
• Permite una variedad de formatos de direcciones.
• Te recomendamos usar un único textarea para la dirección.
• Usa la función de autocompletado para la dirección de facturación.
• Internacionaliza y localiza cuando sea necesario.
• Considera evitar la búsqueda de direcciones por código postal.
• Usa los valores de autocompletado de tarjetas de pago adecuados.
• Usa una entrada única para los números de tarjetas de pago.
• Evita usar elementos personalizados si interrumpen la experiencia de autocompletar.
• Realiza pruebas en el campo y en el lab: estadísticas de la página, estadísticas de interacción y medición del rendimiento de usuarios reales.
• Realiza pruebas en una variedad de navegadores, dispositivos y plataformas.

Usa código HTML significativo

Usa los elementos y atributos creados para el trabajo:

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

Estas habilitan funciones integradas en el navegador, mejoran la accesibilidad y le agregan significado a tu lenguaje de marcado.

Usa los elementos HTML según lo previsto

Coloca tu formulario en un <form>

Es posible que te tiente no molestarte en unir tus elementos <input> en un <form> y controlar el envío de datos solo con JavaScript.

No lo hagas.

Un <form> HTML te brinda acceso a un conjunto potente de funciones integradas en todos los navegadores modernos y puede ayudar a que tu sitio sea accesible para lectores de pantalla y otros dispositivos de accesibilidad. Un <form> también facilita la compilación de funciones básicas para navegadores más antiguos con compatibilidad limitada con JavaScript y para habilitar el 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 la búsqueda y el registro en la misma página, coloca cada uno en su propio <form>.

Usa <label> para etiquetar elementos

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

Asocia una etiqueta con una entrada otorgándole al atributo for de la etiqueta el mismo valor que el 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. Cuando presionas una etiqueta o haces clic en ella, el foco se mueve a la entrada con la que está asociada, y los lectores de pantalla anuncian el texto de la etiqueta cuando se enfoca la etiqueta o la entrada de la etiqueta.

Haz que los botones sean útiles

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

Asigna a cada botón de envío de formulario un valor que indique qué hace. Para cada paso hacia la confirmación de la compra, usa una llamada a la acción descriptiva que muestre el progreso y deje claro el siguiente paso. Por ejemplo, etiqueta el botón de envío como Continuar al pago en el formulario de dirección de entrega en lugar de Continuar o Guardar.

Considera inhabilitar un botón de envío una vez que el usuario lo presione o haga clic en él, especialmente cuando realice un pago o realice un pedido. Muchos usuarios hacen clic en los botones varias veces, incluso si funcionan bien. Esto puede afectar la confirmación de la compra y aumentar la carga del servidor.

Por otro lado, no inhabilites un botón de envío que esté esperando una entrada del usuario completa y válida. Por ejemplo, no dejes inhabilitado el 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 está roto. En cambio, si los usuarios intentan enviar un formulario con datos no válidos, explícales qué salió mal y qué deben hacer para solucionarlo. Esto es particularmente importante en dispositivos móviles, donde la entrada de datos es más difícil y es posible que los datos faltantes o no válidos del formulario no se vean en la pantalla del usuario cuando intente enviar un formulario.

Aprovecha al máximo los atributos HTML

Facilita que los usuarios ingresen datos

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

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

Para las fechas, evita usar elementos select personalizados. Detienen la experiencia de autocompletar si no se implementan correctamente y no funcionan en navegadores anteriores. 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, en especial en dispositivos móviles. Usa inputmode="numeric" para asegurarte de 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 Autocompletar para mejorar la accesibilidad y ayudar a los usuarios a evitar volver a ingresar datos.

El uso de valores autocomplete adecuados permite que los navegadores ayuden a los usuarios almacenando datos de forma segura y completando automáticamente los valores input, select y textarea. Esto es importante, en especial, en dispositivos móviles y es fundamental para evitar porcentajes altos de abandono de formularios. 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, configura 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 mostrarla en un formulario.

Usa los valores de autocompletar adecuados para la dirección de facturación, al igual que lo haces para la dirección de envío, para 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 entradas con el mismo nombre en diferentes secciones.

<input autocomplete="shipping address-line-1" ...>
...
<input autocomplete="billing address-line-1" ...>

Ayuda a los usuarios a ingresar los datos correctos

Evita “regañar” a los clientes porque “hicieron algo mal”. En su lugar, debes ayudar a los usuarios a completar los formularios de forma más rápida y sencilla ayudándolos a solucionar problemas a medida que ocurren. Durante el proceso de confirmación de la compra, los clientes intentan darle dinero a tu empresa por un producto o servicio: tu trabajo es ayudarlos, no castigarlos.

Puedes agregar atributos de restricción para formar elementos que especifiquen 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 de un año de nacimiento entre 1900 y 2020. El uso de type="number" limita 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 establecerá para tener un estado no válido.

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

Los navegadores modernos 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 en línea 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 enviar el formulario, haz una lista de todos los problemas que se encuentren y destaca claramente todos los campos del formulario con valores no válidos, además de mostrar 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 en busca de 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 en el envío de formularios. Usa la API de Constraint Validation (que es compatible con muchos elementos) para agregar validación personalizada con la IU del navegador integrada para establecer el enfoque y mostrar instrucciones.

Obtén más información en Uso de JavaScript para validación más compleja en tiempo real.

Ayuda a los usuarios a evitar que se pierdan datos obligatorios

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

Cuando se envía un formulario, los navegadores modernos solicitan automáticamente y centran la atención en los campos required que no tienen datos, y 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 comienzo del formulario para explicar qué significa el asterisco.

Simplifica la confirmación de la compra

Ten en cuenta la brecha del comercio móvil.

Imagina que tus usuarios tienen un presupuesto de fatiga. Úsalo y tus usuarios se irán.

Debes reducir los inconvenientes y mantener el enfoque, en especial, en los 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, pero los porcentajes de conversiones más bajos en dispositivos móviles 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. Algunas investigaciones demostraron que es una gran oportunidad para proporcionar una mejor experiencia con los formularios para dispositivos móviles.

Lo más importante es que es más probable que los usuarios abandonen los formularios que parecen largos, complejos y sin un sentido de dirección. Esto es especialmente cierto cuando los usuarios se encuentran en pantallas más pequeñas, distraídos o apurados. Solicita la menor cantidad posible de datos.

Establecer como opción para comprar como invitado

En el caso de una tienda en línea, la forma más sencilla de reducir los inconvenientes relacionados con los formularios es establecer la opción de comprar como invitado como la opción 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 el abandono del 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 parte 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.

Cómo mostrar 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 aclaras lo que debes hacer a continuación. En el siguiente video, se muestra cómo lo logra el minorista del Reino Unido johnlewis.com.

Debes mantener el impulso. Para cada paso del pago, usa encabezados de página y valores de botones descriptivos que dejen en claro lo que se debe hacer ahora y qué paso de confirmación de la compra es el siguiente.

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" dentro de 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 puedan ir y volver durante el proceso de confirmación de la compra para ajustar su pedido fácilmente, incluso cuando estén en el paso de pago final. Muestra los detalles completos del pedido, no solo un resumen limitado. Permite que los usuarios ajusten fácilmente las cantidades de los 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 del proceso de confirmación de la compra.

Mantén el recorrido enfocado. No es momento de tentar a los usuarios a hacer otra cosa.

En el caso de los usuarios recurrentes, puedes simplificar aún más el flujo de confirmación de la 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 a través de un vínculo.

Facilite el ingreso del nombre y la dirección

Solicita solo los datos que necesitas

Antes de comenzar a codificar tus formularios de nombre y dirección, asegúrate de comprender qué datos son obligatorios. No solicites datos que no necesitas. 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 entrada de nombre única

Permite que los usuarios ingresen su nombre con una sola entrada, a menos que tengas un buen motivo para almacenar nombres, apellidos, honoríficos y otras partes del nombre por separado. El uso de una sola entrada de nombre hace que los formularios sean menos complejos, habilita el corte y la copia, 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, actualmente, el autocompletado de honorific-prefix 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 autocompletado del 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

Permite nombres internacionales

Es posible que desees validar las entradas de tus nombres o restringir los caracteres permitidos para los datos de nombres. Sin embargo, debes ser lo menos restrictivo posible con los alfabetos. Es descortés 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 en latín 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 bien 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 direcciones

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

Haz que los formularios de dirección sean flexibles

No obligues a los usuarios a tratar de meter su dirección en campos de formulario que no son adecuados.

Por ejemplo, no insistas en que se ingresen el número de casa y el nombre de la calle por separado, 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 required. Por ejemplo, las direcciones de las grandes ciudades del Reino Unido no tienen un condado, pero muchos sitios aún obligan a los usuarios a ingresar uno.

El uso de dos líneas de dirección flexibles puede funcionar lo suficientemente bien para una variedad de formatos de dirección.

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

Agrega etiquetas para que coincidan con lo siguiente:

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

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

Para probar esto, puedes hacer un remix y editar la demostración que se incorpora a continuación.

Considera usar un solo textarea para la dirección

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

El enfoque 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 podrían perderse la opción de autocompletar si antes solo usaban formularios con address-line1 y address-line2.

Para un textarea, usa street-address como valor de autocompletado.

Este es un ejemplo de un formulario que demuestra 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 direcciones tengan en cuenta la internacionalización y la localización, según el lugar en el que se encuentren tus usuarios.

Ten en cuenta que los nombres de las partes de la dirección varían, así como 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 direcciones para varias configuraciones regionales en tu sitio, pero puede ser adecuado usar técnicas para maximizar la flexibilidad de los formularios (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 direcciones: * Evita ser demasiado específico sobre las partes de la dirección, como insistir en un nombre de calle o un número de casa. * Siempre que sea posible, evita que los campos sean required. Por ejemplo, las direcciones de muchos países no tienen un código postal, y es posible que las direcciones rurales no tengan un nombre de calle o ruta. * Usa nombres inclusivos: "País/región", no "País"; "Código postal", no "CP".

Mantén la flexibilidad. El ejemplo de formulario de dirección simple anterior se puede adaptar para funcionar “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 conveniente para algunos casos de uso, pero debes tener en cuenta las posibles desventajas.

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

Es difícil para los usuarios seleccionar direcciones de una larga lista de direcciones, especialmente en dispositivos móviles si están apurados o 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 solo presionar una vez o hacer clic.

Simplifica las formas 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 del abandono del carrito de compras. El diablo está en los detalles: Los errores pequeños pueden llevar a los usuarios a abandonar una compra, en especial, en dispositivos móviles. Tu trabajo es diseñar formularios para que los usuarios puedan ingresar datos de la forma más sencilla posible.

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

Asegúrate de agregar los valores autocomplete adecuados en los formularios de tarjetas de pago, incluidos el número de la tarjeta, el nombre que aparece en ella y el mes y año de vencimiento:

• cc-number
• cc-name
• cc-exp-month
• cc-exp-year

Esto permite que los navegadores ayuden a los usuarios a almacenar de forma segura los detalles de las tarjetas de pago y al ingresar correctamente los datos del formulario. Sin el autocompletado, es más probable que los usuarios conserven un registro físico de los detalles de la tarjeta de pago o almacenen datos de la tarjeta de pago de forma insegura 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 pagos, ya que interrumpen el autocompletado, y no funcionarán en navegadores más antiguos. Si todos los demás detalles de la tarjeta de pago están disponibles en Autocompletar, pero un usuario se ve obligado a buscar su tarjeta de pago física para buscar una fecha de vencimiento porque Autocompletar no funcionó para un elemento personalizado, es probable que pierdas una venta. En su lugar, considera usar elementos HTML estándar y aplicarles diseño según corresponda.

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

En el caso de los números de tarjetas de pago y teléfonos, usa una sola 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 datos. Considera hacer lo mismo con otros datos numéricos, como PIN y códigos bancarios.

Valida con cuidado

Debes validar la entrada de datos en tiempo real y antes de enviar el formulario. Una forma de hacerlo es agregando 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 establece el enfoque en la entrada. No se requiere JavaScript.

Sin embargo, tu expresión regular 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 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 conversiones y es sencillo quitar los espacios en los números antes de procesarlos.

Haz pruebas en una gran variedad de dispositivos, plataformas, navegadores y versiones.

Es particularmente importante probar los formularios de dirección y pago en las plataformas más comunes para tus usuarios, ya que la funcionalidad y el aspecto de los elementos del formulario pueden variar, y las diferencias en el tamaño del viewport pueden generar posiciones problemáticas. BrowserStack permite realizar pruebas gratuitas para proyectos de código abierto en diferentes 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 la supervisión de usuarios reales, que son datos sobre la experiencia de los usuarios reales, como cuánto tardan en cargarse las páginas de confirmación de la compra o cuánto tiempo tarda en completarse el pago:

• Análisis de páginas: Vistas de página, porcentajes de rebote y salidas de cada página con un formulario
• Estadísticas de interacciones: Los embudos de objetivos y los eventos indican en qué momento los usuarios abandonan el flujo de confirmación de la 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 la compra tardan en cargar y, de ser así, cuál es la causa.

El análisis de páginas, el análisis de interacción y la medición del rendimiento real de los usuarios son especialmente valiosos 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 formularios de acceso
• Prácticas recomendadas para el formulario de registro
• Cómo verificar 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 formularios más potentes
• Cómo crear formularios accesibles
• Cómo optimizar el flujo de registro con la API de Credential Management
• La Guía compulsiva de Frank sobre direcciones postales proporciona vínculos útiles y una amplia guía 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 formatos.

Foto de @rupixen en Unsplash.