Seguro que te ha pasado: estás a punto de comprar algo, llegas al formulario de pago, y de repente hay 15 campos, la validación te grita «FORMATO INVÁLIDO» antes de terminar de escribir, y el botón de continuar está deshabilitado sin explicación.
Obviamente, cierras la pestaña.
Más del 67% de usuarios abandona formularios si encuentran cualquier complicación. Y no es porque sean impacientes… es porque los formularios están mal diseñados.
Llevo años diseñando productos, y te puedo asegurar que los formularios son donde se gana o se pierde la conversión. Un campo de más, un mensaje de error confuso, una validación mal implementada, y acabas perdiendo un registro o una venta.
Te cuento lo que he aprendido sobre cómo diseñar formularios que la gente realmente completa.
El coste real de un formulario mal diseñado
Los datos son claros: más del 80% de usuarios abandona formularios de checkout antes de completarlos. Poniéndolo en números más tangibles: si 10.000 personas llegan al formulario y solo el 33% lo completa, estás perdiendo 6.700 conversiones. Si se trata de una tienda online con ticket medio de 50€, eso son 335.000€ que se evaporan 👻 .
Por eso cada decisión cuenta: ¿realmente necesitas pedir información no relevante para la compra? ¿son claros los mensajes de error? ¿da confianza el formulario de introducción de datos de la tarjeta?
Anatomía de un buen formulario
Antes de hablar de patrones y errores, vamos con lo básico que funciona:
Labels siempre visibles y encima. Nunca uses placeholders como único indicador del campo: cuando empiezas a escribir, el placeholder desaparece y pierdes el contexto. El label va siempre encima del campo, no a la izquierda: múltiples estudios de eye-tracking muestran que esto facilita el escaneo del formulario y reduce el esfuerzo cognitivo.
No es un detalle pequeño, fíjate cómo se lee cada ejemplo:
Campos obligatorios vs opcionales. Esto es fácil, aunque a veces nos complicamos la vida innecesariamente:
- Si la mayoría son obligatorios, marca los opcionales con «(opcional)».
- Si la mayoría son opcionales, marca los obligatorios con asterisco (*).
- Si todos son obligatorios, indícalo al inicio (no repitas el * veinte veces).
Agrupación lógica. Si pides dirección física, agrupa calle, número, código postal y ciudad en un bloque visual con un título. Un formulario con 15 campos parece menos intimidante agrupado en 4 bloques de 3-4 campos cada uno, apóyate en los principios de Gestalt.
Validación inteligente. Valida cuando pierdes el foco del campo (onBlur), no mientras escribes. La validación inline bien implementada reduce los errores en un 22% y disminuye el tiempo de completado en un 42%. Pero validar mientras el usuario aún escribe es muy frustrante.
Progreso visible. Si tienes más de 8-10 campos, divide en pasos. Puedes usar indicadores tipo «Paso 2 de 4», o convertirlo en algo más visual como el ejemplo de debajo. Esto funciona porque forma parte de la teoría de Zeigarnik 👀
Formulario en una columna. Los formularios con más de una columna aumentan tiempo de completado y errores, porque dificultan la lectura: El patrón natural es de arriba abajo, no en zigzag. El ejemplo de abajo es un caso extremo, pero es para que quede clara la idea 🙂
Errores básicos en formularios
Diseñar formularios no es fácil. Tenemos tendencia, ya sea porque hay otros equipos que lo piden, o porque nos parece buena idea, a pedir toda la información posible.
Y esto es un error: cuando un usuario está ya en el formulario, significa que ya ha tomado una decisión (quiere registrarse, comprar, contactar…). Cuantas más dudas genere el formulario, y cuantas más preguntas «innecesarias» le hagas, más bajará la conversión.
Pero no es el único error:
- Mensajes de error inútiles. Seguro que recuerdas algún formulario en el que había un error, pero no sabías ni donde, ni cómo corregirlo. Complicarle la vida al usuario siempre hará que abandone. Como indican las 10 heurísticas de Nielsen, también hay que tratar de prevenir los errores.
- Validación mientras aún estoy escribiendo. Lo he indicado antes, pero vale la pena repetirlo: no me des error en el campo de formulario si todavía estoy escribiendo
cris@ui... - Botones deshabilitados. Genera controversia, pero tal y como expliqué en el artículo, engañan y confunden la mayor parte de las veces. La solución: habilita siempre el botón, y cuando hagan clic, muestra exactamente qué campos faltan. O usa un tooltip que explique por qué está deshabilitado.
- Falta de accesibilidad. Cada campo debe tener un
<label>asociado con el atributo <for>. Los lectores de teclado necesitan esto, y no considerarlo deja fuera un porcentaje nada despreciable de usuarios. Para los errores necesitas usararia-liveyaria-describedbypara asociar el mensaje con el campo problemático. - Imposibilidad de usar el teclado. Mucha gente rellena formularios solo con el teclado, desplazándose con el tabulador en el teclado. No considerarlo complica la experiencia del usuario y te arriesgas a que opten por no completar el formulario.
Apuntes finales
Como siempre sucede con la usabilidad, si el formulario está bien hecho no se nota. Funciona, y nadie se queja. Si está mal, aunque solo sea un pequeño detalle, estarás afectando negativamente la conversión.
Te animo a que le eches un vistazo a los formularios con los que interactúas o los que estás diseñando, es muy probable que ahora veas estos errores por todas partes. La ventaja es que ya sabes cómo corregirlos 🙂 Te dejo con un checklist rápido:
- ¿Son todos los campos realmente necesarios AHORA?
- ¿Los labels están siempre visibles?
- ¿Son específicos los mensajes de error?
- ¿El teclado mobile muestra el tipo correcto?
- ¿El formulario es completable solo con teclado?
