El formulario es quizás el elemento más importante de un website. Existe mucha documentación sobre cuál es la mejor manera de diseñarlos, de manera que sean efectivos y logren un alto ratio de conversión. En este post he fusionado todas las indicaciones sobre formularios que hay dispersas tanto en libros como en internet. Espero que os sirva de ayuda.
Índice de contenidos
1. Las reglas de oro
- Elige los campos correctos:
Por regla general, a nadie le gusta rellenar formularios, de modo que cuanto más sencillo sea, mayor ratio de conversión obtendrás. Esto significa, entre otras cosas, que un formulario debe tener un máximo de 7 campos y solicitar la información mínima necesaria en ese momento.
Debemos tener en cuenta que al rellenar el formulario, el usuario debe dar información personal, lo que supone que debe confiar en el sitio. Piensa en un formulario de registro que solicita tu número de teléfono. ¿Lo rellenarías? ¿Es realmente necesario solicitar esa información en este punto?
- Simple y claro:
Debe quedar claro lo que el usuario debe introducir en cada campo, no utilices textos que lleven a error. Por ejemplo en Asana, una aplicación para gestión de tareas y proyectos empresariales, al registrarte pide que introduzcas un nombre y no queda claro si se refiere al tuyo o al de tu empresa, o si podrás modificarlo más adelante en caso de que te equivoques.
- Cuida el diseño:
Este punto es extensible al resto de elementos del sitio y debe mantener una coherencia entre ellos. El 48% de la gente considera que el diseño es el factor principal que decide la credibilidad del negocio¹, y en función de si les agrada o no, tardarán entre 4 y 6 segundos en decidir si continúan navegando. Piensa que la web de tu empresa es, en muchos casos, el primer contacto que tiene un usuario con tu marca.
- Mantén el engagement:
Una vez completado y enviado el formulario, agradece o felicita al usuario e intenta mostrar un mensaje que le invite a permanecer en tu sitio ( “Ya has dado tu primer paso”).
2. Construyendo el formulario
Los campos del formulario deben mostrarse en una única columna para facilitar su legibilidad.
Cada label debe situarse sobre su input, no al lado, y debes tener cuidado para que no haya la misma distancia entre su input y el que tenga encima, especialmente en formularios grandes. Debe quedar claro a qué input corresponde.
Prescinde de los asteriscos para indicar campos obligatorios, ya que incita al usuario a saltar los opcionales. Es preferible señalar éstos últimos de manera suti
Evita utilizar los inputs como labels.
Indica qué información será pública y cuál no. También se puede indicar si podrá modificar ese campo en el futuro o si no podrá hacerlo.
Es importante que los mensajes de error sean explicativos y amigables. Si su aspecto es demasiado rudo o su texto no explica lo que ha sucedido y cómo el usuario debe solucionarlo, es muy probable que se sienta frustrado y no continue rellenándolo. Piensa que el 88% de los usuarios no vuelven a visitar una web tras una mala experiencia². Además, el mensaje de error debe aparecer cuando el usuario abandone el campo, no mientras aún lo está editando.
No ocultes los mensajes de ayuda en un tooltip, es mejor que los muestres. También es conveniente indicar el formato a introducir, por ejemplo en las fechas.
Intenta sustituir el clásico mensaje de “Enviar” en el botón de Submit por algo más descriptivo como “Únete ahora”. Si hay varios botones y quieres resaltar alguno, no utilices el color como clave diferenciadora única. Emplea negrita, diferentes tamaños o cualquier otra técnica.
En caso de que necesites recoger mucha información y por tanto, insertar un formulario con muchos campos, es recomendable utilizar formularios escalonados (Stepped Forms), que dividen el proceso en pequeñas secciones. Esto además evita, en algunos casos, mostrar campos innecesarios en función de elecciones que el usuarios haya tomado en pasos anteriores. También puedes incluir una barra de progreso para que el usuario sepa en qué punto se encuentra y cuánto falta para terminar.
A cada paso del formulario, es recomendable mostrar un mensaje sobre las ventajas de rellenarlo. Debemos recordar al usuario por qué lo hace (ej.: “Al finalizar el formulario obtendrás 1 mes del servicio gratis”).
En caso de no poder dividir el formulario, puedes agrupar los campos por categorías (Datos personales, información de la cuenta, etc.).
3. Conclusiones
El formulario es el punto de contacto entre la empresa y el usuario, y debemos hacer todo lo que esté en nuestra mano para que lo rellene con éxito, ya que es donde se suelen perder la gran mayoría de conversiones. Hemos visto que para conseguirlo hace falta más que una estética agradable, y que siguiendo una serie de pautas UI, podemos guiar a los usuarios con un mínimo esfuerzo.
4. Referencias
- ¹ UX Magazine
- ² Econsultancy.com
- Formularios inteligentes o smart forms: lo que necesitas saber, InboundCycle
- Web Form Design Best Practices: 5 Useful UI Patterns, Uxdesign.cc
- Design Better Forms, Uxpin.com
- Formularios web
- UserOnboard
- Why Users Fill Out Less If You Mark Required Fields, UX Movement
- Experiencia de Uso en Formularios: mis 15 referencias
Excelente informacón, creo que con los placeholders aveces e cometido abuso, tratare de no hacerlo mas 😀
Estimado Jesús: Por favor también trata de no abusar del idioma español (reduciendo la cantidad de faltas de ortografía).