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

Ayuda a los usuarios a completar formularios de pago y direcciones de la forma más rápida y fácil posible para maximizar las conversiones.

Sam Dutton

Los formularios bien diseñados ayudan a los usuarios y a aumentar los porcentajes de conversiones. Una pequeña solució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 estén destinados a incrementarse, como números de tarjetas de pago. En su lugar, usa type="text" y inputmode="numeric".
• Si hay un valor de autocompletado apropiado disponible para un objeto input, select o textarea, debes usarlo.
• Para ayudar a los navegadores a autocompletar formularios, proporciona los atributos name y id de entrada valores estables que no cambien entre cargas de páginas o implementaciones de sitios web.
• Inhabilita los botones de envío una vez que los presiones o hagas clic en ellos.
• Valida los datos durante la entrada, no solo en el envío de formularios.
• 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.
• Muestra el progreso en el proceso de confirmación de la compra en pasos claros con llamados a la acción claros.
• Limita los posibles puntos de salida para la confirmación de la compra quitando el desorden y las distracciones.
• Muestra todos los detalles del pedido durante la confirmación de la compra y realiza ajustes en los pedidos con facilidad.
• No solicites datos que no necesites.
• Pide nombres con una sola entrada, a menos que tengas una buena razón para no hacerlo.
• No apliques de manera forzosa caracteres solo del alfabeto latino a los nombres y nombres de usuario.
• Permite una variedad de formatos de dirección.
• Considera usar un único textarea para la dirección.
• Usa la función Autocompletar para la dirección de facturación.
• Internacionaliza y localiza cuando sea necesario.
• Te recomendamos evitar la búsqueda de direcciones de 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 autocompletado.
• Realiza pruebas en el campo y en el lab: Análisis de páginas, análisis 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 permiten la funcionalidad integrada del navegador, mejoran la accesibilidad y agregan significado a tu lenguaje de marcado.

Usa elementos HTML según lo previsto

Escribe tu formulario en un <form>

Es posible que quieras no preocuparte por unir los elementos <input> en una <form> y controlar el envío de datos solo con JavaScript.

No lo hagas.

Un <form> de HTML te brinda acceso a un potente conjunto de funciones integradas en todos los navegadores modernos y puede ayudar a que tu sitio sea accesible para los 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 habilitar el envío de formularios, incluso si hay una falla en tu código, y para la pequeña cantidad de usuarios que realmente 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 búsquedas y te registraste en la misma página, coloca cada uno en su propio <form>.

Cómo usar <label> para etiquetar elementos

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

Para asociar una etiqueta a una entrada, asigna 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 en navegadores y en lectores de pantalla. Cuando presionas o haces clic en una etiqueta, se mueve el enfoque a la entrada a la que está asociada, y los lectores de pantalla anuncian el texto de la etiqueta cuando la etiqueta o su entrada se enfocan.

Haz que los botones sean útiles

Usa <button> para los botones. También puedes usar <input type="submit">, pero no un div ni algún otro elemento aleatorio que actúe como botón. Los elementos de botones ofrecen un comportamiento accesible, una funcionalidad de envío de formularios integrada y un estilo sencillo.

Asigna a cada botón de envío de formulario un valor que indique lo que hace. En cada paso hacia la confirmación de la compra, usa un llamado a la acción descriptivo que muestre el progreso y haga evidente el próximo paso. Por ejemplo, etiqueta el botón para enviar en el formulario de dirección de entrega Proceed to Payment, en lugar de Continue o Save.

Considera inhabilitar un botón de envío una vez que el usuario lo presione o haga clic en él, en especial cuando realiza un pago o un pedido. Muchos usuarios hacen clic en botones de forma repetida, incluso si funcionan bien. Eso puede arruinar la confirmación de la compra y aumentar la carga del servidor.

Por otro lado, no inhabilites un botón de envío mientras esperas que el usuario ingrese una entrada completa y válida. Por ejemplo, no dejes inhabilitado el botón Save Address porque falta algo o no es válido. Eso no es útil para el usuario, ya que puede seguir tocando o haciendo clic en el botón y suponer que ya no funciona. En cambio, si los usuarios intentan enviar un formulario con datos no válidos, explícales qué salió mal y qué hacer para solucionarlo. Esto es muy importante en dispositivos móviles, ya que el ingreso de datos es más difícil y los datos del formulario faltantes o no válidos pueden no estar visibles en la pantalla del usuario cuando el usuario intenta enviar un formulario.

