Un prototipo útil no intenta representar toda una aplicación. Responde una pregunta concreta: ¿puede una persona completar esta tarea y entender qué ocurre después?
Para empezar, elige un recorrido pequeño. Puede ser revisar una propuesta, elegir una clase o completar un registro. El objetivo no es diseñar todas las pantallas posibles, sino hacer visible una decisión y comprobar si el camino tiene sentido.
1. Escribe el objetivo antes de abrir el lienzo
Completa esta frase:
Una persona que [situación] quiere [resultado] y debería poder [acción] sin [obstáculo].
Ejemplo hipotético: una persona que empieza a aprender diseño quiere elegir una práctica y debería poder abrirla y entender el siguiente paso sin perderse entre demasiadas opciones.
El ejemplo no describe la navegación actual de Cursalo. Es un punto de partida para practicar. Lo importante es que el resultado se pueda observar. “Quiero que la pantalla se vea profesional” es demasiado amplio. “Quiero que la persona encuentre la práctica y sepa cómo comenzar” permite construir una prueba.
Antes de diseñar, define también:
- quién llega al prototipo;
- qué información necesita para decidir;
- cuál es la acción principal;
- qué señal confirma que avanzó;
- qué duda quieres investigar.
2. Reduce el recorrido a tres estados
Un primer prototipo puede tener tres estados:
- Punto de partida. Presenta el contexto y una acción principal.
- Decisión. Muestra la información necesaria para elegir o continuar.
- Resultado. Hace visible qué cambió y cuál es el siguiente paso.
En el ejemplo hipotético, la primera pantalla podría presentar una práctica, la segunda explicar qué incluye y la tercera confirmar que la persona ya puede comenzar. No hace falta construir todavía un catálogo completo, una cuenta ni todas las variantes de error. Primero comprueba el recorrido principal.
Esta reducción también ayuda a detectar problemas temprano. Si no puedes explicar qué cambia entre una pantalla y la siguiente, probablemente aún no has definido la tarea.
3. Construye el mínimo que responde a la pregunta
Crea un frame para cada estado y usa textos concretos. Evita sustituir el contenido por “Lorem ipsum”: las palabras reales revelan si la jerarquía funciona y si la acción es comprensible.
Después:
- coloca el objetivo y la acción principal en el primer estado;
- muestra en el segundo solo la información que ayuda a decidir;
- conecta la acción con un resultado visible;
- deja una forma clara de volver o comenzar de nuevo.
Cuando el recorrido tenga sentido, ordena los elementos repetidos. Los componentes y el auto layout pueden ayudarte a mantener consistencia mientras ajustas el diseño. Úsalos para resolver una necesidad del prototipo, no para añadir complejidad antes de tiempo.
Un prototipo debe parecer suficientemente claro para ser probado, pero no necesita fingir que ya es un producto terminado. Si una pantalla es una representación de práctica, trátala como tal; no la presentes como una captura de una aplicación real.
4. Prueba el recorrido, no tu intención
Una prueba no consiste en explicar a otra persona dónde debe hacer clic. Consiste en darle una tarea y observar qué interpreta sin ayuda.
Puedes comenzar con esta instrucción:
Imagina que quieres empezar esta práctica. Muéstrame qué harías para saber si es adecuada y llegar al primer paso.
Mientras recorre el prototipo, observa:
- cuál es su primera acción;
- qué información busca y no encuentra;
- dónde duda;
- qué etiqueta interpreta de otra manera;
- si entiende qué ocurrió después de activar la acción.
Al terminar, pregunta:
- ¿Qué esperabas encontrar aquí?
- ¿En qué momento no estabas seguro de cómo continuar?
- ¿Qué cambiarías para completar esta tarea?
No conviertas cada comentario en una solución inmediata. Primero identifica la hipótesis que falló. Si varias personas no encuentran la acción principal, revisa la jerarquía y el texto antes de añadir más elementos.
5. Brief reutilizable
Puedes guardar este esquema para tu siguiente prototipo:
- Objetivo:
- Persona y situación:
- Punto de partida:
- Acción principal:
- Tres estados del recorrido:
- Señal de éxito:
- Duda que quiero investigar:
- Criterio para decidir el siguiente cambio:
El brief debe ser breve, pero no vago. Si el objetivo necesita varias frases para explicarse, reduce el alcance antes de seguir diseñando.
6. Lista de comprobación
Antes de dar por terminada la primera versión, revisa:
- ¿La primera pantalla deja claro qué se puede hacer?
- ¿Hay una acción principal reconocible?
- ¿Se puede recorrer el camino completo desde el inicio?
- ¿Cada acción produce un cambio visible?
- ¿La persona entiende qué hacer después?
- ¿Puede volver o reiniciar el recorrido?
- ¿El texto se puede leer sin depender de una explicación oral?
- ¿El prototipo responde la pregunta que definiste al principio?
Un buen primer prototipo no demuestra que todo está resuelto. Hace que la siguiente pregunta sea más precisa. Cuando puedes decir qué querías comprobar, qué observaste y qué cambiarás después, ya tienes una base útil para continuar.
Si quieres trabajar este recorrido dentro de una ruta guiada, consulta Figma desde Cero. La ficha observada de Cursalo lo presenta como un curso de 12 clases que recorre la interfaz básica, los componentes avanzados, el auto layout y los prototipos interactivos.