UX móvil: benchmark y rediseño

24-oct-2026 · renglón 9 de la cola · brain · texto completo en docs/UX_MOVIL_BENCHMARK_24oct2026.md

«En el iPhone tenemos que encontrar una forma de que sea mucho más fácil o mucho más clean la pantalla y la forma de todo; buscar los mejores reviews de juegos de iPhone de nuestro estilo para hacer un benchmark y agarrar lo mejor de la visualización.» — Manuel, 24-oct-2026, 09:50

1. Benchmark: los mejores juegos y apps de iPhone de nuestro estilo

Calificaciones, premios y citas de prensa buscados y verificados el 24-oct-2026 (con fuente real, nunca inventados — donde no se encontró un dato, se dice «no encontrado»).

Tabla comparativa

App	Rating	Reseñas	Apple Design Award	Bucle central	Qué nos robamos

Investigación hecha con búsqueda real (WebSearch/WebFetch) el 24-oct-2026. Varios «premios» que estas apps mencionan en su marketing (Strava, AllTrails, Pokémon GO, Peak) son App Store Awards o reconocimientos de Apple distintos al Apple Design Award — documentados aparte para no confundirlos.

2. Diez reglas de diseño móvil para Mundo NTL

Dos notas adicionales del benchmark: barra inferior de pocas acciones nombradas y con contraste de fondo respecto al mapa (Komoot); cuidado con el botón de acción primaria que «sobrevive» en pantalla aun cuando el usuario ya no lo necesita (defecto de Strava con «Record»).

3. Lo que de verdad tenía el prototipo

Antes de rediseñar se tomaron capturas reales en producción (390×844) del estado del 24-oct-2026 — evidencia, no opinión:

/ (mapa): hasta 3 filas de píldoras separadas arriba, más el buscador y 3 botones redondos; reloj y botón de pantalla completa flotando sobre el mapa, encimados con un marcador de evento.
/mundo: 7 elementos flotantes distintos sobre la escena a la vez.
/base: la más cargada — 5 botones arriba (envuelven en 2 líneas en 390px), selector de 5 tipos de base cortado en seco sin aviso de que se puede deslizar, categorías igual cortadas, y un texto de ayuda fijo que tapaba la escena para siempre.
/conexiones: la más limpia de las cuatro — es una página de documento, no una escena 3D con HUD.

4. Rediseño aplicado · primera corrida (/base y /mundo)

La primera corrida priorizó /base y /mundo (las dos con más ruido medido arriba) sobre / (ya tenía panel plegable desde el 23-oct) y /conexiones (ya era la más limpia). La segunda corrida, abajo, cerró esas dos.

Regla 2 — HUD que desaparece al caminar

En /base y /mundo, la barra de arriba completa se atenúa a 16% de opacidad y deja de recibir toques en cuanto el jugador camina de verdad (ctl.estado.velocidad > 0.3), y reaparece sola 280ms después de detenerse. Verificado disparando keydown/keyup de verdad y leyendo la velocidad en vivo, en 390×844, 430×932 y 1280×800, sin errores de consola.

/base antes: 5 botones y 2 filas de chips cubriendo la escena — /base · antes (quieto, HUD siempre completo)

/base caminando: el HUD casi desaparece — /base · caminando (HUD al 16%)

/mundo antes: 7 elementos flotantes sobre la plaza — /mundo · antes (quieto)

/mundo caminando: HUD casi invisible — /mundo · caminando (HUD al 16%)

Regla 10 — indicio de scroll y ayuda que no tapa para siempre

En /base, el degradado de «hay más» en el selector de base y la leyenda de categorías ahora solo aparece si de verdad hay contenido cortado (medido con scrollWidth/clientWidth en vivo). El texto de ayuda de /base ahora se desvanece solo a los 8s, igual que /mundo ya hacía.

/base antes: selector y categorías cortados sin aviso — /base · antes (corte seco, sin aviso)

/base después, en reposo, 430px: degradado en los bordes — /base · después (430×932, en reposo)

4b. Segunda corrida: / (mapa) y /conexiones

/ (mapa) · regla 8 — nunca portar la UI de escritorio al teléfono

