Cómo diseñar formularios usables para mejorar tu conversión

Best practices en UX para formularios

Para muchas empresas, tanto B2B como B2C, la captación de leads a través de formularios de contacto constituye una de las principales fuentes de captación, si no el más importante.

Es por ello por lo que debemos prestar especial atención a los formularios de contacto, porque de su buen rendimiento depende el de nuestro negocio.

Por esto, en este artículo te proponemos enseñarte 13 tips a tener en cuenta al diseñar formularios, para que puedas optimizar los de tu web o los de tus landing pages de captación.

13 Tips para diseñar formularios que mejoren tu conversión

1. No ocultes lo que puedas mostrar

Si puedes mostrar la información en lugar de ocultarla, muéstrala a menos que sea demasiada. En el caso de los campos de un formulario, es preferible mostrar opciones si son pocas que poner un desplegable, útil cuando hay muchas opciones que elegir.

2. Ofrece feedback al usuario

En todo momento y en cada acción que esté llevando a cabo el usuario, es fundamental dar feedback al usuario de lo que está pasando. En el caso de los formularios, es importante informar de los errores que pueda haber al rellenar los campos, que deberemos indicar de forma clara, con lenguaje y símbolos sencillos, sin tecnicismos y aportando información para que pueda deshacer los errores. Asimismo, cuando los campos se hayan rellenado correctamente, daremos también feedback positivo, mostrando validaciones.

3. Usa una columna para tus formularios

Evita añadir varias columnas para tus campos de formularios: Las personas leemos de arriba abajo, si incorporamos campos a izquierda y derecha estamos dificultando el proceso. Si tenemos muchos campos, hay alternativas a las columnas para mostrarlos de forma más usable, como comentaremos en los siguientes tips.

4. Agrupa información relacionada entre ella

En formularios con procesos largos, donde necesitamos mucha información del usuario, es preferible agrupar la información por temas.

5. Divide en pasos con visibilidad del estado en el que se encuentra

La opción de dividir el proceso en varios pasos puede ser muy positiva y algunos estudios afirman que mejora la conversión.

6. Incorpora labels e inputs para cada campo

El usuario debe tener claro en todo momento qué tipo de información tiene que añadir en cada campo. Por ello, los labels encima de cada campo son necesarios, así como los textos dentro del campo, los input text, que sirven como ejemplo y desaparecen al escribir.

7. Evita el uso de las mayúsculas

Las mayúsculas no facilitan la lectura, hace que tardemos más en leer un contenido, así que en la medida de lo posible, mejor evitarlas.

8. Usa iconos y colores convencionales

Para errores, iconos como una X y colores rojos. Para feedback positivo, el color verde e iconos de check sería una convención. Para hacer, por ejemplo, una contraseña visible, el uso del icono de ojo es también muy utilizado. Sin embargo, muchas veces un icono no será suficiente para entender un concepto, es más efectivo combinar icono con texto, en muchos casos.

9. Utiliza Call-To-Actions descriptivos

Los CTA en botones principales y secundarios deben ser descriptivos y concisos, que claramente comuniquen qué implica clicar o tocar ese botón. Cuanto menos genéricos y más concisos, mejor. Y si podemos incluir la primera persona del singular, más efectivos aún. Por ejemplo, si estamos diseñando un formulario para una subscripción, el CTA podría ser “Quiero suscribirme” en lugar de “Enviar”.

10. Affordance para la longitud de campos

En UX el Affordance se utiliza para indicar propiedades de los elementos de la interfaz que muestran a los usuarios qué acciones pueden llevar a cabo con ellos. Así, por ejemplo, un botón con un CTA es muy utilizado porque los usuarios perciben rápidamente que se puede clicar, como harían en un entorno off-line para activar un botón. En el caso de los campos de un formulario, el hecho que un campo sea más o menos largo puede ser percibido como que necesita más o menos información para ser completado, por lo que es importante que la longitud del campo sea acorde a la longitud del texto que necesita.

11. Mejor un Captcha escondido

En la medida de lo posible, intentaremos evitar un captcha visible en nuestros formularios, es mucho mejor configurar un captcha escondido que pedir al usuario acciones añadidas de validación, puesto que genera fricciones innecesarias.

12. No te olvides de la accesibilidad

Los formularios deben respetar las normativas de accesibilidad para que todos los usuarios puedan rellenarlo sin problemas. Es importante revisar el contraste, la navegación por tabuladores, entre otros. Si te interesa, puedes leer más sobre accesibilidad.

13. Configura correctamente los input types

En mobile, este punto es fundamental. Para que se pueda mostrar el teclado adecuado en cada campo, es esencial configurar cada campo con un tipo de input específico. Este es el listado de tipos de campos más comunes:

• input type=”text” muestra un teclado de texto común
• input type=”email” muestra un teclado de texto común y además un ‘@’ y un ‘.com’
• input type=”tel” muestra un teclado numérico del 0-9
• input type=”number” muestra un teclado con números y símbolos
• input type=”password” oculta caracteres conforme se va escribiendo
• input type=”date” muestra el selector de fecha

No des nada por sobreentendido

La experiencia de rellenar un formulario puede ser percibida de una manera larga, aburrida o incómoda, por lo que tenemos que intentar revertirla, haciendo que la experiencia sea lo más fluida posible, que no sea percibida como un trámite obligado sino como una parte más de la navegación por nuestro site.

Por eso, más allá de aplicar los tips de arriba, desde Novicell te recomendamos que no des nada por evidente: que lo entiendas tú no significa que tus usuarios lo entiendan. En los formularios, y en general en cualquier interfaz, es fundamental conocer a los usuarios que van a interactuar con ella. Y para conocerlos, es necesario empatizar con ellos a través de la investigación y los test de usuarios.

¿Necesitas que tu web tenga en cuenta a tus usuarios?

Si necesitas más información no dudes en ponerte en contacto con nosotros.