¿Es éste otro artículo más sobre formularios? Sí, lo es. Pero, tras haber leído información de muchas fuentes, trabajar en el sector de la banca digital (donde hay formularios hasta en el café) y haber tenido que luchar con ellos en repetidas ocasiones, me he animado a reunir en estas líneas el conocimiento adquirido.

Una sola columna evita confusiones

La distribución vertical de los elementos de un formulario en una sola columna genera una lectura más sencilla, rápida y natural para el usuario.

Evitar una estructura de varias columnas ahorrará equivocaciones a la hora de comprender el orden (si lo hay) del formulario, campos sin cumplimentar, datos incorrectamente introducidos o la frustración y el posterior abandono del proceso.

Por otro lado, las asociaciones entre campos que tengan una lógica fácil de comprender puede justificar disponerlos juntos y a la misma altura. Por ejemplo, un campo que recoja un nombre junto a otro de apellido, o un selector de código de país al lado de un campo cuyo contenido sea un número de teléfono.

Utiliza correctamente cada tipo de campo según su contenido

Existen diferentes tipos de campos de texto. O, dicho de otra manera, hay modificaciones sobre el elemento «campo de texto» que han surgido por la necesidad de recoger distintos tipos de datos (numéricos, cadenas de texto, fechas, selecciones, etc).

Por ejemplificar: en el caso de un campo que vaya a recoger un número de teléfono, lo correcto será utilizar uno que sólo admita introducir dígitos y no letras. Evitaremos posibles errores y también ayudaremos, en dispositivos móviles sobre todo, a que se muestre el teclado correcto (numérico o alfabético) cuando el usuario haga foco en el campo en cuestión.

Etiquetas (labels)

Existen diferentes opiniones y estudios sobre las ventajas y desventajas de situar la etiqueta encima del campo, a la izquierda o si utilizar un placeholder dentro del mismo.

No entraré a analizar dichos estudios y me limitaré a dar mi punto de vista: con el objetivo de facilitar al máximo la lectura, ubicar la etiqueta encima del campo al que corresponde es la mejor opción. Además, creo que de esta manera evitaremos dolores de cabeza a la hora de diseñar el formulario en su conjunto.

Tip: evita la capitalización de las etiquetas, hacen más difícil su lectura.

Los placeholders no son etiquetas

A veces los placeholders confunden más que ayudan. Esto se debe a que se suelen utilizar como etiquetas y, como es natural en su comportamiento, desaparecen cuando el usuario interactúa con el campo. El efecto inmediato y negativo es que dejamos al usuario sin la capacidad de verificar, antes de enviar el formulario, la información que proporcionó.

La recomendación es evitar su uso y, en el caso de querer proporcionar información extra, utilizar textos de ayuda fuera del campo que ayuden a completarlo con éxito.

Define la longitud de los campos proporcionalmente al contenido esperado

Reconozco que un formulario alineado es, en muchos casos, visualmente más atractivo y compensado.

Aun así, acomodar la longitud de cada campo al volumen de contenido esperado facilitará la lectura del formulario y guiará visualmente al usuario para una mejor comprensión del mismo.

La validación «en directo» es tu mejor aliada

Ayuda al usuario con feedback (mensajes de ayuda) instantáneo en los campos que requieran un formato específico. No hay peor sensación que terminar de completar un formulario con muchos elementos y que, al enviarlo, aparezcan errores que podríamos haber evitado con algunas directrices.

Esto se ve muy claramente en los campos del tipo «email», en los que los caracteres de arroba (@) y punto (.) deben estar presentes obligatoriamente. O, por poner otro ejemplo, en los campos de contraseña, que suelen tener requisitos muy acotados y restrictivos para el usuario.

Reduce el número de campos

La simplificación de los elementos en pantalla reduce significativamente la carga visual y cognitiva del usuario. Si podemos aunar en un mismo campo nombre y apellidos o una fecha completa, mucho mejor.

No ocultes opciones de selección (si son pocas)

El usuario agradece tener la información disponible a la vista.

