ricarossetto/grandma-proof

A prueba de abuela

Imagina a la Abuela Rosa: 70 años, poca escolaridad, vista cansada, miedo a que un clic equivocado lo rompa todo. Si ella puede usar la pantalla por sí sola, todos pueden.

Esta habilidad tiene dos mitades. La primera rige lo que construyes (reglas 1 a 4). La segunda rige cómo trabajas (reglas 5 a 7). Ambas se aplican al mismo tiempo.

Para quién construyes

Antes de diseñar cualquier pantalla, repasa estas cuatro personas. La pantalla debe funcionar para las cuatro.

Persona	Cómo es	Qué necesita de la pantalla
Abuela Rosa, 70	No sabe dónde hace clic, se pierde, tiene miedo a los errores	Texto grande, botones grandes, un solo camino, siempre una forma de volver
Don José	Poca escolaridad, lee lento, no domina el idioma de la aplicación	Palabras de todos los días, frases cortas, iconos acompañados de texto
Kai, 17	Creció con TikTok, abandona en 3 segundos si algo se traba o confunde	Respuesta instantánea al tacto, sin menús dentro de menús, fluido
Bea, novata	Nunca necesitó un "sistema" y ahora debe hacer algo complejo	Una pantalla amable que diga el siguiente paso; errores que no asusten ni culpen

Ninguno de ellos lee un manual. Ninguno sabe qué significa "panel", "módulo", "sincronización" o "sesión expirada".

Parte A — Lo que construyes

1. Simplicidad

El objetivo es una pantalla fácil, no una vacía. Quitar demasiado también confunde.

• Una pantalla, una tarea. Cada pantalla tiene una acción principal, visible sin desplazarse. Las demás acciones se ven más discretas.
• Menos botones. Cuenta los clics de la tarea más común e intenta eliminar uno. Las acciones poco frecuentes van bajo un menú "Más"; las acciones no utilizadas desaparecen.
• Menos texto. Elimina cualquier texto cuya ausencia no deje a nadie perdido. Títulos de hasta 5 palabras. Frases de hasta 12 palabras.
• Conserva lo que guía. Siempre conserva: ¿dónde estoy?, ¿qué hago ahora?, ¿cómo vuelvo atrás?. Botones solo de icono solo para los universales (cerrar, volver, buscar).
• Pregunta solo lo necesario. Un campo que el sistema puede deducir no es una pregunta. Los formularios largos se convierten en pasos cortos con "Paso 2 de 4".
• Elige por ella. Preselecciona la opción más común. Los ajustes avanzados permanecen ocultos hasta que alguien los busque.

2. Abuela

Palabras

• Usa la palabra que ella usa en casa: "iniciar sesión", no "autenticar"; "guardar", no "persistir"; "eliminar", no "borrar registro".
• Sin siglas ni términos técnicos en pantalla. Si un término es inevitable, explícalo en una frase corta la primera vez.
• El botón dice lo que hace: "Enviar pedido", "Eliminar foto". Nunca un simple "Aceptar", "Confirmar" o "Haz clic aquí".
• Mismo nombre para lo mismo en cada pantalla.

Tamaño y legibilidad

• Texto del cuerpo al menos 16 px; prefiere 18 px. Contraste de al menos 4,5 a 1.
• Todo lo que se pueda hacer clic es de al menos 48 × 48 px con 8 px de separación de su vecino.
• Nunca uses solo color para señalar. Añade un icono o una palabra.

No perderse

• Cada pantalla muestra dónde está la persona y tiene un botón "Atrás" en el mismo lugar.
• Los cambios de pantalla usan una transición corta (150 a 250 ms) que muestre de dónde vienes y adónde vas. Nada salta, parpadea o se mueve solo.
• Después de cada acción, la pantalla responde de inmediato: "Guardado", "Enviado". Si toma más de 1 segundo, muestra que está funcionando.
• Nada funciona solo mediante un gesto oculto (deslizar, pulsación larga, doble toque). Un botón visible siempre hace lo mismo.

Sin miedo a los errores

• Las acciones se pueden deshacer. Cuando no sea posible, pregunta primero con ambas salidas escritas completas: "Eliminar foto" y "Conservar foto".
• Los mensajes de error dicen qué pasó y qué hacer, sin culpar: "No pudimos encontrar ese número. Revisa los dígitos e inténtalo de nuevo."
• Las pantallas vacías indican el siguiente paso: "Aún no tienes pedidos. Toca Nuevo pedido para empezar."
• Nunca borres lo que escribió debido a un error.

3. Alineación

La IA tiende a generar botones torcidos, cajas de diferentes tamaños y texto pegado a los botones. No entregues eso.

• Misma línea. Los botones de un grupo comparten una línea base y una altura.
• Mismo tamaño. Los botones de un grupo comparten altura, radio de esquina, fuente y relleno. Si los anchos varían mucho, iguala al más ancho.
• Misma proporción. Las tarjetas y cajas de una lista comparten ancho y altura de fila. El texto largo se trunca con puntos suspensivos; no estira la caja.
• Una regla. Todos los espacios provienen de una sola escala (4, 8, 12, 16, 24, 32, 48 px). Sin valores sueltos como 13 px o 22 px.
• Un resalte. Un botón principal por pantalla. Los demás usan el estilo secundario, siempre el mismo.
• Los botones mantienen distancia del texto. Al menos 24 px entre un botón y cualquier bloque de texto. No coloques una frase justo encima o debajo de un botón.
• Los botones no tienen leyendas. No pongas texto en pantalla para explicar un botón. Si un botón necesita explicación, su etiqueta es mala: cámbiala. La explicación adicional va en la sugerencia que aparece al pasar el cursor (title o tooltip, además de aria-label para lectores de pantalla).
• Verifica midiendo. Después de construir, abre la pantalla, toma una captura y compara alturas, anchos y espacios. Leer el código no es suficiente.

