Cómo optimizar formularios para aprovechar el autocompletado

Publicado: 2021-05-17

¡Sorpresa! Puede hacer que sea más fácil para los usuarios comprar sus productos en línea con el poder de autocompletar.

Debe ser tu día de suerte. O, bueno, ¿años?

Autocompletar no es nuevo, aunque ha ido mejorando con el tiempo. Sin embargo, es una forma fantástica de alentar a los usuarios a completar sus formularios web, ya sea que desee que se comuniquen con usted o que ingresen su información de pago para que puedan presionar ese botón de compra grande y hermoso.

El llenado automático de formularios elimina todo el esfuerzo de los formularios web que pueden ser tediosos, lentos y una barrera para la conversión. Cuando rellenas automáticamente los datos de los formularios para tus usuarios, proporcionas una mejor interfaz de usuario y una mejor experiencia de usuario (UX) al ahorrarles tiempo y reducir la posibilidad de errores (como errores tipográficos).

También evita que los usuarios tengan que pensar demasiado o, peor aún, levantarse de la comodidad de su sofá para caminar la temida distancia hasta sus billeteras.

Puede pensar que estamos siendo dramáticos, pero a veces, después de un largo día de trabajo, su guía está demasiado cansada para levantarse. O son una mamá ocupada que pensó que haría una compra rápida durante su descanso de 5 minutos y, de repente, no tiene tiempo.

En un estudio, Google descubrió que los usuarios completaban formularios un 30 % más rápido con el llenado automático de formularios activado. Esta velocidad, combinada con la gran conveniencia de autocompletar, aumenta las tasas de envío de formularios y las conversiones, al mismo tiempo que hace felices a los usuarios en el proceso. Y los usuarios felices son usuarios recurrentes.

Es por eso que las capacidades automáticas están en nuestra lista de mejores prácticas de diseño de formularios.

Entonces, ¿cómo hace que el autocompletado funcione en sus formularios web?

Todo comienza con hacer que su desarrollador web optimice sus formularios para que funcionen con el navegador del usuario para que pueda reconocer los campos de su formulario por lo que son.

¿Cómo funciona la función Autocompletar?

¿Qué tal si comenzamos aquí: en primer lugar, qué es el autocompletado?

Autocompletar es una herramienta ingeniosa que la mayoría de los navegadores ofrecen a sus usuarios. Cuando los usuarios habilitan el autocompletado, su navegador completará automáticamente los formularios con los datos de usuario aplicables que haya guardado. Como resultado, el usuario no tiene que completar cada campo a mano.

Los diferentes navegadores guardan datos de usuario ligeramente diferentes, pero son similares en general:

Gráfico que muestra los elementos de autocompletar en diferentes navegadores

Nota: "Direcciones" incluye números de teléfono, direcciones de correo electrónico y direcciones de envío.

Ahora, ¿cómo realiza su magia el autorrelleno?

Es bastante simple. El navegador recopila la información que un usuario ha ingresado en formularios anteriores en los sitios web de otros o en el suyo propio. Algunos usuarios pueden incluso configurar el autocompletado en la configuración de autocompletado de su navegador y proporcionar la información directamente para facilitar la vida. En este caso, el navegador puede guardar datos sensibles, como un método de pago, a través de un procedimiento de autenticación.

Los usuarios controlan las preferencias de autocompletar en su extremo a través de su configuración de autocompletar y pueden optar por habilitarlo o deshabilitarlo.

Siempre que esté habilitado, su navegador utilizará varias heurísticas para determinar cuáles de los campos de su formulario puede autocompletar en función de los permisos del usuario.

Cómo agregar el llenado automático de formularios a sus formularios web

¿Estás listo para algunas buenas noticias?

Siempre que cree sus formularios web utilizando las mejores prácticas de formularios, el autocompletado generalmente es un hecho porque la funcionalidad principal está integrada en el navegador o dispositivo del usuario. Por lo tanto, solo necesita concentrarse en desarrollar formularios que cumplan con los estándares de codificación. Administre eso, y el autocompletado debería funcionar en sus formularios móviles y de escritorio.

De lo contrario, Google da dos razones por las que el autocompletado podría no funcionar para los usuarios:

    1. Es posible que su sitio web no sea lo suficientemente seguro para que Chrome proporcione datos de usuario.
    2. Si su sitio web es seguro, es posible que Chrome no pueda detectar los campos de su formulario.

Para evitar estos problemas con sus formularios web, asegúrese de que su sitio web sea lo suficientemente seguro para cumplir con los estándares del navegador. Establezca pautas de seguridad, mantenga su sitio web y software actualizados, use un firewall y una VPN y evite los silos de datos.

Si su sitio web es seguro y el autocompletado no funciona por sí solo, confirme que su formulario sigue las siguientes prácticas recomendadas del código de formulario.

Mejores prácticas de formularios para garantizar los trabajos de Autocompletar

Si bien los navegadores hacen su magia para hacer la vida del usuario más fácil, hay formas en las que puedes ayudarlo. Al desarrollar formularios web que brindan las sugerencias correctas para el navegador, puede garantizar que podrá completar automáticamente los datos del formulario para sus usuarios.

Comience dando sugerencias a los navegadores sobre el tipo de datos con los que debe llenar los campos de su formulario, para que sea más fácil para el navegador leer su formulario y hacer su trabajo.