Partiendo de esta premisa, en casuísticas en las que las opciones entre las que el usuario debe elegir sean pocas (yo suelo poner el límite en unas 5 o 6), lo correcto es usar radio buttons o checkboxes. De esta manera estarán visibles desde el primer momento en el que el usuario visualiza la interfaz.

Para casos donde el número de opciones sea alto, es adecuado el uso de combos (también llamados selects).

Campos obligatorios VS campos opcionales

Lo cierto es que el aprendizaje nos sugiere que todo campo que tiene un asterisco, normalmente en su etiqueta, es obligatorio. Contrario a esto, yo veo más adecuado marcar con un «Opcional» los campos o elementos que el usuario pueda dejar sin completar.

La razón es la siguiente: en mi experiencia (y según he leído en otras fuentes), los campos opcionales para el usuario suelen ser menos numerosos con respecto a los campos obligatorios. Esto me hace pensar que tiene más sentido distinguir los primeros con un «Opcional», por ejemplo, que añadir un asterisco a cada uno de los campos requeridos obligatoriamente y, en consecuencia, saturar la interfaz con estos elementos que comparten el mismo significado.

Agrupa los elementos de formulario relacionados

Esto ayudará a escanear mejor el formulario y a identificar rápidamente los grupos de datos que le estemos pidiendo al usuario.

Ejemplos comunes de agrupación de datos en formularios son:

• Datos personales (nombre, apellidos, fecha de nacimiento, edad y domicilio).
• Datos financieros (IBAN, número de tarjeta, nombre del titular, fecha de caducidad)
• Datos de facturación (dirección, localidad, país, código postal, CIF, NIF, etc)

Utiliza lógica condicional

Esto permitirá mostrar u ocultar campos automáticamente dependiendo de las decisiones que tome el usuario mientras complete el formulario. Este enfoque no solo reducirá la cantidad de campos, sino que también hará que la tarea de completarlos sea más personalizada, dando sensación de cercanía y reduciendo, a su vez, posibles frustraciones.

Si el formulario es muy grande, trocéalo en pasos

Dividir una gran tarea en trozos más pequeños ayudará a que sea más fácil de abordar, generando la sensación de que supone un menor esfuerzo hacerla.

La solución puede ser crear un wizard (proceso) con unos pocos pasos en donde agrupemos los campos que tienen relación entre sí.

Campos de contraseña

Este tipo de campo requiere de atención especial, ya que suele ser un momento de frustración para el usuario si no hemos sabido tratarlo con cariño.

Hay ciertas buenas prácticas que harán de la experiencia de crear o introducir una contraseña, un trago mucho más sencillo de llevar:

• Permite al usuario desenmascarar su contraseña en lugar de pedirle que la introduzca 2 veces.

• Intenta mostrar los requisitos que debe cumplir la contraseña en todo momento y, si es posible, muestra un progreso donde el usuario pueda confirmar que los aplica correctamente.

• El uso de medidores de «fortaleza» suele incitar a los usuarios a crear contraseñas más seguras.

Accesibilidad

Presta atención no solo al contraste visual entre elementos y fondos para lograr una buena accesibilidad visual (esto puedes hacerlo con herramientas como el Contrast Checker de WebAIM), sino también a la interacción que el usuario puede realizar con el teclado y cómo se relaciona con nuestro formulario.

Una buena práctica es tener en cuenta cosas como:

• El orden de tabulación de los campos o elementos del formulario.
• La interacción con las flechas de dirección del teclado.
• El uso de las teclas Enter y Space.

Acciones

Los formularios suelen tener (como elemento final) un botón que envía los datos a una base de datos, a un buzón de correo o para que sean validados por algún sistema.

Hay situaciones en las que este botón «primario» (ya que realiza la acción deseada en primer lugar) puede coexistir con otras acciones. A éstas últimas las llamamos «secundarias» y debemos tratarlas visualmente como tal, con el objetivo de minimizar la confusión y el riesgo de errores potenciales por parte del usuario.

Los mensajes que contienen las acciones, ya sean botones o enlaces, deben ser descriptivos, pero concisos.

Conclusión

Los usuarios suelen ser reticentes a la hora de rellenar formularios. Por este motivo, nuestro objetivo como diseñadores es hacer este proceso lo más fácil y rápido posible.