En 390px la barra de arriba envolvía en dos filas con siete bloques flotantes: logo, segmentador «Gran Cañón / Mi base·MTY», dos ligas, el buscador y tres botones redondos. Ahora en teléfono arriba queda sólo el buscador: el logo se va, y el segmentador y las ligas del proyecto bajan dentro del panel, con nombre, en la vista «Explorar». En escritorio nada cambia (todo sigue en una sola fila, medido: los 7 bloques a y=10, barra de 62px de alto). Los nodos se mudan de verdad entre la barra y el panel según el ancho — no hay copias duplicadas — y vuelven solos al pasar a escritorio.

/ (mapa) · regla 1 — un solo lugar para el pulgar, que cambia de función

Los tres botones del mapa (ubicación · a pie · capas en vivo) dejaron la esquina de arriba (imposible con el pulgar en un teléfono alto) y viven en una columna fija encima del panel, del lado del pulgar. El de abajo es el primario y cambia de función sin moverse de sitio, como la Pokéball de Pokémon GO: normalmente es «a pie»; mientras una aventura está corriendo o en pausa, ese mismo lugar es pausar/seguir, con el icono y la etiqueta correctos.

/ antes: dos filas de píldoras sobre el mapa — / · antes (7 bloques flotantes arriba)

/ después: una sola fila de buscador y columna del pulgar — / · después (una fila arriba, acciones al pulgar)

/ (mapa) · reglas 3 y 5 — el mapa y el dato en la misma vista

Antes, con el panel plegado no había ninguna señal de que una aventura estaba corriendo: el nombre, el avance y el botón de pausa vivían sólo dentro del panel. Ahora una cinta sobre el panel dice qué aventura es, cuántos km llevas de cuántos y si va o está en pausa, con su barra de avance; tocarla abre la pestaña «Aventura» y sube el panel a media altura; la ✕ termina la aventura (y así el lugar del pulgar vuelve a ser «a pie»).

/ con la cinta de aventura activa sobre el panel plegado — / · aventura corriendo con el panel plegado

/ (mapa) · regla 2 — también al caminar por el mapa

El modo a pie del mapa ya tenía su propio HUD, pero la barra de arriba y el reloj seguían enteros mientras caminabas. Ahora los dos bajan a 16% en cuanto NTLApie.A.vel > 0.3 y vuelven solos al parar — verificado empujando el bastón virtual de verdad y leyendo la velocidad en vivo (vel=2.37 → opacidad 0.16; vel=0 → opacidad 1).

/conexiones · regla 1 y Komoot — una sola acción primaria, con nombre

La acción que de verdad importa en esa página (subir un GPX o un FIT) estaba debajo de doce tarjetas. Ahora hay una barra fija abajo con un solo botón nombrado, «Subir GPX o FIT», que abre el selector de archivos directo; y —para no repetir el defecto documentado del botón «Record» de Strava— se esconde sola cuando la sección de subir ya está a la vista. La flecha de «volver al mapa», que antes flotaba aparte en la misma esquina, se metió dentro de esa barra: en teléfono queda una sola cosa flotando en la pantalla, no dos encimadas.

/conexiones · menos muro, misma verdad

Las doce tarjetas de servicios ahora van agrupadas por su estado real («Listas para usar» abierto, «En espera» y «Solo por archivo» cerrados, cada uno con su conteo a la vista). Medido: la sección «Tus cuentas» pasó de 2,606 px de alto a 630 px en 390px de ancho, sin esconder nada — cada grupo dice cuántos trae y se abre de un toque.

/conexiones antes: tarjetas una tras otra — /conexiones · antes

/conexiones después: tres grupos con conteo — /conexiones · después (3 grupos con su conteo)

6. Modo experiencia (renglón 14 · 25-oct): pantalla completa, UN botón, UNA hoja

«Cuando juegues una experiencia que use toda la pantalla; los menús o popups hacen que no sea friendly; a lo mejor un solo botón para salir o regresar.» — Manuel, 24-oct-2026, 23:00