Aprovecha al máximo los atributos HTML

Facilita a los usuarios el ingreso de datos

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

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

Para las fechas, evita usar elementos select personalizados. Rompen la experiencia de autocompletado si no se implementan correctamente y no funcionan en 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 manualmente puede ser más fácil y menos propenso a errores que seleccionar un elemento de una lista desplegable larga, especialmente en dispositivos móviles. Usa inputmode="numeric" para garantizar el teclado adecuado en dispositivos móviles y agrega sugerencias de validación y formato con texto o un marcador de posición para garantizar 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 tener que volver a ingresar datos

El uso de valores autocomplete apropiados permite que los navegadores ayuden a los usuarios a través del almacenamiento seguro de datos y el autocompletado de los valores input, select y textarea. Esto es particularmente importante en dispositivos móviles y es crucial para evitar porcentajes altos de abandono de formularios. Esta función también ofrece varios beneficios de accesibilidad.

Si hay un valor de autocompletar apropiado disponible para un campo del formulario, debes usarlo. Los documentos web de MDN tienen una lista completa de valores y explicaciones sobre cómo usarlos de forma correcta.

Valores estables

Dirección de facturación

De forma predeterminada, configura la dirección de facturación para que sea la misma que la dirección de entrega. 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 para reducir el desorden visual.

Usa valores de autocompletado adecuados para la dirección de facturación, tal como lo haces con 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 distintas secciones.

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

Ayuda a los usuarios a ingresar los datos correctos

Intenta evitar "decirles" a los clientes porque "hicieron algo mal". En cambio, ayuda a los usuarios a completar los formularios de manera más rápida y fácil ayudándolos a solucionar problemas a medida que ocurren. A través del proceso de confirmación de la compra, los clientes intentan dar dinero a tu empresa por un producto o servicio. Tu trabajo es ayudarlos, no castigarlos.

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

Por ejemplo, el siguiente HTML especifica la entrada para un año de nacimiento entre 1900 y 2020. El uso de type="number" restringe los valores de entrada a solo números, dentro del rango especificado por min y max. Si intentas ingresar un número fuera del rango, la entrada se configurará como 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 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 configuran automáticamente el enfoque en los campos con valores obligatorios faltantes o problemáticos. No se requiere JavaScript.

Realiza la validación 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 de tu servidor después del envío del 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 lo que 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 cuando envían formularios. Usa la API de Constraint Validation (que es muy compatible) para agregar una validación personalizada mediante la IU integrada del navegador a fin de establecer el enfoque y mostrar mensajes.

Obtén más información en el artículo Cómo usar JavaScript para realizar validaciones más complejas en tiempo real.

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 modernos solicitan y establecen de forma automática el enfoque en los campos required con datos faltantes, 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

Sé consciente de la brecha del comercio en dispositivos móviles.

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

Necesitas reducir la fricción y mantener el enfoque, especialmente 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 comercial en dispositivos móviles. Es posible que los clientes prefieran simplemente 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 tarea es minimizar las conversiones perdidas en dispositivos móviles y maximizar las conversiones en computadoras de escritorio. Algunas investigaciones demostraron que existe una gran oportunidad para brindar una mejor experiencia con los formularios para dispositivos móviles.

Más que nada, es más probable que los usuarios abandonen los formularios que parecen largos, complejos y no tienen sentido de rumbo. Esto es especialmente cierto cuando los usuarios utilizan pantallas más pequeñas, están distraídos o tienen prisa. Pide la menor cantidad de datos posible.

Establece la opción predeterminada para comprar como invitado

En una tienda en línea, la forma más sencilla de reducir la fricción en los formularios es establecer que la opción de comprar como invitado sea la opción predeterminada. No obligues a los usuarios a crear una cuenta antes de realizar una compra. El hecho de no permitir la compra como invitado es uno de los motivos principales de abandono del carrito.

