Buenas prácticas para el diseño de formularios

Los formularios son un elemento que utilizamos con cierta frecuencia en la realización de diferentes tareas a lo largo del día. Utilizamos formularios para iniciar sesión en nuestra cuenta de facebook, para cumplimentar encuestas de satisfacción, para registrarnos en un e-commerce, y así en numerosas ocasiones a lo largo del día. Es por estos motivos por los que los diseñadores de experiencia de usuario debemos prestar una atención especial a estos elementos a la hora de crearlos.

Ejemplo de prototipo de un formulario móvil hecho por Torresburriel Estudio

Pararnos a pensar cómo diseñar un formulario puede hacernos conseguir una mayor tasa de éxito en la cumplimentación del formulario y, por consiguiente, en las tareas que sigan a ese formulario. Chaymae Lougmani nos cuenta en su post “Use these top 10 tips when you design for forms” que los usuarios dejan sin completar los formularios por diferentes motivos como por ejemplo, la obtención de repetidos errores en la cumplimentación. También afirma que los usuarios no completan los formularios porque no quieren dar información innecesaria e incluso porque no quieren registrarse.

En otras ocasiones ya os hemos explicado algunas buenas prácticas por medio de las cuales aumentar la conversión de los formularios de registro al máximo posible.

11 recomendaciones para el diseño de formularios

A continuación, explicamos 11 aspectos a tener en cuenta cuando abordamos el diseño de formularios.

1. Solicita solo datos indispensables: sabemos que el ejercicio de reducción de los campos solicitados en un formulario requiere un esfuerzo, pero de esta forma conseguiremos ahorrar tiempo a los usuarios e incrementar la tasa de éxito de finalización de la tarea, y la conversión si se trata de un formulario transaccional.
2. Agrupa las etiquetas con sus campos relacionados: las etiquetas tienen que estar cerca de sus campos. Cuando los formularios son extensos pueden dividirse en varias pantallas (asegurándonos siempre de que todos los campos son necesarios). Además, si existe la posibilidad de agrupar elementos a través de un título descriptivo, esta es una práctica recomendable ya que reducirá la carga cognitiva de los usuarios a la hora de cumplimentar el formulario.
3. Utiliza una sola columna para mostrar los campos: existen algunas excepciones como la colocación en dos columnas de campos relacionados como pueden ser, por ejemplo: día, mes y año de nacimiento.
4. Da peso al call to action: dotando a la llamada a la acción de un peso visual superior a la acción secundaria conseguiremos reducir los errores y dar a los usuarios la posibilidad de acceder de forma fácil por medio del teclado.
5. Utiliza la secuencia lógica: a la hora de mostrar los campos utiliza la secuencia más lógica para ello, pero siempre teniendo en cuenta las costumbres culturales. Como nos cuenta Lougmani, por ejemplo, no son iguales en Japón que en Europa.
6. Evita poner la etiqueta dentro del campo de texto: una vez que los usuarios comiencen a escribir en el campo la etiqueta desaparecerá de forma que perderán la opción de verificar si han introducido en el campo de texto la información que se les solicitaba. Esto se soluciona con la colocación de las etiquetas al lado del campo de texto, pero no dentro.
7. Dota a cada campo del tamaño necesario: no es igual el campo de texto destinado a introducir la dirección de facturación del usuario que en el que introducir el código CVV de la tarjeta de crédito. Esta práctica hay que llevarla a cabo sin perder la consistencia de diseño del formulario.
8. Ayuda a los usuarios a diferenciar los campos obligatorios de los que no lo son: y si no son necesarios, como ya hemos comentado anteriormente, no los solicites en el formulario, ya que siempre podrás solicitarlos después.
9. Explica los requisitos de los campos: si la contraseña debe cumplir un formato concreto por temas de seguridad, indícalo al usuario teniendo en cuenta la regla anterior de no colocar etiquetas dentro de los campos de texto.
10. Evita botones para restablecer y borrar los datos introducidos: aunque actualmente ya no resulta una práctica muy común, existe la posibilidad de encontrarla en diseños más antiguos.
11. Proporciona mensajes de error claros: es totalmente necesario indicar a los usuarios de forma visual si han tenido un error en la cumplimentación del formulario, pero tan importante o más es indicarle cómo resolver ese error y/o el porqué se ha producido.

Llevar a la práctica estas 11 recomendaciones cuando diseñamos un formulario puede parecer una tarea compleja pero en realidad no lo es, y resulta mucho más sencilla de lo que puede parecer a simple vista. Simplemente debemos pararnos a pensar unos minutos antes de ponernos a diseñar. Si llevamos a cabo estas once recomendaciones estaremos ayudando tanto a los usuarios como a nuestros clientes. A los primeros les estaremos ayudando a realizar su tarea en un menor tiempo y de una forma más sencilla, y a los segundos les estaremos ayudando a incrementar la tasa de conversión del formulario que hayamos diseñado.

En Torresburriel Estudio te podemos ayudar a implementar procesos de mejora continua en tus productos digitales mediante una consultoría de acompañamiento.
Contacta con nosotros y cuéntanos tu proyecto. Te enviaremos una propuesta adaptada a tus necesidades y presupuesto.