La prueba en el simulador de iPhone (25-oct 08:40) contó 13 controles a la vista en reposo en el mapa, 9 en la plaza y 11 en cuatro filas en la base. El modo experiencia los deja en uno: un botón redondo de 56 px abajo a la izquierda (salir/volver; mantenerlo abre un menú radial de 3–5 acciones) y una hoja inferior de tres alturas para TODO lo demás. Vive en assets/hoja.js + assets/hoja.css (API en la cabecera) y la usan /, /mundo, /base y /a/<id>.

Sky → cero HUD en reposo; lo que aparece al tocar se va a los 3 s.
Alto's Odyssey → un solo control visible.
Pokémon GO → el botón cambia de función sin moverse; fichas en la hoja, nunca encima del mundo.
Genshin → el HUD se oculta; el teléfono no copia la UI de escritorio (ahí la hoja es un panel lateral).
Apple Maps / AllTrails → hoja de tres alturas con asa; tocar la escena la pliega; cabecera con piel por contexto (para el letrero del lugar del renglón 15).
Pikmin Bloom → listas de una línea con la acción a la derecha; chips en una sola fila deslizable.
Lo que NO: menús anidados, modales, barras dobles, y un botón flotando encima de la hoja abierta (tapaba contenido: se recoge y vuelve al plegarla).

Medido con herramientas/movil-inmersivo.mjs (390×844 y 430×932, táctil): controles sueltos en reposo 11 → 2 en el mapa, 9 → 1 en la plaza, 15 → 1 en la base; traslapes 39 → 6 en el mapa (todos sobre el lienzo, a propósito); globitos de la plaza 0 encimados; crédito de MapLibre de 370×33 a 24×28. Detalle y tabla completa en docs/UX_MOVIL_BENCHMARK_24oct2026.md §6; capturas en docs/capturas/movil-inmersivo/.

7. UX familiar (Ciclonsejo · 25-oct-2026): lo que la gente ya trae en la mano

«Quiero que hagas un análisis de lo que la gente ya está acostumbrada a usar como UX, como un iPhone o como los botones de un Safari o todo, para que hagamos algo que no canse a la gente visualmente y que ya esté acostumbrada, pues es algo que queremos que usen todos los días.» — Manuel, 25-oct-2026, 12:10

Texto completo (análisis con fuentes, focus group simulado, propuesta categorizada, veredicto del consejo y ejecución) en docs/UX_FAMILIAR_25oct2026.md. Aquí el resumen.

7.1 Lo que ya saben hacer sin pensar (fuentes: Apple Human Interface Guidelines; Safari iOS 17–26; Apple Maps / Google Maps; WhatsApp, Instagram, Strava, AllTrails, Uber, Pokémon GO)

Chevron «atrás» arriba a la izquierda, sin caja, en el color de acento (HIG · Navigation bars). Nadie lo lee: lo reconoce.
Hoja inferior con grabber (36×5 pt) y tres alturas; se arrastra, se cierra deslizando o tocando afuera (HIG · Sheets; Apple Maps, AllTrails, Uber).
Letra del sistema a 17 pt para todo lo que es interfaz; 15 pt para la segunda línea; nada que haya que leer por debajo de 13 (HIG · Typography, Dynamic Type).
44×44 pt de blanco de toque, siempre (HIG · Layout).
Un acento; botones de una familia: relleno (principal), gris (secundario), texto (terciario) (HIG · Buttons). Pulsar = el control se atenúa, no se hunde.
Celdas de lista de 44–52 pt con separador fino, icono en caja redondeada a la izquierda y la acción con nombre o un chevron a la derecha (Ajustes, App Store, WhatsApp).
Chips de filtro en una sola fila deslizable, cápsula gris, la elegida en acento (Apple Maps, Google Maps, Instagram).
Mantener presionado abre acciones contextuales (Haptic Touch): por eso el radial del botón único no estorba.
Modo oscuro y reducir movimiento se respetan sin preguntar (HIG · Dark Mode, Accessibility).

7.2 Lo que cansa (y teníamos)

Bordes de 2–3 px en todo y sombras «duras» (0 3px 0) que hacen que cada control parezca un botón de madera: el ojo no descansa en ninguna parte.
Cinzel (letra de letrero) en títulos, botones, chips, etiquetas y pestañas: una tipografía decorativa leída cien veces al día deja de ser especial y empieza a pesar.
Radios distintos por página (4, 10, 12, 14, 16, 18, 20 px) y tres familias de botones distintas.
Controles que cambian de forma o de lugar según la página («Atrás» con caja aquí, flecha redonda allá, texto en otra).
Texto de 11–15 px en menús, chips y pies.

