Navegación del área autenticada de la app: panel del padre y futuras superficies de juego de niño/adulto
Resumen ejecutivo
El dueño encontró, con una captura real, que el panel del padre ("Tu casa") heredaba Base.astro — el nav de MARKETING, con "Entrar"/"Crear cuenta" como acciones para alguien que ya inició sesión. La investigación interna confirmó que esto era omisión, no decisión: los tres archivos de app/kids/ tienen razonamiento extenso y citado para NO usar Base.astro (cero telemetría, cero navegación de marca, cero JavaScript — línea roja #2, D-037), pero app/index.astro y app/signin.astro eran los dos únicos archivos bajo /app/ sin ningún comentario que explicara su elección de layout. Ni docs/master-plan.md ni docs/decisions.md contienen una sola decisión sobre qué navegación debe tener el área autenticada del adulto — D-064 y mc-49 cubren exclusivamente el sitio público.
El hallazgo más profundo no fue de layout sino de modelo de datos: la pantalla asumía que todo adulto es un padre. users.is_learner existe desde la migración 0001 —"¿este adulto usa el producto para sí mismo?"— y nada downstream lo leía nunca. Un adulto que se registró por registro-aprendo veía la sección "Tus hijos" vacía y sin sentido, y no tiene ningún lugar a donde ir: no existe pantalla de práctica para un adulto que aprende solo —F5b (contenido N8-N10) y F10 (clubs de adultos) siguen sin construirse—, así que el hueco de navegación era en realidad dos huecos: el layout equivocado y una función que no existe todavía.
La investigación externa converge en un patrón conocido: Google Family Link —el análogo real más cercano, un adulto gestionando el uso de un menor— usa exactamente 3 pestañas fijas (Resumen/Controles/Ubicación), no un nav de sitio de marketing [1]. La literatura de UX confirma que pestañas fijas sirven cuando hay 3-5 destinos igual de importantes [2][3], y que un panel con más de eso se vuelve una lista de una sola pantalla en vez de pestañas [4] — la misma regla de HIG/Material 3 que ya fijó D-064 en 5.
Sobre las superficies de NIÑO en bandas futuras (PRIMARIA, SECUNDARIA): la investigación de mc-20/mc-21 ya deja esto resuelto — navegación máxima de 2 toques, cero menú, la rejilla de caras ES la navegación [5][6]. mc-21 agrega, para PRIMARIA, una franja ligera de "dónde estoy en la sesión" (no un menú) [7]. mc-22 (secundaria) es la única que sugiere un patrón de navegación distinto: riel lateral persistente solo en escritorio, teclado numérico anclado abajo en móvil — pero está descrito como densidad de contenido dentro de la pantalla de práctica, no como app-chrome de cuenta [8]. mc-23 (adulto/pro) pide navegación de salto VISIBLE dentro de la práctica (saltar de tema), en vez de un flujo lineal fijo — de nuevo, dentro de la pantalla de resolver problemas, no un menú de cuenta [9].
Este documento fue traducido del original en inglés por Claude (Anthropic) y verificado automáticamente contra la fuente: cada número, URL, marcador de cita y marca [unverified] coincide con el original. La prosa todavía no ha sido revisada por un hablante nativo humano.
Estado de verificación
Este documento no lleva ninguna marca [unverified]. Cada afirmación está atada a una fuente numerada de abajo.
[unverified] quiere decir que la afirmación está en la investigación pero no se confirmó contra una fuente primaria en la sesión que la produjo. Se publica en vez de borrarse, porque un corpus que esconde sus huecos no es verificable.
Cómo se produjo esta investigación
Los 47 documentos se hicieron el 2026-07-31 por agentes independientes, cada uno con instrucción explícita de no inventar citas y de marcar como [unverified] lo que no pudiera confirmar contra una fuente primaria. La cuota de búsqueda web de la sesión se agotó a media investigación y los agentes posteriores trabajaron por descarga directa contra fuentes primarias. Varios sitios (ftc.gov, ico.org.uk) bloquean la descarga automatizada, y por eso ciertas afirmaciones legales están marcadas a propósito.
Esto es investigación, no asesoría legal, médica ni financiera. Nada aquí reclama un resultado de aprendizaje de Math Challenge; ese estudio todavía no existe.
Findings
1. La estructura de pestañas de Google Family Link. Tres pestañas fijas: Highlights (uso de hoy, app más usada), Controls (tiempo de pantalla / límites de apps), Location — más un centro de notificaciones compartido. Los hogares con varios menores tienen cambio rápido de perfil desde el mismo shell [1]. Arquitectónicamente es el producto real más cercano a “Tu casa”: una cuenta de adulto gestionando menores, no un sitio de marketing.
2. Pestañas vs. lista de un solo scroll, y dónde está la línea. Las pestañas inferiores sirven para 3-5 destinos primarios accedidos con frecuencia [2]. Las pantallas de ajustes, específicamente: las pestañas funcionan cuando los destinos son igual de importantes y no están subordinados entre sí; cuando un destino es claramente primario y el resto secundario, o cuando hay categorías más variadas que eso, una sola lista desplazable sirve mejor [3][4]. La navegación con barra lateral es la elección correcta para productos con 15-40 secciones (paneles de administración, dashboards SaaS) — no aplica a la escala de esta pantalla (2-5 secciones) [10].
3. Hallazgos de navegación de mc-20 (KINDER), reformulados para el
propósito de esta tarea. Máximo 2 toques desde abrir la app hasta “estar
respondiendo un reto”. Toque 1: elegir avatar. Toque 2: tocar la
mascota/Jugar. Antipatrón explícito: “deep or hidden navigation (hamburger
menus, multi-level settings) inside the child-facing surface” [5]. Aplica a
KINDER por diseño; el código actual reutiliza este mismo patrón de
cero-chrome para TODAS las bandas de niño vía kids/jugar.astro
(documentado explícitamente como una simplificación: “en esta rejilla
conviven las tres bandas de niño… manda el piso más alto de los tres”).
4. Hallazgos de navegación de mc-21 (PRIMARIA). Cambio de perfil
rápido y sin teclear; sin asumir un inicio de sesión personal persistente
(tablets familiares compartidas, Chromebooks escolares) [6]. Un elemento
nuevo frente a KINDER: una franja ligera de contexto dentro de la sesión
(indicador de progreso/racha) — la primera banda donde “dónde estoy en esta
sesión” se recomienda en absoluto, pero sigue sin ser un menú [7].
5. Hallazgos de navegación de mc-22 (SECUNDARIA/adolescentes). La
única idea de chrome directamente transferible de los cuatro documentos de
banda: “Tablet: two-pane (problem + scratch/graph). Desktop: persistent
skill-tree sidebar that phone omits — the ‘not a kids app’ signal on desktop
leans toward Desmos/Khan-Academy-style utility density.” [8] Enmarcado
explícitamente como densidad por superficie dentro de la pantalla de
práctica, no como navegación de app a nivel de cuenta. El modo oscuro por
defecto para esta banda ya está implementado en bandas.css.
6. Hallazgos de navegación de mc-23 (adulto/experto). “Expose
explicit learner control over path: visible skip/reorder/jump-to-topic…
honoring the self-concept assumption that adults disengage when the system
controls sequencing.” [9] También dentro de la pantalla de práctica —
densidad multipanel (problema, área de borrador, historial de intentos), no
un menú de ajustes/cuenta.
7. Lo que ninguno de los cuatro documentos de banda aborda. Un menú de
navegación persistente, de nivel superior, orientado a la cuenta, para el
área autenticada. KINDER/PRIMARIA quieren cero chrome por diseño. Los
hallazgos de SECUNDARIA/adulto tratan de densidad de contenido dentro de la
práctica. Esto confirma que el hueco de navegación del área privada que este
documento aborda no tenía ninguna cobertura de investigación previa — la
misma conclusión a la que llegó mc-49 para el sitio público antes de
D-064.
8. El hueco del modelo de datos. migrations/0001_identity.sql,
comentario sobre la ausencia deliberada de una columna role: “Sin columna
role… una persona puede ser las tres cosas a la vez: el propio dueño es
papá y aprendiz adulto (por-que-existe.md). Un rol excluyente obligaría a
mentir.” Las capacidades se derivan: padre ⇐ tiene filas en
child_profiles; profesor ⇐ tiene una fila en group_owner_identity (F9,
sin construir); aprendiz ⇐ users.is_learner = 1, la única bandera
explícita, fijada en el registro desde la puerta registro-aprendo pero
nunca leída downstream antes de esta pasada.
Design implications
- El área autenticada del adulto recibe su propio layout, no
Base.astro. El mismo principio queapp/kids/**ya estableció para las superficies de niño, extendido al único hueco que quedaba (D-065). - Franja fija de pestañas arriba, no la maquinaria de cuatro contextos
de D-064. Esta pantalla tiene 2-5 destinos, no “6 secciones + overflow
compitiendo con un nav de marketing” — el problema que resuelve la
complejidad de D-064 no existe aquí. Una simple fila de pestañas sticky,
presente con independencia del
display-mode(no hay ningún nav de pestaña-de-navegador-vs-instalada compitiendo con el que apilarse), coincide tanto con el precedente de Family Link como con el instinto del propio producto de “no construir maquinaria que un problema no necesita”. - Las pestañas se derivan de lo que la cuenta realmente tiene, no de por
qué puerta se registró.
esFamilia= tiene ≥1 perfil de niño.esSolo=users.is_learner = 1. No son mutuamente excluyentes. Tope de 5 (HIG/Material 3, la propia cita de mc-49, reaplicada aquí). - “Cuenta” (passkey/contraseña/cerrar sesión) está siempre presente y
siempre es real — es el único destino que nunca depende del tipo de
cuenta, y garantiza que el panel nunca sea un callejón sin salida ni
siquiera para una cuenta sin hijos ni
is_learneractivado (p. ej. solo profesor, F9 sin construir). - La pestaña de aterrizaje es la primera pestaña REAL (no “próximamente”), no simplemente la primera en el orden de presentación — un aprendiz solo no debería abrir la app en un placeholder de “próximamente” cuando “Cuenta” tiene contenido real y funcionando.
- La banda de RUM es
SERIO, noPUBLICO. D-037 permite medir las superficies de adulto;PUBLICOmezcla tráfico de marketing con uso autenticado del producto en el mismo cubo de métricas. - Para las futuras bandas de niño (PRIMARIA, SECUNDARIA): cero chrome a
nivel de cuenta, siempre — este es el lineamiento que el dueño pidió fijar
ahora en vez de diferir. El patrón de cero navegación con
rejilla-de-avatares-como-entrada que
kids/**ya implementa para KINDER sigue siendo el patrón de cada banda de niño. Lo que cambia por banda es la densidad de contenido dentro de la pantalla de juego, nunca la navegación a nivel de app: PRIMARIA añade una franja ligera de progreso dentro de la sesión (no un menú); la pantalla de práctica de escritorio de SECUNDARIA puede llevar un riel lateral persistente de árbol de habilidades, y el teléfono sigue anclando el teclado numérico sin chrome añadido; ninguna de las tres recibe jamás un menú hamburguesa, una barra de pestañas inferior, ni estructura alguna que exija más de 2 toques desde abrir hasta “estar respondiendo un reto”. Un niño nunca llega alayouts/Privada.astro— ese layout es solo de adulto por construcción (D-065). - Para la futura superficie de autoestudio adulto/pro (F5b/F10, sin
construir): cuando se entregue, vive como una pestaña “Practicar”
real en este mismo shell
Privada.astro(no un layout nuevo) — la navegación visible de saltar/saltar-a-tema demc-23ocurre dentro de esa pantalla, igual que dentro de cualquier pantalla de práctica, no como un segundo sistema de navegación a nivel de cuenta.
Open questions for the project owner
Ya resueltas en esta sesión, registradas aquí para trazabilidad:
- Cuentas solo vs. familiares, y cómo debería diferir el menú →
resuelta: se derivan de datos reales (
is_learner, número de hijos), no de la puerta de registro; las pestañas son la unión de lo que aplica. - Si anticipar ya las pestañas de F8 → resuelta: sí, como pestañas visibles de “Próximamente” en vez de reconstruir la navegación dos veces.
- Si escribir el lineamiento de bandas futuras ahora o diferirlo → resuelta: ahora (implicación de diseño #7 de arriba).
Siguen abiertas, para quien construya F5b/F9/F10:
- Cuando la pestaña “Practicar” del adulto pase de placeholder a real,
¿reutiliza el modelado de entidades estilo
child_profiles, o una tabla separada con clave directa sobreusers.id? (Fuera del alcance de la navegación; es una pregunta de contenido/datos para F5b.) - Cuando F9 (profesor/aula) se entregue, ¿el profesor recibe una 6.ª
pestaña aquí, o un área
/app/maestro/completamente separada? El tope de 5 pestañas de este documento asume padre+aprendiz; una pestaña de profesor necesitaría su propia decisión de alcance en ese momento.
Fuentes
- Google Families / Family Link product documentation and support pages — tab structure (Highlights/Controls/Location), multi-child profile switching
- UXPin, "Mobile Navigation Patterns: Pros and Cons"
- LogRocket Blog, "Tabbed navigation in UX: Where and when to use it"
- Cursa, "Tab Navigation Patterns and When to Use Them"
- Math Challenge internal research, docs/research/2026-07-31-mc-20-ui-ages-3-6-kinder.md §8, design implications #8-#9
- Math Challenge internal research, docs/research/2026-07-31-mc-21-ui-ages-7-11-primary.md §10, design implication #13
- Same as [6], design implication #4
- Math Challenge internal research, docs/research/2026-07-31-mc-22-ui-teens-12-17.md, design implication #13
- Math Challenge internal research, docs/research/2026-07-31-mc-23-ui-adult-expert.md, design implications #8, #10
- AlfDesignGroup, "Sidebar Design for Web Apps: UX Best Practices (2026 Guide)"
- Math Challenge internal code/decisions — migrations/0001_identity.sql (schema comment on role vs. derived capabilities, is_learner column), apps/web/src/pages/[locale]/app/kids/index.astro (§"Por qué esta pantalla NO usa layouts/Base.astro"), docs/decisions.md D-034, D-064
Preguntas que este documento le deja abiertas al dueño
Están sin responder a propósito. Se listan, no se resuelven — convertirlas en preguntas frecuentes obligaría a inventar respuestas que el documento no tiene.
- Solo vs. family accounts, and how the menu should differ → resolved: derived from real data (is_learner, child count), not signup door; tabs are the union of what applies.
- Whether to anticipate F8's tabs now → resolved: yes, as visible "Próximamente" tabs rather than rebuilding navigation twice.
- Whether to write the future-band guideline now or defer → resolved: now (design implication #7 above).
- When the adult "Practicar" tab goes from placeholder to real, does it reuse child_profiles-style entity modeling, or a separate table keyed directly on users.id? (Out of scope for navigation; a content/data question for F5b.)
- When F9 (teacher/classroom) ships, does the teacher get a 6th tab here, or a fully separate /app/maestro/ area? This document's 5-tab cap assumes parent+learner; a teacher tab would need its own scope decision at that point.
Uno de 51 documentos de investigación, 168.346 palabras en total, contadas en el build sobre los archivos mismos. Leer este documento en el repositorio