Puedes ofrecer el registro de la cuenta después de confirmar 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 una cuenta debería ser rápida y fácil para el usuario.

Mostrar progreso de confirmación de la compra

Para que el proceso de confirmación de la compra se sienta menos complejo, muestra el progreso y aclara lo que se debe hacer a continuación. En el siguiente video, se muestra cómo el minorista del Reino Unido johnlewis.com lo logra.

¡Necesitas mantener el impulso! Para cada paso hacia el pago, usa encabezados de página y valores de botón 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 del formulario para configurar la etiqueta de la tecla Intro del teclado del dispositivo móvil. 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 la 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.

Haz que sea fácil para los usuarios ir y venir del proceso de confirmación de la compra para ajustar fácilmente su pedido, incluso cuando se encuentren en el paso de pago final. Muestra todos los detalles 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 pagos. Tu prioridad en la confirmación de la compra es evitar interrumpir el progreso hacia la conversión.

Elimina las distracciones

Para limitar los posibles puntos de salida, elimine 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 a hacer otra cosa.

En el caso de los usuarios recurrentes, puedes simplificar aún más el proceso de confirmación de la compra, ya que puedes ocultar 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 mediante un vínculo.

Facilite el ingreso del nombre y la dirección

Pide solo los datos que necesites

Antes de comenzar a codificar los formularios de nombre y dirección, asegúrate de comprender qué datos se requieren. ¡No pidas datos que no necesitas! La forma más sencilla de reducir la complejidad del formulario es quitar los campos innecesarios. Eso también es bueno para la privacidad del cliente y puede reducir el costo y la responsabilidad de los datos de backend.

Usa una entrada de nombre única

Permite que los usuarios ingresen su nombre con una sola entrada, a menos que tengas una buena razón para almacenar nombres de pila, de familia, honorarios o cualquier otra parte del nombre por separado. El uso de una sola entrada de nombre hace que los formularios sean menos complejos, permite cortar y pegar y simplifica el autocompletado.

En particular, a menos que tengas una buena razón para no hacerlo, no te molestes en agregar una entrada separada para un prefijo o título (como Mrs, Dr or Lord). Los usuarios pueden escribir esta información con su nombre si lo desean. Además, por el momento, el autocompletado de honorific-prefix no funciona en la mayoría de los navegadores, por lo que agregar un campo para el título o prefijo del nombre interrumpirá la experiencia de autocompletado del formulario de dirección para la mayoría de los usuarios.

Habilitar 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 valores de autocompletado adecuados:

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

Permitir nombres internacionales

Puede validar sus entradas de nombre o restringir los caracteres permitidos para los datos de nombres. Sin embargo, debes ser lo más 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. Esta opció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 de Unicode y asegúrate de que el backend admita Unicode de forma segura como entrada y salida. Unicode en expresiones regulares es compatible con los navegadores modernos.

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

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

Permitir una variedad de formatos de dirección

Cuando diseñes un formulario de dirección, ten en cuenta la sorprendente variedad de formatos de dirección, incluso para un solo país. Ten cuidado de no hacer suposiciones sobre las direcciones "normales". (si no te convence, consulta la sección Rarezas de direcciones en el Reino Unido).

Hacer que los formularios de dirección sean flexibles

No fuerces a los usuarios a tratar de incluir su dirección en campos del formulario que no sean adecuados.

Por ejemplo, no insistas en el número de una casa y el nombre de una calle en entradas separadas, ya que muchas direcciones no usan ese formato y los datos incompletos pueden dañar el autocompletado 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 obligan a los usuarios a ingresar uno de todos modos.

Si usas dos líneas de dirección flexibles, se puede adaptar a una variedad de formatos de dirección.

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

Agregar etiquetas para que coincidan:

<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 probarlo, mezcla y edita la demostración que se encuentra incorporada a continuación.

Considera usar un solo área de texto para la dirección

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

El enfoque textarea se adapta a cualquier formato de dirección y es excelente 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 el autocompletado si anteriormente solo usaban formularios con address-line1 y address-line2.

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

A continuación, se incluye un ejemplo de un formulario que demuestra el uso de un único textarea para la dirección:

Internacionaliza y localiza tus formularios de dirección

