Diseño de formularios usables

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.

    Campo de formulario confuso
  • 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”).

    Mensaje de agradecimiento

2. Construyendo el formulario

Los campos del formulario deben mostrarse en una única columna para facilitar su legibilidad.

Formulario dos columnas

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.

Label a un lado

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

Campo opcional

Evita utilizar los inputs como labels.

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.

Mensaje información privada

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.

Mensaje de error explicativo

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.

Formulario con tooltip
Información de formato

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.

Mensaje submit personalizado

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.

Barra de progreso

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.).

walgreens-registration-forms-comparison-from-nn-group

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