4. Sin aspecto de IA

Lee references/ai-tells.md antes de crear una página de inicio, una pantalla de presentación o cualquier texto promocional. En resumen:

• La "página de inicio GPT" está prohibida: un gran bloque de texto centrado con una frase impactante y una palabra en cursiva, una insignia tipo píldora arriba, dos botones abajo y tres tarjetas con iconos justo después.
• Prohibidos como reflejos: degradados morados o azul violeta, resplandor neón, vidrio esmerilado, texto degradado, emojis en lugar de iconos, sombras de colores, tarjetas dentro de tarjetas.
• Prohibidas pruebas inventadas: números, testimonios, logotipos de clientes o calificaciones que no existan.
• Prohibido lenguaje de ventas: "Transforma", "Eleva", "Revoluciona", "sin esfuerzo", "No es X. Es Y."
• En su lugar: muestra el producto real, di en palabras sencillas lo que hace y coloca la acción principal cerca de la parte superior.

La prueba: si el bloque se pudiera pegar sin cambios en el sitio de otro producto, es genérico. Reelabora con el contenido de este producto.

Parte B — Cómo trabajas

5. Habla con claridad

La persona al otro lado puede no ser programadora, incluso si usa una palabra técnica. Usar un término no demuestra que domine el tema.

• Empieza con el resultado: qué cambió y qué hace ahora la persona.
• Frases cortas, palabras comunes. Términos técnicos solo cuando sea necesario, con unas pocas palabras de explicación al lado.
• No sueltes nombres de archivos, comandos o código a menos que te lo pidan. Si la persona debe ejecutar algo, da pasos numerados.
• Di claramente qué funcionó, qué no y qué falta.
• Si la persona pide el detalle técnico, entonces dáselo completo.

6. Divide el trabajo con subagentes

Los subagentes aceleran el trabajo y mejoran el resultado. Úsalos siempre que la tarea tenga más de una parte, incluso si nadie configuró nada.

• Encuentra la herramienta. Usa lo que ofrezca el entorno: una herramienta de agente o tarea, agentes en segundo plano, sesiones paralelas, o llamar al propio agente desde la línea de comandos.
• Divide en partes independientes y ejecútalas todas a la vez: investigación, cada pantalla, cada archivo, pruebas, revisión.
• Dale a cada subagente un resumen completo: objetivo, archivos involucrados, qué no tocar y qué devolver. Empieza desde cero y no ha visto la conversación.
• Siempre ten un revisor. Un subagente que no escribió el trabajo verifica el resultado según las reglas 1 a 4.
• Dos subagentes nunca editan el mismo archivo al mismo tiempo.
• Tú respondes por el resultado. Verifica lo que devolvieron antes de decir que está listo.
• Sin herramienta de subagente: haz las mismas partes como pases separados, uno a la vez, más un pase de revisión final con los ojos de alguien que no lo escribió.

Una tarea de un solo paso (cambiar una palabra, responder una pregunta) simplemente la haces.

7. Decide sin molestar al humano

No regreses con el humano para confirmar detalles. Cada pequeña pregunta interrumpe su flujo.

Duda simple: decide mediante debate. Sigue el guion en references/debate.md:

1. Escribe la duda en una frase, con ambas opciones.
2. Lanza dos debatientes al mismo tiempo, uno por opción. Cada uno defiende la suya en hasta 5 líneas.
3. Lanza un juez, que lee ambos y elige. El criterio del juez es siempre: qué es mejor para la Abuela y más fácil de deshacer.
4. Sigue la decisión del juez y continúa.
5. Al final, informa cada decisión en una línea: "Elegí botón verde en lugar de azul porque tiene más contraste."

Sin herramienta de subagente, realiza el debate tú mismo: escribe el mejor argumento para cada lado, luego juzga.

Pregunta al humano solo cuando:

• la acción no se puede deshacer (eliminar datos, publicar, enviar un mensaje, gastar dinero);
• la respuesta depende de algo que solo ellos saben (una contraseña, una preferencia personal, una regla de negocio);
• la solicitud tiene dos interpretaciones que llevan a trabajos muy diferentes.

En esos casos, haz una pregunta, con las opciones listas, y continúa con lo que no dependa de la respuesta.

Antes de entregar: la prueba de la Abuela

Abre la pantalla real y verifica. Si algún punto falla, corrígelo antes de entregar.

1. 5 segundos. Después de 5 segundos mirando, ¿puedes decir para qué sirve la pantalla y dónde hacer clic?
2. Una acción principal. ¿Solo un botón llama más la atención que los demás?
3. Palabras caseras. ¿Hay alguna palabra que la Abuela no usaría? Reemplázala.
4. Dedos gruesos. ¿Todo lo que se puede hacer clic mide 48 px o más, con espacio alrededor?
5. Atrás. ¿Puedes volver atrás y deshacer en cada pantalla?
6. Regla. ¿Los botones y cajas de un grupo tienen el mismo tamaño y están en la misma línea?
7. Botón solo. ¿Cada botón está libre de una frase pegada que explique lo que hace?
8. Aspecto de IA. ¿Nada de la lista de señales aparece?
9. Móvil. ¿La pantalla funciona a 360 px de ancho, sin desplazamiento horizontal?
10. Respuesta clara. ¿Lo que le dirás al usuario cabe en unas pocas frases sin jerga?

Cuando entregues, di en una línea cuántos puntos pasaron y cuál corregiste.