OASIS_MOBILE/docs/ESTUDIO_NAVEGACION.md

5.3 KiB
Raw Permalink Blame History

Cómo moverse por Oasis en el móvil

Estudio para decidir la navegación de la rama. 19/10/2026.

La pregunta

Oasis tiene casi sesenta módulos. En un escritorio caben en un menú lateral; en un móvil no. ¿Qué tiene que ver alguien al abrir la app, y cómo llega al resto?

Lo que hay ahora

Medido en el emulador (Pixel 9, 412 px de ancho) con el workflow acampada (16 módulos):

  • Al abrir, la portada es el lanzador: una rejilla de iconos por secciones que ocupa unos 1.300 px, casi pantalla y media. La actividad, que es lo que ha pasado en la red, empieza debajo y no se ve sin bajar.
  • Abajo hay una barra de cuatro atajos que elige cada cual (Actividad, Chats, Publicar, Buzón de serie).
  • Para ir a un módulo que no está en la barra hay que volver a la portada y buscarlo en la rejilla. Desde dentro de un módulo no hay acceso directo al resto.

O sea: la portada es un menú, no un sitio donde pase algo, y el menú solo está en la portada.

Cómo lo hacen otras

  • Instagram, TikTok, X: el contenido es la portada. Abajo, cinco destinos fijos (inicio, buscar, crear, vídeos, perfil). Lo demás vive en el perfil o en ajustes.
  • WhatsApp, Signal, Telegram: pestañas con las tres o cuatro cosas que se usan siempre. Lo demás, en un menú de tres puntos.
  • Google Maps, Gmail y la guía de Material Design: una barra abajo con entre tres y cinco destinos; si hay más, el último es "Más" y abre una hoja con el resto.
  • El menú hamburguesa arriba a la izquierda (muy usado en 2012-2016) se ha ido abandonando: lo que no se ve se usa menos, y arriba queda lejos del pulgar.

Qué pedimos a la navegación

  1. Al abrir, ver qué pasa (actividad), no un menú.
  2. Llegar a cualquier módulo desde cualquier pantalla, en dos toques como mucho.
  3. Que el sitio para hacerlo se vea sin explicarlo.
  4. Que se alcance con el pulgar con el móvil en una mano.
  5. No tapar contenido ni quitar sitio de pantalla.

Opciones

Portada Llegar a un módulo Pulgar Se ve Comentario
A. Como ahora Lanzador Volver a portada y buscar Medio Sí, en portada La actividad queda enterrada
B. Botón "Menú" bajo la barra de arriba Actividad 2 toques Lejos (arriba) Sí La idea inicial; ocupa una fila arriba
C. "Menú" como quinta pestaña de abajo Actividad 2 toques Cerca Sí Patrón "Más" de Android y de las apps grandes
D. Hamburguesa arriba Actividad 2 toques Lejos Poco Lo que se esconde se usa menos

Recomendación

C: la portada pasa a ser la actividad, y la barra de abajo tiene siempre una quinta pestaña, "Menú", que abre desde abajo una hoja con todos los módulos agrupados (el mismo lanzador de ahora). Se cierra tocando fuera, con la X o volviendo a tocar Menú.

Es la idea de B, un botón que despliega las opciones, pero puesto donde llega el pulgar y donde está el resto de la navegación. Funciona igual en todas las pantallas. Está hecho con una casilla y CSS; un script mínimo hace que el botón atrás de Android cierre la hoja en vez de cambiar de página.

Lo que salió en la prueba (emulador, 19/10/2026)

  • Portada a Tribus: dos toques (Menú, Tribus). Desde Foros a Votaciones: dos toques.
  • En la primera versión la hoja dejaba ver 690 px y los módulos medían 1.200: Tribus quedaba fuera. Con cinco iconos por fila y los grupos pequeños de dos en dos, los 20 módulos caben a 412 y a 360 px.
  • Se cierra tocando fuera, con la X y volviendo a tocar Menú.
  • Con la hoja abierta, atrás cambiaba de página. Ahora la cierra.
  • Al volver atrás desde un módulo abierto desde la hoja, la portada salía con la hoja abierta (la entrada del historial de la hoja seguía ahí). Ahora se quita antes de ir al módulo: atrás lleva a la portada, cerrada.

Tamaños y sistemas (19/10/2026)

Dónde Motor Resultado
Pixel 9, Android 16, 412 dp, gestos y tres botones WebView actual Bien. APK real
360 × 540 dp WebView actual La hoja se desliza; todo se alcanza
Tableta 800 dp WebView actual Contenido y hoja centrados a 720 y 640 px
Letra al 130 % WebView actual Bien
Pixel 3a, Android 9, 412 dp WebView 69 Tras los arreglos, bien (ver abajo)
360 dp, Android 11 Chrome/WebView 83 Bien: 9 pantallas sin desbordar, 5 pestañas de 70 dp

En Android 9 y 11 de emulador la APK no arranca: el node del dev es arm64 y el traductor ARM de las imágenes x86 se para con una instrucción que no conoce (SIGILL). Pasa igual con la APK oficial, así que no es de la rama. Se probó el motor con el servidor local.

Lo que fallaba en WebView 69 y está arreglado:

  • Fichas y filtros pegados unos a otros (no hay gap en flex): márgenes.
  • La hoja del menú no se veía (no hay inset ni dvh): top/left/right/bottom y vh.
  • Los grupos pequeños del menú se montaban (no hay :has): de dos en dos solo donde hay :has; en el viejo, cada grupo a lo ancho.
  • El botón No molestar quedaba encima de la hoja: ahora va por debajo de ella.

Qué mirar en la prueba

  • Desde la portada, cuántos toques hacen falta para llegar a Tribus, a Votaciones y a Ajustes, y desde dentro de un foro.
  • Si alguien que no conoce la app encuentra el menú sin que se lo digan.
  • Si al volver atrás la hoja se queda abierta (no debería).
  • Que la barra de cinco quepa a 360 px de ancho.