Para hacer esto, asegúrese de usar el tipo de entrada correcto y las etiquetas de entrada correspondientes. También querrá proporcionar el atributo de nombre y el atributo de autocompletar para cada elemento de entrada. La siguiente imagen muestra el nombre común y los atributos de autocompletar según los estándares HTML que pueda necesitar.

Atributos de Google Developers para garantizar el autocompletado funciona

Foto de Google Developers.

Para cumplir con las prácticas de formulario HTML estándar, usted o el desarrollador de su sitio web también deben asegurarse de que los elementos de entrada estén envueltos en una etiqueta <form> para habilitar el autocompletado. El navegador web Google Chrome requiere que los campos de formulario estén en una etiqueta de formulario HTML, o solo ofrecerá sugerencias y no completará automáticamente los datos del formulario.

Qué no hacer: prácticas que impiden el llenado automático

Si bien algunas prácticas ayudan a los navegadores a autocompletar datos de formularios, otras se interponen en el camino. Al crear formularios, asegúrese de:

    • Evite las trampas de la validación de campos, como la validación del lado del cliente
    • Utilice campos de entrada estándar en lugar de crear los suyos propios
    • Use el atributo de marcador de posición en los campos de entrada en lugar de marcadores de posición falsos
    • No copie una dirección de envío en la dirección de facturación
    • Asegúrese de que sus formularios funcionen con administradores de contraseñas
    • A veces, los datos del navegador no son la única ayuda cuando se trata de completar formularios de forma automática.

Los usuarios se han cansado de hacer un seguimiento de un millón de contraseñas, y ¿puedes culparlos? No hay nada peor que adivinar una contraseña hasta que se le bloquea una cuenta o darse por vencido y restablecer una contraseña solo para que le digan que no puede usar la actual. (¡¿No probaste ese ya?!)

A su vez, los administradores de contraseñas que realizan un seguimiento de todos sus nombres de usuario y contraseñas en un solo lugar han ganado popularidad. Lo mejor de estos administradores, como LastPass y 1Password, vienen con la capacidad de autocompletar contraseñas en formularios de inicio de sesión.

Para los propietarios de sitios web, esto significa asegurarse de que sus formularios de inicio de sesión funcionen con aplicaciones de autocompletado de contraseñas.

Afortunadamente, los administradores de contraseñas se conectan a formularios creados correctamente por sí mismos, al igual que los navegadores. Siga los consejos de formulario anteriores y su formulario debería funcionar sin problemas con LastPass y 1Password.

Pero, al igual que los navegadores, hay formas en que puede ayudar a los administradores de contraseñas a leer su formulario y garantizar su funcionamiento:

    • No utilice formularios de inicio de sesión que agreguen o eliminen campos dinámicamente
    • Muestre su formulario en el primer render de la página web
    • Usar atributos de marcador de posición según lo previsto
    • Evite el uso de formularios de inicio de sesión de varias páginas cuando sea posible

Cómo autocompletar: otros consejos

Cuando se trata de formar UX, cumplir con las expectativas del usuario es el requisito mínimo y superar las expectativas es el objetivo. A veces, esto significa implementar flexibilidad en el diseño de formularios para adaptarse a las diferencias en las expectativas de los usuarios.

En el caso de la funcionalidad de autocompletar, la creación de un diseño de formulario flexible puede ser crucial para las empresas que hacen negocios o atienden a consumidores en varios países porque las personas en todo el mundo escriben las direcciones de manera diferente. Para adaptarse a las expectativas y navegadores de estos usuarios, considere proporcionar un formulario flexible que ajuste los campos de dirección en consecuencia.

Configuración de formularios de autocompletar para aplicaciones

Al crear una aplicación a la que los usuarios accederán en dispositivos Apple, asegúrese de que su aplicación sea compatible con la función Autocompletar contraseña de Apple y configure los dominios asociados de su aplicación como se indica aquí:

Requisitos de autocompletar de iOS

Para aplicaciones en dispositivos Android, el marco de autocompletar de Android completará automáticamente los formularios siempre que su aplicación use vistas estándar. Puede optimizar el funcionamiento de su aplicación dentro del marco completando un flujo de trabajo de autocompletar, configurando dominios asociados, marcando campos como importantes y usando el atributo android:autofillHints como se describe aquí:

Operación e instrucciones de Android Autofill

Obtén agradecimiento en las conversiones

Asegurarse de que sus formularios funcionen bien con las capacidades de autocompletado de los navegadores y administradores de contraseñas es una de las mejores maneras de mejorar la experiencia de usuario de los formularios y reducir la fricción en torno a los envíos de formularios. ¿A quién no le encanta obtener el mismo resultado con la mitad (¡o menos!) del esfuerzo?

Autocompletar facilita la vida de los usuarios al hacer que los formularios sean más rápidos y sencillos de completar, lo que significa que los usuarios obtienen lo que estaban buscando y usted obtiene más conversiones.

Y, en nuestra opinión, las conversiones son la mejor forma en que un usuario puede decir gracias.

¿Está interesado en hacer que sus formularios sean para morirse (también conocidos como rápidos, hermosos, fáciles de usar y optimizados para autocompletar datos de formularios)? A nuestro equipo le apasiona todo eso, y nos encanta hablar. Alcanzar.