Formularios atractivos y pensando en el usuario – UX UI

Diseñar bien un formulario es muy importante. Uno de los principales problemas con los que a menudo te encuentras es tener que elegir entre labels o los placeholders. Si usas labels te roban espacio y a mi gusto, queda más feo. Por otro lado, si usas placehoder, el texto desaparece en cuanto el usuario pincha, puede ocurrir que no recuerde qué campo iba en esa caja. Te voy a enseñar cómo hacer un formulario con placeholder perfectamente usable para el usuario.

Por Omar Benyakhlef Domínguez, diseñador y creativo digital.

¿Por qué usar placeholder es un problema?

El contexto desaparece

En cuanto el usuario teclea, el texto del placeholder desaparece.
Si duda después (“¿era email o usuario?”), tiene que borrar lo que ha escrito o hacer foco y refrescar para ver de nuevo la instrucción.
A nivel cognitivo, estás obligando a memorizar el label de cada campo, en lugar de tenerlo a la vista.

Peor accesibilidad

Las guías de accesibilidad recomiendan que haya labels o instrucciones visibles fuera del campo, porque los placeholders tienen contraste bajo, desaparecen y algunos lectores de pantalla los anuncian de forma inconsistente.
Personas con baja visión, problemas de memoria, TDAH o daño cerebral dependen de que el nombre del campo permanezca visible.

Problemas de contraste y legibilidad

Muchos placeholders se diseñan con tonos grises muy claros para “no molestar”, lo que los hace difíciles de leer, especialmente en pantallas malas o a pleno sol.
El usuario puede ni siquiera darse cuenta de que ese campo está vacío y necesita entrada.

Errores en formato y validación

El placeholder es mal soporte para formatos complejos (teléfono internacional, fecha, contraseña).
Cuando desaparece, ya no recuerda si era “DD/MM/AAAA” o “MM/DD/YYYY”. Las guías recomiendan ejemplos e instrucciones fuera del campo si el formato es crítico.

¿Qué te propongo?

Fíjate en este form, úsalo y a continuación te cuento por qué me gusta tanto.

¿Qué hace bien a nivel UI?

Jerarquía limpia

Cada campo tiene su bloque, con label, input y mensaje de error en una misma “caja mental”, lo que hace el formulario más fácil de escanear.

Feedback visual claro: al enfocar o escribir, el wrapper cambia de estado (color de borde/fondo), indicando qué campo está activo y cuándo hay error, gracias a ParsleyJS.

Consistencia visual

Todos los inputs comparten altura, anchura y estilos de foco; eso reduce ruido y hace que el formulario parezca más pro.

En resumen, visualmente el formulario transmite orden, un nivel de detalle superior y menos sensación de “form de backoffice”.

Ventajas UX

El label nunca desaparece

A diferencia de usar solo placeholder, el nombre del campo sigue visible mientras escribes y después, evitando que el usuario olvide qué estaba rellenando.

Ahorro de espacio vertical: en layouts comprimidos o en mobile, reduces la altura del formulario sin sacrificar el label.

Estados claros: el paso de label grande a label pequeño arriba refuerza visualmente que el campo está “rellenado” o en uso.

Esto soluciona uno de los grandes problemas de usar placeholders como etiquetas: el contexto desaparece cuando tecleas.

Microinteracciones y validación

El formulario integra ParsleyJS para validación, lo que aporta varios detalles UX interesantes:

Mensajes de error junto al campo

Cada input tiene un “Required” / “Invalid …” pegado al control, no un error genérico arriba. Esto ayuda a corregir rápido sin buscar.

Estados de error visuales

Cambio de color de fondo/borde cuando la validación falla, reforzando el mensaje textual. Esto facilita el escaneo de errores de un vistazo.

Validación en contexto

El usuario recibe feedback en el propio campo, reduciendo ida y vuelta entre formulario y mensajes.

Combinado con el movimiento del label, el formulario da sensación de “cuidar el detalle” y guiar al usuario en cada paso.
Usar formularios como el del ejemplo, es una opción muy sólida para elevar la sensación de calidad de tus interfaces sin sacrificar claridad ni usabilidad. Mantienes el nombre del campo siempre visible, ahorras espacio vertical, consigues un flujo de lectura limpio y, combinándolo con una buena validación inline, conviertes algo tan “aburrido” como un formulario en una parte más pulida y agradable de la experiencia de usuario.