Curso
Repeat
Módulo 02 · IA en el oficio
2.4 · Validación del wireframe
01 / 16
Módulo 02 · IA en el oficio·16–18 min

Validacióndelwireframe.

Testea antes de pintar. Las dos capas que te ahorran semanas de retrabajo y miles de euros.

Deuda de validación

Loquetarde30minhoy,cuestandíasdespués.

Coste de cambiar30 minEn Wireframe
Coste de cambiar2 díasEn Mockup
Coste de cambiarSemanas + €€€En En producción
§01

2 capas de validación

Predictiva primero. Humana después.

Predictiva · IA

Mide atención.

Software entrenado con eye-tracking real. Audita la jerarquía visual en segundos.

Tiempo

Segundos

Coste

≈ 0€

Humana · Usuarios

Mide comprensión.

Prototipos clicables con usuarios reales completando tareas concretas.

Tiempo

Horas

Coste

Más caro

IA predice atención. Humanos miden comprensión. No las confundas.

§02

Predictiva · mapas de calor

Empieza con la que es gratis. Sube cuando lo necesites.

RecomendadoAttention Insight

Trial 15 días + plugin Figma. Mapas de calor por % de atención en los primeros segundos.

ProfesionalVisualEyes

De Neurons. Más potente, de pago directo.

AlternativaPredict · UXTweak

Similar feature-set, también de pago.

Lectura · 3 preguntas

Lee el mapa con criterio.

¿La zona caliente coincide con tu Zona de Retención?

Si no, tu jerarquía no comunica lo que crees.

¿El CTA principal está en zona caliente?

Si está azul, nadie lo pulsará por mucho que sea «el botón».

¿Hay zonas calientes inesperadas?

Algo roba atención. O lo neutralizas o conviertes esa zona en el CTA.

§03

Humana · Maze

De wireframe a prototipo testeable en 3 pasos.

Paso 01Prototipo clicable

En Figma, conecta pantallas con click → siguiente. Sin animaciones.

Paso 02Conecta con Maze

Integración directa: pega el link del prototipo de Figma.

Paso 03Define tareas

El 80% del valor del test vive aquí.

La tarea no es una invitación a navegar. Es un objetivo concreto.

Mal

«Mira la app.»

Bien

«Encuentra el precio de la suscripción mensual.»

Mal

«Navega por el producto.»

Bien

«Reserva un estudio en Madrid para el 15 de marzo.»

Mal

«Cuéntame qué piensas.»

Bien

«Completa el registro usando tu correo personal.»

«¿Te gusta?» no vale nada.

Sesgo de cortesía

Te dirá que sí aunque odie tu diseño.

Predice mal el futuro

«Me encanta» ≠ «lo usaré».

No te dice qué cambiar

No hay información accionable.

Pregunta así
  • · «¿Has podido hacer X? ¿Cuánto te costó?»
  • · «¿Qué crees que pasa si pulsas este botón?»
  • · «Cuéntame la última vez que hiciste algo parecido.»
Truco · predice antes del clic

Antes de que el usuario pulse, pídele que diga qué espera que pase. Si coincide, tu diseño es predecible. Si no, confunde.

Lee patrones de comportamiento, no anécdotas.

Señal

80% completa, 60% «no le gusta»

La tarea funciona. Lo estético se arregla en Hi-Fi.

Señal

30% completa, 90% «le encanta»

Tu diseño está roto aunque te aplaudan.

Señal

Todos abandonan en el mismo paso

Ese es tu cuello de botella. Ahí va la iteración.

Señal

Clics fantasma fuera del botón

Esa zona tenía peso de botón sin serlo.

Cómo se entrega

Un PDF de 50 métricas no sirve a nadie.
Una página, sí.

01

Top 3 problemas detectados — con números.

02

Hipótesis de por qué pasa cada uno.

03

Próxima iteración propuesta para resolverlos.

Ejercicio 2.4·Predictiva + Humana + Informe

ValidatuwireframeendoscapasyentregauninformeSenior.

Toma el wireframe del 2.3 y pásalo por las dos capas de validación. Entrega 1 sola página.

01

Predictiva con IA.

Súbelo a Attention Insight. Responde: zona caliente = retención? CTA en caliente? hay zonas inesperadas?

02

Itera el wireframe.

Arregla lo que el mapa te diga antes de meter humanos.

03

Humana con Maze.

Prototipo clicable + 1–2 tareas concretas + 5 usuarios que encajen.

04

Informe de 1 página.

Top 3 problemas con números · hipótesis · próxima iteración.

Módulo 02 · cerrado

Hasconstruidoundossiertécnicoprofesional.

2.1Arquitectura de Información con IA.
2.2Task Flow + User Flow + 4 estados.
2.3Wireframes Mid-Fi con jerarquía y copy real.
2.4Validación predictiva + humana.

Arquitectura + flujos + wireframes + validación. Presentado a un cliente, esto vale mucho dinero.

Próximo módulo · 03

DesignSystem&OperacionesdeDiseño.

Convertir todo este trabajo en un sistema profesional, escalable y listo para que el siguiente paso —el código— sea ejecución pura, no improvisación.