Wireframes / Prototipos
Representaciones de baja a alta fidelidad de interfaces para validar con usuarios.
Qué es
Los Wireframes y Prototipos son representaciones visuales de una interfaz en diferentes niveles de fidelidad. Los wireframes (baja fidelidad) muestran estructura y jerarquía sin diseño visual. Los prototipos (media-alta fidelidad) simulan la interacción real para validar con usuarios antes de desarrollar.
Para qué sirve
Qué métodos lo alimentan
Cuándo hacerlo
Cuándo usarlo
Cuándo NO usarlo
Cómo se hace
Cómo hacerlo paso a paso
- 1Define el alcance: Elige qué flujos o pantallas prototipar basándote en los hallazgos de investigación.
- 2Wireframes de baja fidelidad: Dibuja la estructura y jerarquía de contenido sin diseño visual (cajas, líneas, texto placeholder).
- 3Valida la estructura: Presenta los wireframes internamente y ajusta antes de agregar detalle.
- 4Prototipo interactivo: Agrega interacciones reales (navegación, formularios, estados) en Figma, Sketch o similar.
- 5Testea con usuarios: Realiza tests de usabilidad con 5-8 usuarios para validar el flujo y la comprensión.
- 6Itera y documenta: Ajusta el prototipo basándote en los hallazgos y documenta las decisiones de diseño.
Tips para equipos pequeños
Ejemplo contextualizado
Contexto: Rediseño del checkout de una tienda online de ropa.
Wireframe V1: Checkout en una sola página larga. Test: 4/6 usuarios se perdieron en la mitad del formulario.
Prototipo V2: Checkout en 3 pasos con barra de progreso. Test: 5/6 usuarios completaron sin problemas. Hallazgo adicional: los usuarios querían ver el resumen del pedido en todo momento, no solo al final.