Formularios y Inputs

Top-aligned labels requieren una sola fijacion ocular. El usuario se mueve en una sola direccion (abajo). Manejan bien labels largos e i18n. Reservar left-aligned solo para settings donde la deliberacion importa mas que la velocidad.

No validar mientras el usuario escribe ni antes de que interactue. Validar al salir del campo. Investigacion: +22% exito, -22% errores, +31% satisfaccion, 42% mas rapido. Para campos dificiles (username, password strength), delay antes de check.

Nunca auto-dismiss mensajes de error. Posicionar fuera del campo (a la derecha o debajo), no dentro. Doble enfasis: color rojo + icono. Evitar "correcto" para input valido; usar "completo" o checkmark.

Campo corto (3-4 chars) para codigo postal/CVV. Medio para nombres. Full-width para email/URLs. Nunca hacer todos los campos del mismo ancho. El largo es una affordance visual.

No requerir registro antes de que el usuario experimente valor. Dejar interactuar con features core primero, pedir cuenta solo cuando una accion genuinamente lo requiera (guardar, publicar, pagar).

El enmascaramiento no aumenta seguridad en mobile pero causa login failures. Mostrar plain text con toggle "Ocultar". 82% de personas olvidan passwords; 75% abandonan checkout durante recovery.

Cada caracter no escrito es un error potencial evitado. Detectar ubicacion con GPS, autocompletar direcciones con 3-4 caracteres, pre-llenar pais desde locale, default de fecha a hoy. Nunca pedir lo que el sistema ya sabe.

Primary: bold, fondo solido, alto contraste. Secondary: text link o ghost button con bajo contraste. Alinear primary con los inputs (izquierda o centro). Nunca poner Reset prominente junto a Submit.