7.3 Focus group simulado (5 personas · 8 pantallas) — lo que coincidió

María (40s, iPhone, WhatsApp): «La hoja de abajo la entiendo porque es como Maps. Lo que no entiendo es por qué todo tiene marquito, parece un juego de niños. El formulario sí lo lleno, pero “Esta soy yo” en letra de castillo me da risa.»

Rodrigo (30, ciclista, Strava): «Los chips de filtro bien. Los botones de madera cansan a la tercera pantalla. Si esto lo voy a abrir al bajarme de la bici, quiero que se vea como Strava, no como un pergamino.»

Paola (38, planea los fines de semana): «Las fichas de lugar con madera me gustan, eso sí es NTL. Pero el botón de “atrás” quiero verlo donde siempre, arriba a la izquierda, y que se llame igual en todas.»

Don Arturo (62, Maps y poco más): «Letra más grande y menos adornos. El redondo de abajo lo encontré; lo de mantenerlo apretado no, hasta que me lo dijeron. Lo de arrastrar la hoja sí, porque así es Maps.»

Valeria (22, Instagram/TikTok): «Se ve bonito pero pesado. Si fuera limpio con un solo color de acento y el pergamino solo de fondo, lo usaría. La plaza de otoño es lo que compartiría.»

7.4 Lo que el consejo aprobó, ajustó y rechazó

Propuesta	Tipo	Veredicto	Razón de una línea
Letra del sistema en toda la interfaz; Cinzel solo título de pantalla y nombres de lugar	mejora	Aprobada	Jobs: «la tipografía es la voz; que hable claro y que la marca firme, no grite».
Una familia de botones, un acento, bordes de 1 px, sombras suaves, radios 12/16	mejora	Aprobada	Diseñador de Airbnb: «la madera es el mundo; la interfaz es vidrio».
Hoja: grabber 36×5, cabecera 52, ✕ en círculo gris, celdas y chips como iOS	mejora	Aprobada	Barton: «la gente no lee botones; reconoce formas que ya usó mil veces».
Chevron «atrás» estándar arriba a la izquierda, sin caja, en todas las páginas	arreglo	Aprobada	Product de Instagram: «un “atrás” distinto por pantalla es un bug, no un estilo».
Blancos < 44 px y texto de interfaz < 17 px (nav, asa, chips, pies)	arreglo	Aprobada	Growth de Strava: «cada toque fallido en la calle es una desinstalación».
El formulario de María como formulario de iOS	mejora	Aprobada	Jobs: «si María duda un segundo, perdimos».
Modo oscuro por tokens	mejora	Ajustada	Jobs: «no a medias»: la hoja, el botón y las páginas de documento sí; el HUD 3D y los letreros se quedan como están y se dice.
Dynamic Type (`font:-apple-system-body`)	mejora	Ajustada	Se prende; hay que probar tamaños XL en iPhone real antes de dar por bueno.
Haptics en cada toque	innovación	Ajustada	Solo al abrir ficha o radial (ya existe); Instagram: «la vibración constante es ruido».
Tab bar inferior de 3 pestañas (Mapa · Plaza · Base) en vez del botón único	innovación	Rechazada	Jobs: «ya decidimos UN botón; dos sistemas de navegación son confusión». Barton: medir con gente real antes de volver a abrirlo.
Barra que se encoge al hacer scroll (Safari) en las páginas documento	innovación	Rechazada por ahora	Costo en JS, poco valor: las páginas documento no son el uso diario.
Quitar Cinzel del todo	innovación	Rechazada	Airbnb/Jobs: «la identidad vive en tres lugares: el logo, el título y el nombre del lugar».
Secundario 15 px y sellos 13 px como excepciones nombradas	mantenimiento	Aprobada	Son el subheadline y el footnote de la HIG; nunca para leer de corrido.

7.5 Qué se aplicó hoy

