navegacion: al abrir, la actividad; los modulos en la pestaña Menu
docs/ESTUDIO_NAVEGACION.md compara cuatro formas de moverse por la app (lanzador en portada, boton de menu arriba, pestaña Menu abajo, hamburguesa) y se queda con la pestaña de abajo, el patron Mas de Android y de las apps grandes: al alcance del pulgar y en todas las pantallas. - la portada es la actividad; el lanzador ya no se pinta alli - quinta pestaña fija en la barra de abajo, Menu, que abre desde abajo una hoja con todos los modulos por secciones; se cierra con la X, tocando fuera o volviendo a tocar Menu. Sin JS: una casilla y CSS - textos en los 11 idiomas; caben cinco pestañas a 360px - capturas, portada y esquema de la interfaz al dia
This commit is contained in:
parent
6eafe5ee18
commit
382d903bc5
18 changed files with 192 additions and 34 deletions
69
docs/ESTUDIO_NAVEGACION.md
Normal file
69
docs/ESTUDIO_NAVEGACION.md
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
# 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,
|
||||
y se hace sin JavaScript, solo con HTML y CSS (una casilla que abre la hoja).
|
||||
|
||||
## 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.
|
||||
Loading…
Add table
Add a link
Reference in a new issue