Construir la imagen del sistema
El mismo sistema. Cinco personas distintas. Se construye en casa, se prueba en clase.
Primero · El simulador
Antes de diseñar nada: vivan el problema.
Una persona. Un sistema. Un problema. El simulador los pone en la situación de su persona —la del sorteo, la misma de la ficha A de más abajo—: usan la app como la usaría ella, sienten dónde el sistema no la deja hacer lo que esperaba, y solo entonces se ponen a diseñar. El recorrido queda guardado y se exporta: ese recorrido es la primera parte de la entrega.
Tómenlo con calma: equivocarse dentro del simulador es parte del ejercicio.
El encargo
En la próxima clase, otro grupo usa su prototipo con solo la ficha A en la mano. Ustedes observan y no dicen una palabra.
Si hay que explicarlo, la imagen del sistema todavía no está haciendo su trabajo. Todos los grupos diseñan el mismo sistema —una app de domicilios— y cada uno recibe una persona distinta.
La ficha A es el modelo mental: quién es su persona, qué quiere resolver, qué espera, qué no quiere hacer. La ficha B es el modelo conceptual: qué puede hacer el sistema. No dice cómo debe verse.
La regla: los dos modelos no coinciden. El simulador los deja con los dos extremos escritos —lo que espera su persona y lo que el sistema da por hecho—. Lo que falta va en el medio, y es lo que ustedes construyen:
modelo mental · la imagen del sistema · modelo conceptual
Ficha A · Su persona
Cada grupo trabaja con la suya —la misma que les tocó en el simulador—. Las otras cuatro quedan acá para que sepan qué van a enfrentar cuando les toque probar la propuesta de otro grupo.
- Grupo 1
Valentina, 22 · un plato con gluten la enferma de verdad
- Quiere resolver
- Almorzar sin exponerse al gluten.
- Espera
- Poder confiar en que una opción es segura — no solo ver información sobre ella.
- No quiere
- Adivinar si la etiqueta «sin gluten» es confiable, ni escribirle a cada restaurante a preguntar.
- Se siente perdida
- Cuando tiene toda la información y aún así no puede confiar: informar no es lo mismo que responder por el plato.
- Grupo 2
Sofía, 29 · pide para su mamá, enferma y en otra ciudad
- Quiere resolver
- Que su mamá, sola en Medellín, almuerce hoy. Ella está en Bogotá.
- Espera
- Pedir para otra persona, a distancia, y saber qué le pasó después de la entrega.
- No quiere
- Que el sistema la trate como quien recibe: notificaciones, timbre e instrucciones no son para ella.
- Se siente perdida
- Cuando «pedido entregado ✓» no le dice lo único que necesita saber: si su mamá abrió y está comiendo.
- Grupo 3
Camila, 27 · tiene 40 minutos para almorzar
- Quiere resolver
- Almorzar antes de la 1:00 p. m. A esa hora entra a una reunión que no puede moverse.
- Espera
- Que el tiempo que la app promete sea algo en lo que se pueda confiar: que alguien responda por esa hora.
- No quiere
- Estimados que se recalculan en silencio mientras su hora de almuerzo corre.
- Se siente perdida
- Cuando ningún número de la pantalla le dice lo único que importa: si va a alcanzar o no.
- Grupo 4
Andrés, 41 · coordina el almuerzo de las 8 personas de su equipo
- Quiere resolver
- Resolver el almuerzo de ocho personas como una sola situación, no como ocho pedidos.
- Espera
- Reunir lo que quiere cada quien, repartir cada plato y cobrar a cada uno lo suyo.
- No quiere
- Ocho procesos completos, ni perseguir a todos la semana siguiente para que le paguen.
- Se siente perdida
- Cuando el sistema lo trata como un solo comensal: un comprador, un pedido, un pago — y él está coordinando a ocho.
- Grupo 5
Ernesto, 68 · quiere el almuerzo de siempre
- Quiere resolver
- Pedir el almuerzo del domingo: el mismo de siempre, del restaurante del barrio.
- Espera
- Repetir con confianza algo que ya conoce, sin explorar ni decidir todo de nuevo.
- No quiere
- Los 438 restaurantes, ni rearmar el pedido plato por plato cada vez.
- Se siente perdida
- Cuando cualquier cambio —un precio, un menú reordenado— lo devuelve a explorar, comparar y dudar.
Ficha B · El sistema
Esta ficha es la misma para todos. Es el modelo conceptual: lo que el sistema puede hacer y la información que maneja. No es una lista de pantallas, ni un menú obligatorio: cómo se hace perceptible cada una de estas cosas —y cuáles ni siquiera aparecen— es exactamente lo que van a diseñar.
- Explorar cientos de restaurantes con su menú, sus precios y sus tiempos estimados.
- Filtrar por tipo de comida, precio, tiempo de entrega y calificación.
- Comparar opciones antes de elegir.
- Elegir un plato y personalizarlo: cantidades, modificaciones, notas para la cocina.
- Confirmar el pedido: resumen, dirección de entrega, total.
- Pagar: tarjeta, billetera digital o efectivo.
- Seguir el pedido por sus estados: recibido, en preparación, en camino, entregado.
Restar también es diseñar: al menos una de estas capacidades tiene que quedar por fuera o transformada, y tienen que poder decir por qué su persona no la necesita. Ernesto —que solo quiere repetir el almuerzo de siempre— debería terminar sin catálogo infinito, sin filtros y sin comparación.
El proceso · de acá en adelante
Las tres primeras preguntas —dónde le falla la app a su persona, qué quiere y dónde choca con el sistema— ya las respondieron dentro del simulador. Lo que queda es esto:
- 01
Construyan la imagen del sistema
Con lo que trajeron del simulador: la ficha A, lo que el sistema da por hecho y su replanteamiento. La fidelidad no importa; importa que puedan probar una hipótesis, no que se vea bonita.
- 02
Pónganla a pruebaen clase
Otro grupo la recorre con solo la ficha A en la mano.
- 03
Comparenen clase
El modelo mental inicial con el que la persona armó al usar la propuesta. ¿Qué logró comunicar? ¿Dónde produjo una lectura inesperada?
- 04
Segunda vueltaen clase
Mismo sistema, otra persona. ¿Qué tendría que cambiar en la imagen del sistema?
Lo que construyen
La imagen del sistema de su app de domicilios, para la persona que les tocó. Tres requisitos no negociables:
El prototipo se diseña y se prueba en pantalla de celular.
Desde que la persona abre la app hasta confirmar el pedido. Si en algún punto habría que «imaginar» el siguiente paso, el flujo no está completo.
Eso define el nivel de terminado: no que se vea bonito, sino que alguien lo pueda recorrer sin ayuda.
Cómo lo construyen · Decisión de ustedes
La herramienta no es el tema. La interacción sí. Vale cualquier forma de construir el prototipo:
Paper prototyping, con una condición: pantallas claramente marcadas y las bifurcaciones explícitas. Qué pasa si toco acá, qué pasa si me equivoco, qué pasa si cancelo.
Pantallas enlazadas que se puedan recorrer de principio a fin.
Claude, Kimi, Gemini o la que prefieran, con la miniguía de más abajo. Es una vía más, no un requisito.
Miniguía · si lo construyen con IAcuatro pasos · ábranla solo si esa es su herramienta
- 01
Diseñen en papel primero
Antes de abrir cualquier herramienta, el grupo decide la interfaz: qué ve su persona primero, qué pantallas hay y en qué orden, qué dice cada una. Un boceto acordado por todo el grupo es suficiente. Ese boceto es su diseño, y es la referencia contra la que se evalúa todo lo demás.
- 02
Pasen su diseño a la IA
Con el boceto decidido, descríbanselo a la herramienta —o tómenle una foto al papel— junto con la ficha A y la ficha B, y pídanle el prototipo en un solo archivo HTML: «Construye este prototipo navegable. Este es nuestro diseño: …».
- 03
Iteren contra su diseño, y guarden el rastro
Lo que la IA entregue se compara con el boceto y con la ficha A. Si se inventó pantallas, cambió el orden o agregó cosas que su persona no quiere, se corrige. Vayan guardando los prompts, las versiones y las correcciones: ese rastro es parte de la entrega.
- 04
Tráiganlo funcionando
Publíquenlo gratis en Netlify Drop —arrastran el archivo y obtienen un enlace, como ya lo hizo un grupo— o simplemente traigan el archivo HTML y ábranlo en el navegador.
La regla dura: la IA es solo la forma de hacer el prototipo —el equivalente a que otro grupo use papel o Canva—. Quienes diseñan la interfaz son ustedes. Ojo con la trampa: la primera respuesta de cualquier IA es la app genérica —catálogo infinito, ocho filtros, carrusel de promociones—, es decir, el modelo mental de nadie. Si lo que entrega se parece a la app de domicilios que ya conocen, la señal no es que haya que pulirlo: es que el diseño todavía no está hecho.
Lo que se evalúa
Esto es un curso de interfaz e interacción. Lo que se evalúa es cómo usan los cinco conceptos para permitir interacciones con sentido:
Affordances y signifiers
¿Cómo sabe la persona qué puede hacer, y dónde?
Constraints
¿Qué le impide equivocarse?
Mappings
¿Dónde está cada cosa, y qué relación tiene con lo que controla?
Feedback
¿Qué le responde el sistema cuando actúa?
Y se evalúa el proceso: las decisiones que tomaron y cómo guiaron la herramienta, no el acabado visual del prototipo. Un prototipo impecable sin proceso visible no sustenta. Un prototipo tosco con decisiones claras, sí.
Qué entregan
Un solo documento, por Classroom, antes de la próxima clase. El enlace o el archivo del prototipo, aparte.
- El recorrido del simulador. Se copia o se descarga desde la pantalla final del simulador. Trae las decisiones, lo que el sistema da por hecho y el replanteamiento.
- El prototipo. Funcionando, móvil, flujo completo, interactuable.
- El boceto inicial. Foto de donde el grupo decidió la interfaz antes de construir.
- El rastro de IA. Solo si la usaron: los prompts clave, qué entregó, qué corrigieron y por qué.
Está listo cuando…
- Una persona que nunca ha visto el prototipo puede completar un pedido sin ayuda, hasta el pedido confirmado y sin huecos.
- Ninguna pantalla contradice la ficha A de su persona.
- Al menos una capacidad de la ficha B quedó por fuera o transformada, y pueden decir por qué su persona no la necesita.
- Si la primera pantalla es un catálogo con filtros, pueden defender por qué su persona empieza ahí.
- En cada pantalla se puede decir cómo sabe la persona qué puede hacer, qué le impide equivocarse, dónde está cada cosa y qué le responde el sistema.
- Cada decisión del prototipo dice de dónde salió: ficha A, ficha B o uno de los cinco conceptos.
El cierre
Al final no preguntamos cuál propuesta quedó mejor. Preguntamos:
¿Qué tuvo que hacer la interfaz para que los dos modelos se encontraran?
Los cinco grupos resolvieron el mismo sistema para cinco personas distintas. La comparación no es entre diseños: es entre cinco maneras de cerrar la misma brecha.