Capa compartida assets/ux-familiar.css cargada por TODAS las páginas: tokens, letra del sistema, botones de una familia, hoja/botón/radial con borde de 1 px y sombra suave, chevron estándar, :active como iOS, reducir movimiento, modo oscuro. Para /, /mundo y /base va como reglas por selector (su HTML lo tocan otros renglones hoy).
Rediseño de /a/nueva, /a/<id>, /conexiones, /expediciones, /expedicion, /libro, /juegos y esta página.
Medido con herramientas/ux-familiar.mjs (11 páginas × 3 tamaños, antes y después): errores, scroll horizontal, blancos < 44, texto < 17 en teléfono, cuánto Cinzel queda, bordes ≥ 2 px y sombras duras. Números en el doc y en la bitácora.

8. El mismo mando en todos lados (renglón 20 · 25-oct-2026): un dock de 9 ranuras, idéntico en el mapa, la plaza, la base, la aventura y la expedición

«Estandarizar a que siempre esté el menú igual en base, plaza y mapa, para cambiar a 3D o 2D, zoom, y cambiar rápido entre plaza, base y mapa; si no se puede usar en algún lado el botón, que salga inhábil pero que salga, para que la gente se acostumbre a que está en un lugar todo.» — Manuel, 25-oct-2026, 15:20

Decisión de Manuel que manda sobre el «cero HUD» del §6: el dock sustituye al botón único y el radial queda como «mantener presionada la pestaña activa». La hoja única sigue siendo el único menú y asoma encima del dock. Vive en assets/mando.js + assets/mando.css; cada página lo configura con NTLMando.configurar(). Se ve como una tab bar de iPhone (icono de 24 px, etiqueta de 10 px, hairline, el activo en el acento), no como un videojuego.

Ranura	Mapa	Plaza	Base	Aventura	Expedición
Mapa · Plaza · Base	Van a `/`, `/mundo`, `/base`; la pestaña de la pantalla actual va en acento y, mantenida 380 ms, abre el radial de la hoja.
2D / 3D	inclina el mapa (pitch 0 ↔ el de antes); inhábil a pie y mirando al cielo	`ponerVista`; inhábil mirando al cielo	inhábil: «La base siempre es 3D»	inclina el mapa	inclina el terreno
− / +	zoom del mapa (a pie, la cámara del muñeco)	2D: zoom del mapa de la plaza · 3D: cámara cerca/lejos	cámara cerca/lejos	zoom	zoom
Dónde estoy	pulsa «Dónde estoy»	inhábil: «Vive en el mapa; aquí no hay GPS»	inhábil: «tu base ya es tu lugar»	inhábil: «Es la ruta de quien la contó»	inhábil: «La expedición ya tiene su lugar»
Cielo (abierto → «Volver»)	`NTLCielo.mirar()` o el chip de la hora	la mirada real de la escena	el mirador real de la base	inhábil	inhábil
＋ Contar	`/a/nueva` en todas.

Tocar una ranura inhábil enseña una línea en la hoja (ranura · razón, 2,6 s) y no navega. Medido con herramientas/mando.mjs (5 pantallas × 4 tamaños): los rectángulos de las nueve ranuras son idénticos entre páginas para cada tamaño (teléfono: 9 ranuras de 41 × 52 px a 390, dock de 61 px; escritorio: 503 × 60 px centrado en el área libre del mapa), 0 errores, 0 scroll horizontal, y las acciones (2D/3D, zoom, inhábil, radial) hacen lo que dicen. Detalle en docs/UX_MOVIL_BENCHMARK_24oct2026.md §8; capturas en docs/capturas/mando/.

5. Qué falta

Reglas 4, 6, 7 y 9 siguen sin aplicarse: enseñar el gesto sobre el objeto real (AllTrails), progreso que deja un cambio visual permanente (Walkr), convertir el dato frío del sensor en algo emocional (Relive) y un gesto = una acción generativa (Townscaper). Son cambios de fondo, no de acomodo de pantalla.
El editor de mascota de /base (primera visita) sigue abriendo a pantalla completa sin una salida tan visible como el resto de los controles — regla 10.
/pista no se auditó todavía contra las 10 reglas.
Nada de esto se ha probado en un iPhone o un Android de verdad: todo está medido en Playwright a 390×844, 430×932 y 1280×800.