Los formularios son una de las formas más utilizadas y relevantes en que la mayoría de las aplicaciones y sitios web interactúan con sus usuarios y recopilan información de ellos. Sin embargo, algunos desarrolladores y propietarios de aplicaciones cometen el error de hacerlos demasiado extensos y pesados, lo que afecta la experiencia del usuario y daña la participación del usuario.
Todos hemos estado allí una y otra vez, teniendo que completar formularios interminables al registrarnos en un sitio web, configurar una cuenta, realizar una compra, responder una encuesta o incluso presentar una queja. La mayoría de estas formas parecen no tener fin; completar nombres, fecha de nacimiento, dirección, número de teléfono, número de seguro social, edad, sexo, etnia, correo electrónico, repetir correo electrónico… me entiendes. Y no solo son extensos, sino que también parecen ser una parte generalizada del uso de Internet. ¿O puede pensar en una instancia en la que haya utilizado un servicio en línea que no incluía completar un formulario de algún tipo? Estoy hablando de ningún formulario de registro, compra, facturación o comentarios. Parece poco probable. ¿Por qué? Porque las formas son un mal necesario. Las empresas en línea necesitan implementar formularios en sus sitios web porque es la única forma en que los usuarios pueden registrarse para obtener una cuenta, realizar una compra, registrarse en un servicio, responder una encuesta y más. Incluso para un proceso tan mundano como crear un simple nombre de usuario y contraseña, debe completar un formulario. Entonces, incluso si no son la forma más atractiva de recopilar datos de los usuarios, no hay forma de evitarlo: los formularios son fundamentales, especialmente para la participación y la conversión del cliente. Pero, ¿cómo puedes hacer que algo tan tedioso se vuelva atractivo? ¿Cómo puede atraer a sus usuarios para que se tomen el tiempo de disfrutar realmente llenando esos molestos espacios en blanco y felizmente brindarle toda la información que necesita? Buen diseño UX de formularios.
Lo creas o no, el diseño de UX de formularios en línea es muy importante. No es fácil hacer que completar formularios sea un proceso agradable y, sin embargo, es uno de los elementos más cruciales para mantener la experiencia del usuario de su sitio web o aplicación lo más fluida posible; sin él, simplemente no hay forma de hacer que los formularios en línea sean más usuarios. -amigable y estéticamente agradable. Pero, no importa cuán desafiante sea el diseño de UX, es completamente factible.
Acá está la guía de Foonkie Monkey para un diseño exitoso de UX de formularios.
¿Qué son los formularios en línea?
Todos los hemos usado y los conocemos al dedillo, pero ¿qué son exactamente los formularios en línea? ¿Cómo trabajan? ¿Para qué son adecuados? Un formulario en línea o web es un elemento de recopilación de datos donde los usuarios, empleados y proveedores del sitio web ingresan su información personal o comercial para completar pasos, registrarse o acceder a los beneficios dentro de ese sitio web. Luego, la empresa de alojamiento recopila y envía estos datos a un servidor para su procesamiento. Como resultado, pueden fácilmente:
- Recopilar información de nuevos usuarios
- Ayudar a los usuarios a configurar nuevas cuentas
- Ayudar a los usuarios a completar pedidos
- Responder quejas y reclamos fácilmente
- Enriquecer las campañas de marketing
- Recopilar comentarios de los usuarios
- Procesar información de clientes potenciales
- Proporcionar la información legal requerida por los gobiernos
- Crear encuestas
Recopilar y procesar toda la información de estas fuentes sería prácticamente imposible sin los formularios en línea, de ahí su relevancia para las empresas de hoy en día. Sin embargo, aunque la mayoría de nosotros los usamos regularmente y son fundamentales para el éxito comercial, solo algunos entienden la importancia de diseñar formularios en línea buenos y atractivos.
Para resaltar su importancia, una encuesta muestra que los formularios en línea ayudaron a convertir más clientes potenciales en comparación con otras herramientas para casi un 74% de las compañías encuestadas. Sin embargo, otro estudio muestra que el 81% de los encuestados afirman haber abandonado un formulario en línea después de comenzar a completarlo, y el 26% de ellos cita la longitud del formulario como su principal impedimento. De hecho, la mayoría de los usuarios prefieren los formularios simples a los complicados, con cinco campos de formulario siendo la longitud que conduce a más conversiones, de ahí la importancia de implementar un buen diseño de formularios UX. Pero, ¿cómo puedes asegurarte de que no te conviertas en uno de esos que los usuarios dejan atrás? Estas son las mejores prácticas de Foonkie Monkey para un buen diseño de UX.
Mejores prácticas de diseño de UX de formularios
1. Menos es más
“¡Impresionante! ¡Completar este formato largo de cinco páginas suena muy divertido!” Nunca dijo nadie. La verdad es que todos odiamos las formas. Sí, sabemos que los necesitamos, pero tememos el proceso de llenarlos. Sin embargo, ese temor se amplifica cuando son innecesariamente extensos. En realidad, un estudio reemplazó un formulario de once campos con una versión más corta de cuatro campos de ese formulario, ¡y las tasas de finalización aumentaron en un 160%!
Es innegable: cada campo que sus usuarios deben completar para completar una acción aumenta la fricción y afecta drásticamente la experiencia del usuario de su producto. Cuando está optimizando el diseño de UX de su formulario, una de las mejores cosas que puede hacer es eliminar tantos campos como pueda para disminuir la fricción sin perder datos valiosos del usuario. Entonces, antes de implementar el diseño de UX de tu formulario, pregúntate: ¿Realmente necesito esta información? ¿Debo pedir realmente a los usuarios sus números de teléfono y de fax? ¿O su etnia? ¿Realmente necesito el nombre de su empresa? Lo más probable es que no lo haga, así que solo pregúnteles qué es relevante para el proceso de llenado de formularios. Ir por la borda con tan solo un campo innecesario puede costarle considerablemente. Tome Expedia, por ejemplo. El gigante de las reservas de viajes aumentó sus ganancias anuales en $12 millones simplemente eliminando el campo “Nombre de la empresa” de su formulario de reserva. ¿No estás convencido? Mira estas estadísticas:
- El campo “edad” reduce las tasas de conversión en un 3%.
- Los campos “ciudad” y “estado” reducen las tasas de conversión en un 2%.
- El campo “número de teléfono” reduce las tasas de conversión en un 5%.
- El campo “dirección” reduce las tasas de conversión en un 4%.
A primera vista, estos puntos de datos pueden parecer necesarios, y quizás lo fueran hace años cuando los números de teléfono o las cartas físicas enviadas a los hogares de los usuarios eran el único medio de contacto, pero ahora tenemos el correo electrónico. Entonces, en lugar de implementar esos cuatro campos innecesarios, simplemente solicite sus direcciones de correo electrónico y podrá agrupar esos campos en uno solo. En cualquier caso, la clave aquí es encontrar un equilibrio entre recopilar datos críticos, mantener la experiencia del usuario y mantener una tasa de conversión sólida.
2. Marque claramente los campos opcionales
Como dijimos anteriormente, es fundamental que se asegure de eliminar tantos campos opcionales (o innecesarios) como sea posible. Sin embargo, dado que es probable que su producto satisfaga a usuarios con diferentes necesidades, algunos campos pueden parecer necesarios para algunos visitantes pero no para otros. Por ejemplo, puede hacer que el campo del número de teléfono sea opcional. Si un usuario desea recibir anuncios promocionales por mensaje de texto, puede completar el campo del número de teléfono; si no lo hacen, pueden dejarlo en blanco. Lo más importante a tener en cuenta aquí es etiquetar claramente los campos opcionales usando la palabra “opcional” para evitar confusiones. En cualquier caso, le sugerimos que siempre intente eliminar los campos opcionales o limitarlos a solo uno o dos como máximo.
3. Divide los campos en formularios de una sola columna
Cuando se trata de estructurar sus formularios y definir su diseño, debe mantener las imágenes y el orden de sus campos lo más limpios y sencillos posible. Para hacerlo, siempre debe utilizar un diseño de una sola columna. ¿Por qué? Porque como ya ha aprendido, los usuarios suelen responder mejor a formularios más cortos; quieren terminar el formulario lo más rápido posible, y los formularios de una sola columna lo ayudarán a lograrlo. Visualmente, este tipo de formularios son menos intimidantes, parecen más cortos y, en general, son más fáciles de completar. Un estudio reveló que los usuarios encuestados pudieron completar un formulario lineal de una sola columna en un promedio de 15,4 segundos más rápido que un formulario de varias columnas. Y lo creas o no, esos 15 segundos pueden marcar una diferencia significativa entre la conversión y el abandono. Por lo tanto, al organizar los campos de su formulario en una sola columna, sus usuarios completarán los espacios en blanco sin problemas en un orden que tenga sentido para ellos y sin aburrirse o molestarse. Además, los formularios de una sola columna son mucho más aptos para dispositivos móviles que los formularios de varias columnas, lo que los convierte en la alternativa más eficiente para el diseño de UX de formularios porque puede optimizarlos fácilmente para dispositivos móviles sin realizar modificaciones significativas en el diseño inicial del formulario.
4. Agregue etiquetas de campo de formulario claras
Debe decirle a sus usuarios qué información ingresar y dónde ingresarla. Sí, este punto puede sonar obvio, pero te sorprendería saber que un 92% de los sitios web de comercio electrónico más grandes de los EE. UU. tienen varias etiquetas de campo de formulario confusas e inadecuadas durante sus procesos de pago, lo que afecta negativamente a su experiencia de usuario. Las descripciones de campos de formulario inadecuadas o débiles pueden variar desde no explicar qué información debe completarse hasta no explicar las reglas de su contraseña o cómo usará el número de teléfono de un usuario, por ejemplo, todo lo cual es más común de lo que piensa. También pueden ser demasiado largos o demasiado descriptivos, creando desorden y dañando el diseño UX/UI de la página.
Por lo tanto, es esencial que ayude a los usuarios a saber cómo entender qué información necesita que ingresen, cómo ingresarla y dónde ingresarla. Para esto, debe agregar etiquetas que no solo especifiquen la información que necesita en un campo específico (por ejemplo, dirección, nombre, correo electrónico) sino también en qué formato (por ejemplo, número de teléfono con código de área o país) y con qué caracteres o requisitos especiales (por ejemplo, contraseñas seguras o caracteres especiales reconocidos/no reconocidos). Además, las etiquetas de formulario más descriptivas pueden aliviar las preocupaciones de seguridad en los campos que requieren que el usuario ingrese información personal. Por ejemplo, al solicitar el correo electrónico de un usuario, puede agregar una etiqueta de formulario que lo explique brevemente para enviarle actualizaciones de envío, no spam. De esta manera, las etiquetas de formulario adecuadas pueden ser informativas y ayudar a aliviar la incomodidad del usuario al describir por qué se requiere cierta información.
5. Habilita autocompletar
En caso de que no lo hayas notado, el principio general de las mejores prácticas de diseño de UX de formularios es hacer que las cosas sean lo más fáciles posible para los usuarios, pase lo que pase. En ese sentido, el autocompletado puede ser tu mejor amigo y el de tus usuarios. Utiliza atributos comunes para completar automáticamente campos como nombre, número de teléfono, dirección de correo electrónico, número de tarjeta de crédito y otra información de uso común para que el usuario no tenga que completar manualmente esos campos.
Hacer que el diseño de UX de su formulario sea compatible con los perfiles de autocompletar de sus usuarios es una implementación simple pero ventajosa que puede ayudar a agilizar el proceso de presentación de formularios y hacerlo significativamente menos tedioso. También puede mejorar la experiencia del usuario al reducir la fricción porque limita la cantidad de escritura manual que los usuarios tienen que hacer y reduce el tiempo que lleva completar el formulario y finalizar el proceso de pago.
6. Haga que su formulario sea compatible con dispositivos móviles
Hoy en día, cualquier diseñador moderno de UX/UI sabe que debe optimizar todos los productos basados en TI para dispositivos móviles. Lo mismo ocurre con los formularios web. Diseñar un formulario sobresaliente no le servirá de nada si, cuando los usuarios lo abren en sus dispositivos móviles, no se carga correctamente o se carga con errores e inconsistencias en el diseño. A esto se suma el hecho de que, por lo general, hay más usuarios móviles que usuarios de escritorio; son menos pacientes y las cosas son más difíciles de manejar en la pantalla pequeña de un teléfono inteligente que en una computadora de escritorio. Por lo tanto, para satisfacer todas las necesidades de sus usuarios, su estrategia de diseño de formulario UX debe incluir elementos que respondan a dispositivos móviles. Eso significa crear una estrategia de diseño que permita que su formulario haga una transición sin problemas entre dispositivos móviles y de escritorio y viceversa, o diseñar una configuración de formulario completamente diferente para cada plataforma. Independientemente de lo que decida, el diseño de UX de su formulario debe ofrecer un diseño consistente, flujos continuos, elementos de calidad excepcional y una experiencia de usuario impecable para todos los visitantes en todos los dispositivos.
En ese sentido, asegúrese de que el diseño de UX de su formulario incluya lo siguiente:
- Letras que son totalmente legibles incluso en las pantallas más pequeñas.
- Etiquetas que marcan claramente cada campo.
- Grandes botones de acción que brindan a los usuarios suficiente espacio para que sus dedos seleccionen la opción que desean sin fricción.
- Diseño visual compatible con dispositivos móviles.
También puede implementar herramientas solo para dispositivos móviles, como un escáner de tarjetas de crédito o reconocimiento facial para fines de seguridad de autocompletar. Además, asegúrese de que aparezca el elemento de entrada adecuado para cada campo según los datos que se deben ingresar. Por ejemplo, si el campo es para ingresar un número de teléfono, entonces el teclado numérico debería aparecer automáticamente.
Recuerde, sin un diseño de UX de formulario compatible con dispositivos móviles, sus usuarios se sentirán frustrados y los perderá, lo que sin duda afectará sus tasas de conversión y niveles de usabilidad. Por lo tanto, nunca pase por alto un buen diseño UX de forma móvil.
7. ¿Demasiados campos de formulario? Usa formularios de varios pasos
Como mencionamos anteriormente, su formulario debe ser lo más corto posible, e idealmente siempre debe asegurarse de que toda la información quepa en una sola página. Sin embargo, no todos los formularios son lo suficientemente cortos como para caber en una página. Si tiene un formulario largo y definitivamente no puede hacerlo más sencillo, le sugerimos que lo divida en un formulario de varios pasos.
Un formulario de varios pasos es un formato que divide los cuestionarios más largos en varias partes o pasos para que sean menos abrumadores y más fáciles de completar para los visitantes. Las diferentes partes del formulario solo se vuelven visibles después de que el usuario ya haya completado la parte anterior. Como resultado, la longitud del formulario y la cantidad de trabajo y tiempo que su usuario dedica a llenarlo parece más manejable, y es menos probable que la experiencia del usuario de su formulario se vea afectada negativamente por su longitud.
8. Agrega señales explícitas de presentación y confirmación.
Hasta ahora, hemos tocado los aspectos más cruciales de ayudar a los usuarios con el proceso de completar formularios y garantizar que tengan una experiencia fluida al hacerlo. Sin embargo, eso es solo la mitad de la batalla. Completar el formulario implica otro conjunto completo de elementos que debe tener en cuenta para asegurarse de no perder usuarios en los pasos finales de su visita.
Puede incluir elementos de diseño de UX específicos que guíen a sus usuarios a través de todo el proceso de llenado de formularios hasta su finalización y consoliden la experiencia de usuario de su formulario. Algunos de estos elementos incluyen lo siguiente:
Indicadores de progreso: Este punto puede parecer innecesario; después de todo, el progreso de la forma parece bastante autoexplicativo. Empiezas, llenas los campos en blanco y listo. Pero créalo o no, la mayoría de los usuarios realmente disfrutan de indicadores de progreso o barras de progreso que ilustran con precisión lo que implica el proceso de llenado de formularios y en qué etapa se encuentran. Entonces, por ejemplo, puede usar descripciones breves, barras de progreso en la parte superior de su formulario o un breadcrumb trail para agregar visibilidad a los flujos de registro o pago.
Mensajes de éxito: Una vez más, este elemento puede parecer excesivo. Los usuarios sabrán cuándo completaron el formulario porque… bueno, lo completaron. La mayoría de ellos lo sabrá, pero lo crea o no, los usuarios suelen apreciar un mensaje de éxito tranquilizador que confirma que han completado una acción. Y, si fortalece ese mensaje con un entusiasta “¡gracias!” sus usuarios se sentirán apreciados.
Mensajes de error: Los mensajes de error son componentes cruciales de cualquier diseño robusto de UX. No solo aseguran que ayude a sus usuarios a enviar sus respuestas con éxito, sino que también garantizan que las respuestas enviadas no tengan errores e incluyan los elementos que necesita. Estos mensajes de error pueden aparecer en forma de ventanas emergentes, etiquetas de color rojo cerca del campo con el error o un mensaje que resalta el error. Cualquiera que elija incluir en el diseño de UX de su formulario, es esencial no ser demasiado agresivo o señalar el error de manera grosera. En su lugar, sea lo más amable y edificante posible para evitar fricciones y crear una experiencia incómoda.
¡Es hora de poner a trabajar el diseño UX de tu formulario!
Completar un formulario no es una experiencia agradable para nadie. Por lo general, es una experiencia agotadora y molesta por la que la mayoría de nosotros volamos en escenarios en los que absolutamente tenemos que hacerlo. Pero, afortunadamente, los diseñadores de UX/UI ahora tienen las herramientas y el conocimiento para implementar los elementos y aplicar algunas de las mejores prácticas que describimos aquí para tratar de simplificar el molesto proceso de llenado de formularios y optimizar su experiencia de usuario tanto como sea posible. Sí, completar formularios nunca será una experiencia súper divertida para nadie, pero puede convertirlo fácilmente en un proceso menos enloquecedor y molesto para sus usuarios.
Entonces, ahora que terminó de leer nuestro artículo, es de esperar que tenga una gran cantidad de conocimientos para ayudarlo a desarrollar una estrategia sólida de diseño de UX de formularios y obtener información relevante para hacer que el proceso de llenado de formularios sea una actividad algo agradable. Sin embargo, tenga en cuenta que los principios de diseño de UX de formularios no son de talla única. Sí, la mayoría de ellos pueden funcionar la mayoría de las veces, pero debe desarrollar su estrategia en función de su producto, su investigación y los datos que recopila de las pruebas. Aún así, seguir estas y otras mejores prácticas puede ayudarlo a afianzarse en el diseño de UX de formularios, para que no comience desde cero y tenga una buena línea de base.
Si tiene alguna pregunta sobre este artículo o si desea que trabajemos en el diseño de UX de su formulario, ¡contáctanos pronto para que podamos hablar!.
