Cómo diseñar formularios intuitivos para el usuario

¿Cómo debe ser un formulario? Lo has adivinado: esta pregunta no tiene una sola respuesta. Depende de quiénes sean tus usuarios, de sus objetivos y necesidades, así como del momento del customer journey en el que se encuentren. Y estos son solo algunos de los factores a tener en cuenta.

Por eso, cuando nos encontramos ante la tarea de diseñar un nuevo formulario, es una buena idea recurrir a los estándares y a las buenas prácticas de usabilidad y UX. En este post encontrarás algunos de los principios más relevantes para crear tu formulario. ¿Empezamos?

Antes de hacer nada, parémonos a pensar

En primer lugar, tenemos que plantearnos en qué momento y en qué situación vamos a mostrar el formulario a los usuarios. Si por ejemplo, nada más aterrizar en nuestra página les mostramos un aviso importante y, además, el formulario en formato pop up, es muy probable que se saturen y opten por cerrarlo todo sin ni si quiera leerlo. Lo entendemos. También puede ocurrir que mostremos el formulario demasiado pronto en la página y que, en ese punto, los usuarios aún no estén lo suficientemente cualificados como para rellenarlo. Así que, antes de nada, es importante definir bien el timing.

Por otro lado, tenemos que pensar qué información incluirá el formulario. En este sentido, es necesario transmitir de una forma muy clara cuál es el beneficio que obtendrán los usuarios al completar el formulario. Solo de esta forma conseguiremos motivarles para que lo hagan.

Algo que resulta muy obvio pero que no es tan fácil como parece, es diseñar un formulario que sea lo más corto posible y que sea fácil de leer, de forma que los usuarios entiendan rápido los datos que les estamos pidiendo.

Por tanto, diseñaremos nuestro formulario pensando en nuestros usuarios y teniendo en cuenta sus necesidades, sin olvidar que, una vez implementado, lo ideal es monitorizar su funcionamiento y analizar los datos de uso para tratar de optimizarlo.

Layout, campos y labels

Una vez tengamos claros los puntos comentados, podemos pensar ya en crear el formulario. A continuación, te mostramos algunos principios básicos relacionados con 3 áreas clave: layout, campos y labels.

El layout de un formulario es un factor muy importante, puesto que determinará la eficacia con la que los usuarios escaneen la información que contiene. ¿Cómo optimizar su estructura? Aquí tienes algunas directrices:

Coloca los campos en una sola columna para facilitar su lectura, excepto si hacen referencia a información relacionada (por ejemplo, “código postal” y “ciudad”).
El orden de aparición de los campos debe ser lógico y estar adaptado al modelo mental de los usuarios (por ejemplo, “tipo de vía” – “nombre de la vía” – “número” – “piso”).

Asegúrate de agrupar los campos relacionados entre sí y de que los distintos grupos se diferencien visualmente.
El tamaño de los campos debe ser aproximadamente el mismo que el del texto que se va a introducir, de forma que los usuarios puedan ver toda la información una vez lo hayan rellenado.
Es fundamental que el formulario sea responsive y se adapte correctamente al tamaño de los distintos dispositivos.

En cuanto a los campos, son los componentes con los que interactuarán directamente nuestros usuarios. ¿Cómo deben ser?

Nuestro objetivo es facilitar su experiencia al máximo, de ahí la importancia de indicarles qué campos son obligatorios, y mostrarles esta información junto a cada campo (mejor que tener un mensaje general para el formulario completo). Para hacerlo, es recomendable poner un asterisco a la izquierda, de forma que les ayudemos a ubicar fácilmente los campos requeridos.
De la misma forma, también es recomendable marcar los campos que son opcionales, puesto que esta información contribuye a reducir la carga cognitiva de nuestros usuarios. Colocar la palabra OPCIONAL al lado del título del campo es una buena opción.
Si para rellenar un campo es preciso utilizar un formato concreto, hay que incluir junto al campo las instrucciones exactas (por ejemplo, el número de caracteres que debe incluir una contraseña).
Es habitual que los usuarios cometan errores al rellenar un formulario. Por nuestro lado, la mejor forma de ayudarles es mostrarles los mensajes de error de una forma clara y visible (por ejemplo, utilizando otro color, delineando el campo erróneo, etc.).

Por último, NO es recomendable que los usuarios puedan borrar todo el formulario utilizando un botón tipo “clear all” o “reset”. Esto puede dar pie a un borrado accidental y provocar que el usuario tenga que empezar de cero, con todos los riesgos que eso implica.

Fuente: Unsplash

Finalmente, aunque no por eso menos importante, las labels. Las labels constituyen un elemento clave para ayudar al usuario a rellenar el formulario. Pero, ¿cómo utilizarlas?

Para empezar, algo muy simple pero fundamental: debe estar muy claro qué label va asociada a cada campo.
En cuanto al formato, la opción más usable son las floating labels. Estas aparecen en primer lugar dentro del campo y, cuando el usuario lo activa, se mueven a la parte superior del campo. Eso sí, las labels deben mostrarse siempre visibles porque, en el caso de desaparecer, cuando los usuarios empiecen a escribir perderán contexto del tipo de información que tienen que introducir y no podrán comprobar si los datos son correctos.
Y si un campo requiere una descripción adicional, una buena opción es colocarla fuera del campo para que los usuarios puedan consultarla en cualquier momento.

Estas directrices te servirán como guía para diseñar tu formulario. Pero no olvides que lo más importante es entender cómo lo utilizan tus usuarios. Los datos de analítica y una herramienta de grabación de sesiones te pueden ayudar a saber cómo es esa interacción, así como a detectar pain points y oportunidades de mejora que te permitirán optimizarlo.

Fuentes bibliográficas

Budiu, R. Marking Required Fields in Online Forms. Disponible en: https://www.nngroup.com/videos/required-fields-forms/

Sherwin, K. Placeholders in Form Fields are Harmful. Disponible en: https://www.nngroup.com/videos/placeholders-form-fields/

Whitenton, K. (2016). Website Forms Usability: Top 10 Recommendations. Disponible en: https://www.nngroup.com/articles/web-form-design/