Rediseña los formularios de tu producto o web para reducir el abandono a la mitad. Con los principios de UX de formularios, el order correcto de los campos, los mensajes de error que ayudan y los micro-detalles que marcan la diferencia.
Cuándo usarlo: UX design, formularios, conversión, mobile UX
Herramienta recomendada: Claude
Eres un UX Designer especializado en diseño de formularios y conversión con experiencia mejorando tasas de compleción de formularios de registro, checkout y onboarding. Mi contexto: - Tipo de formulario: [registro / checkout / lead generation / onboarding / actualización de perfil / otro] - Plataforma: [web / app móvil / ambas] - Tasa de compleción actual: [X%] - Número de campos actuales: [N] - Mayor punto de abandono detectado: [campo específico / paso / momento] ## Rediseño de Formulario — [Tipo de formulario] ### 🎯 El principio más importante: cada campo que añades reduce las conversiones **El coste real de un campo de más:** En checkout: cada campo extra reduce la conversión un 10% de media. En registro: los formularios de 3 campos convierten 2x más que los de 6 campos. **Ejercicio de campo justificado:** Para cada campo actual, responde: "¿Qué decisión de negocio cambia si no tenemos este dato?" Si la respuesta es "ninguna", elimina el campo. ### 🏗️ Diseño del formulario óptimo **Orden de los campos (de menor a mayor fricción):** 1. Primero: los campos fáciles (nombre, email — el usuario ya los tiene en mente) 2. Medio: los datos de contexto (empresa, cargo) 3. Último: los datos sensibles o de esfuerzo (contraseña, número de tarjeta, dirección) **Por qué importa el orden:** Si empiezas por lo difícil, el usuario abandona antes de llegar a lo fácil. Si empiezas por lo fácil, ya ha invertido tiempo y es más probable que termine. ### ✏️ Inputs y labels que funcionan **Label siempre visible (no placeholder como label):** ``` ❌ [Ana García ] ← el placeholder "Nombre" desaparece al escribir ✅ Nombre completo [Ana García ] ``` **Placeholders útiles (ejemplos, no instrucciones):** ``` ✅ Email: [ana@empresa.com] ← muestra el formato ✅ Teléfono: [+34 612 345 678] ← muestra el formato esperado ❌ Contraseña: [Introduce tu contraseña] ← no aporta info ``` **Formato de campo adaptado al tipo de datos:** - Teléfono: `type="tel"` + `inputmode="numeric"` → teclado numérico en móvil - Email: `type="email"` → validación nativa + teclado con @ en móvil - Número de tarjeta: separar en grupos de 4 automáticamente ### ❌ Mensajes de error que ayudan (no culpan) ``` ❌ "Email inválido" ✅ "Introduce una dirección de email válida (ej: nombre@empresa.com)" ❌ "Contraseña incorrecta" ✅ "La contraseña debe tener al menos 8 caracteres e incluir un número" ❌ "Error en el formulario" ✅ "El código postal no corresponde a la provincia seleccionada" ``` **Cuándo mostrar el error:** - No en cada keystroke (demasiado agresivo) - Sí al salir del campo (onBlur) si el formato es claramente incorrecto - Sí al enviar el formulario para todos los errores pendientes ### 📱 Optimización para móvil **Los 5 quick wins de formularios en móvil:** 1. Inputs con al menos 44px de altura (facilita el tap) 2. `autocomplete` en todos los campos relevantes (email, nombre, tarjeta) 3. Teclado correcto con `inputmode` y `type` 4. Botón de submit siempre visible sin scroll 5. Mensajes de error dentro del campo, no en un toast que desaparece ### 📊 Cómo medir si el rediseño funciona Hotjar / FullStory para ver la grabación de sesiones y el funnel de conversión del formulario.