Es muy importante que los formularios de dirección consideren la internacionalización y la localización, según la ubicación de tus usuarios.

Ten en cuenta que la denominación de las partes de la dirección varía así como los formatos de la dirección, incluso en el mismo idioma.

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

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

Puede ser 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 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 dirección: * Evita ser demasiado específico con respecto a 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 un código postal, y es posible que las direcciones rurales no tengan el nombre de la calle o la ruta. * Usa nombres inclusivos: "País/región" no "País"; "Código postal" no "Código postal".

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

Evita la búsqueda de direcciones de 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 de 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, especialmente en dispositivos móviles, si están apresurados o estresados. Puede ser más fácil y menos propenso a errores permitir que los usuarios aprovechen el autocompletado y que ingresen su dirección completa con solo presionar o hacer un clic.

Simplifica los formularios de pago

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

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

Asegúrate de agregar los valores de autocomplete adecuados en los formularios de tarjeta de pago, incluidos el número de tarjeta de pago, el nombre que aparece en la tarjeta 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 través del almacenamiento seguro de los detalles de la tarjeta de pago y el ingreso correcto de los datos del formulario. Sin el autocompletado, es más probable que los usuarios mantengan un registro físico de los detalles de las tarjetas de pago o almacenen los datos de las tarjetas 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 pago al interrumpir el autocompletado, y no funcionarán en navegadores anteriores. Si todos los demás detalles de la tarjeta de pago están disponibles en el autocompletado, pero el usuario se ve obligado a buscar su tarjeta de pago física para buscar una fecha de vencimiento porque el autocompletado no funcionó para un elemento personalizado, es probable que pierdas una venta. En su lugar, considera usar elementos HTML estándar y define el estilo correspondiente.

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

Para las tarjetas de pago y los números de teléfono, usa una sola entrada; no dividas el número en partes. De esta manera, es más fácil para los usuarios ingresar datos, se simplifica la validación y se habilita el autocompletado de los navegadores. Considera hacer lo mismo con otros datos numéricos, como el PIN y los códigos bancarios.

Validar cuidadosamente

Debe validar el ingreso de datos tanto en tiempo real como 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 mostrará un mensaje de advertencia y establecerá el enfoque en la entrada. No se requiere JavaScript.

Sin embargo, la 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 nuevo número de tarjeta de pago, ya que así es como se muestran los números en las tarjetas físicas. De este modo, es más fácil para el usuario (no tendrás que decirles que "hicieron algo mal"), es menos probable que se interrumpa el flujo de conversión y es sencillo quitar los espacios en los números antes del procesamiento.

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

Es muy importante probar las direcciones y los formularios de pago en las plataformas más comunes para tus usuarios, ya que la funcionalidad y el aspecto de los elementos de formulario pueden variar, y las diferencias en el tamaño del viewport pueden provocar problemas en el posicionamiento. BrowserStack permite realizar pruebas gratuitas para proyectos de código abierto en una variedad de dispositivos y navegadores.

Implementación de análisis y RUM

Probar la usabilidad y el rendimiento a nivel local puede ser útil, pero necesitas datos reales para comprender correctamente la experiencia de los usuarios con tus formularios de pago y domicilio.

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

• Estadísticas de página: Vistas de páginas, porcentajes de rebote y salidas de cada página que tenga un formulario.
• Estadísticas de interacción: 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 los formularios.
• Rendimiento del sitio web: Las métricas centradas en el usuario pueden indicarte si tus páginas de confirmación de compras tardan en cargarse y, de ser así, cuál es la causa.

Las estadísticas de páginas, las estadísticas de interacción y la medición del rendimiento real de los usuarios se vuelven 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.

Eso, 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 el formulario de acceso
• Prácticas recomendadas para el formulario 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 formularios con mayor capacidad
• Cómo crear formularios accesibles
• Optimiza el flujo de registro con la API de Credential Management
• La Guía compulsiva de Francisco sobre direcciones postales proporciona vínculos útiles y una amplia orientación sobre los formatos de dirección en más de 200 países.
• Listas de países tiene una herramienta para descargar códigos y nombres de países en varios idiomas y formatos.

Foto de @rupixen de Unsplash.