Los 6 años que tomó completar los mapas en watchOS
(david-smith.org)- La función de mapas de watchOS de Pedometer++ se perfeccionó durante más de 6 años con el objetivo de ofrecer la mejor experiencia de mapas posible en Apple Watch, y con el lanzamiento de Pedometer++ 8 alcanzó un hito importante
- El intento inicial consistía en generar los mapas en el servidor y mostrarlos en el Apple Watch, pero como había que enviar y recibir los datos del entrenamiento cada vez, no era práctico para la navegación ni para el uso diario, y tampoco podía funcionar sin conexión
- Para obtener el control necesario en watchOS, se creó directamente un motor nativo de renderizado de mapas en SwiftUI y, en 2021, ya era posible renderizar mapas basados en mosaicos de forma estable y superponer información de ubicación
- Para adaptarse a watchOS 26 y Liquid Glass, junto con Andy Allen se creó un nuevo mapa base, reduciendo la complejidad visual y aumentando el contraste y la saturación para que siguiera siendo legible incluso bajo elementos con apariencia de vidrio
- En colaboración con Rafa Conde, se creó un nuevo diseño con las métricas superpuestas en la esquina superior izquierda y el mapa como la página superior de una pila vertical, y tras cientos de millas de validación en campo se incorporó al diseño final de Pedometer++ 8
El recorrido de los mapas de Pedometer++ en watchOS
- Un hábito clave para no perderse en la montaña o al aire libre es revisar la ubicación actual con mucha frecuencia mientras uno se mueve, y un mapa en la muñeca es una de las mejores formas de hacerlo
- Desde los primeros días del Apple Watch querían un buen mapa en la muñeca, pero en la práctica la posibilidad real no apareció hasta que watchOS 6 introdujo SwiftUI y permitió crear aplicaciones “de verdad”
- Los primeros Apple Watch tenían pantallas pequeñas y procesadores lentos, lo que dificultaba alcanzar el nivel deseado, y el primer intento de mapa de Pedometer++ consistió en generarlo en el servidor
- Ese método de generación en servidor exigía enviar y recibir los datos del entrenamiento asociados cada vez que se refrescaba la pantalla, así que aunque era útil para validar la idea, no resultaba práctico para la navegación ni para el uso cotidiano, y tampoco podía funcionar sin conexión
Motor de mapas personalizado basado en SwiftUI
- Para avanzar en watchOS hacía falta un control de más bajo nivel, así que construyeron directamente un motor completo y nativo de renderizado de mapas en SwiftUI
- SwiftUI era en ese momento la opción compatible con watchOS, y además ayudaba a incluir mapas en widgets que solo admitían SwiftUI
- En 2021 alcanzaron un nivel en el que podían renderizar mapas en watchOS de forma estable y con buen rendimiento
- Este motor puede renderizar mapas basados en mosaicos y superponer encima información de ubicación
Las limitaciones del diseño de pantalla en watchOS
- Diseñar una app para watchOS era un reto entretenido pero frustrante por las limitaciones de una pantalla pequeña y el uso con una sola mano
- El objetivo era permitir que la persona usuaria pudiera leer el mapa y usarlo para navegar, sin perder acceso a la información del entrenamiento
- Tras varios intentos de diseño, durante un tiempo adoptaron un enfoque modal que cambiaba entre la pantalla del mapa y la pantalla de métricas con un botón en la esquina superior izquierda
- Este enfoque permitía, en una pantalla, mover el mapa libremente y acercarlo o alejarlo, y en la otra ofrecer métricas y controles mediante la interfaz habitual de páginas por pestañas de watchOS
- Pero este diseño se sentía como una concesión, y era difícil meter un mapa interactivo dentro de una estructura de UI que necesitaba gestos de deslizamiento para funcionar
- A medida que la pantalla del Apple Watch fue creciendo, parecía menos necesario separar con tanta fuerza un espacio exclusivo para que el mapa resultara útil
- Después también se evaluó colocar las métricas en la parte inferior de la pantalla, pero eso introducía otras limitaciones en salidas largas o en entrenamientos que no estaban centrados en la navegación
- Los distintos diseños compartían una misma limitación: la app solo podía mostrar a la vez un conjunto fijo de campos
- También se podría haber hecho que la interfaz fuera configurable por la persona usuaria, pero en el diseño de watchOS conviene evitar interacciones que tomen más de unos pocos segundos, y la configuración por parte del usuario es intrínsecamente engorrosa, así que no era adecuada
Creación de un nuevo mapa para Liquid Glass
- Mientras seguían dándole vueltas a la estructura de la app, Apple anunció watchOS 26 y Liquid Glass
- Un elemento clave del diseño de Liquid Glass es la superposición en capas, y también era importante el tipo de colores que combinan bien entre sí
- Hasta entonces usaban Thunderforest Outdoors como mapa base de la app; el contenido incluido era bueno, pero no encajaba bien con Liquid Glass cuando se le superponían elementos con apariencia de vidrio
- Junto con el cartógrafo Andy Allen crearon un mapa base completamente nuevo para que se viera bien con Liquid Glass
- En el nuevo mapa redujeron la complejidad visual, aumentaron el contraste entre elementos y elevaron la saturación de los elementos cartográficos para evitar que se vieran opacos y borrosos bajo el vidrio
- Este trabajo también les permitió crear una variante en modo oscuro de los mosaicos del mapa
- El modo oscuro también es útil en iOS, pero tuvo un efecto especialmente grande en watchOS, y se ajustó con el objetivo de lograr un mapa muy legible incluso a la distancia del brazo
- Como resultado, obtuvieron un mapa adecuado para watchOS, pero todavía faltaba un diseño de app a la altura
Rafa Conde y el nuevo diseño
- Para salir del estancamiento del diseño, colaboraron con el diseñador Rafa Conde
- Entre varias alternativas de layout, la dirección final fue un diseño con las métricas superpuestas en la esquina superior izquierda y el mapa como la página superior de una pila vertical
- Este diseño resuelve el problema del mapa interactivo haciendo que primero haya que tocar el mapa para entrar en modo de exploración
- Una vez definido el concepto general, siguió el trabajo de construir la app real y pulir los detalles
- El concepto de Rafa se implementó rápidamente como un prototipo funcional y se validó sobre el terreno caminando cientos de millas
- Después se ajustaron la tipografía y decisiones de diseño más sutiles hasta llegar al diseño final incluido en Pedometer++ 8
- La pantalla final quedó clara, útil y naturalmente adaptada a la plataforma watchOS, con un diseño a la vez nuevo y distintivo
Por qué no usaron MapKit
- El trabajo en el mapa personalizado comenzó antes de que existiera Apple MapKit para watchOS, y la razón de implementarlo por su cuenta en lugar de usar MapKit fue que no ofrecía la configurabilidad ni la utilidad que necesitaba Pedometer++
- MapKit es bueno para usos básicos, pero no ofrecía el nivel de control que Pedometer++ quería brindar
- El MapKit de watchOS siempre se muestra en modo oscuro y, aunque eso puede ser una buena opción predeterminada, también impone limitaciones en términos de accesibilidad y elección de la persona usuaria, por lo que debería poder elegirse
- El MapKit de watchOS ha ido ampliando lo que puede hacer con el tiempo, pero seguía siendo limitado en animaciones y superposiciones
- La cobertura de curvas de nivel del terreno y de senderos en MapKit está mejorando, pero todavía hay muchos lugares donde hace falta un nivel de detalle más rico incluso en zonas donde el mapa de MapKit aparece casi vacío
- Como ejemplo, se compara la diferencia entre el mapa personalizado y MapKit en la entrada de una ruta de senderismo favorita en Escocia
2 comentarios
No hago senderismo, pero el esfuerzo que le metieron a la app es enorme. Contrataron a un cartógrafo...
Comentarios de Hacker News
Que el Apple Watch no tenga mapas topográficos y de senderismo hechos por la propia Apple parece un gran fracaso. Ni siquiera el Watch Ultra, el más caro y “para exploradores”, los tiene, y funciones como importar GPX están casi en el terreno de los sueños
Al final es un dispositivo de estilo de vida, pero aun así decepciona
La evolución es excelente, y también da gusto ver qué se puede crear cuando uno se sale de las convenciones de diseño como la UI centrada y simétrica. Hasta dan ganas de querer un Apple Watch
En las capturas del artículo se ve Hidden Valley, en Glen Coe, una de mis rutas cortas favoritas en Escocia
Aunque los recuerdos ligados a la casa de abajo en ese valle son menos agradables. Antes pasaba por ahí en auto y miraba casi soñando esa casa siempre cerrada, en un rincón aislado entre las montañas, pensando en lo especial que sería vivir en un lugar así. El estacionamiento del sendero estaba apenas a unos cientos de metros cuesta arriba por la carretera
Años después reconocí esa casa en un documental de Louis Theroux, donde la visitaba junto con su dueño, la figura televisiva Jimmy Saville. Después, ya de vuelta en Australia, salió a la luz que Saville había sido póstumamente identificado como uno de los abusadores infantiles y delincuentes sexuales más infames del Reino Unido, y fue realmente espantoso. En la parte superior del mapa de la captura incluso se ve el nombre y el contorno de esa cabaña
Lo busqué por curiosidad, y parece que contrataron a un cartógrafo para crear imágenes de mapas personalizadas, grandes y visualmente atractivas, con el fin de incluir detalles que Apple Maps no tiene, como los senderos
Así que, a diferencia de Apple Maps, que renderiza dinámicamente, aquí básicamente se muestran mosaicos de imagen. Eso permite hacer mapas más bonitos y detallados, pero afecta cosas como las descargas separadas por nivel de zoom, la rotación y la posibilidad de actualizarlos
Los proveedores de mapas originalmente ofrecen tanto servicios de tiles vectoriales como de tiles ráster: https://www.thunderforest.com/maps/outdoors/
Lo habitual es usar directamente un servicio de tiles vectoriales y una definición de estilos, o generar tiles ráster si hace falta
Como usuario de Pedometer++, me sorprende la obsesión por el detalle que David ha mantenido durante años. La evolución de la app es realmente impresionante
Antes le puso muchísimo empeño a Watchsmith y, gracias a eso, básicamente se convirtió en un experto de clase mundial en widgets, por lo que también fue genial ver cómo luego tuvo tanto éxito con Widgetsmith. De verdad es un caso de alguien a quien le fue bien y se lo merecía
En un reloj, los tiles estáticos son la decisión correcta. Una vez probé renderizado dinámico en un dispositivo con muchas limitaciones, y el desplazamiento y el zoom se los comían las pausas del recolector de basura en cada frame
Apple Maps en WatchOS es bastante bueno, pero normalmente, cuando me subo a la bici, configuro una ruta y unos 3 minutos después aparece la pantalla de “¿Estás haciendo ejercicio?” encima de todo, así que ya no puedes ver el mapa hasta que te detengas y la cierres
Esa pantalla no debería ocupar toda la pantalla; debería pasar a ser una notificación, o simplemente empezar a registrar en silencio después de un tiempo
Me sorprende porque, si hay gente en Apple desarrollando esto, seguro que se topan con este problema
Si el mapa de esta app pudiera quedarse con la pantalla y mantenerla, para mí sería una función killer. Aunque, al revisar la página de la App Store, no me quedó claro qué funciones están detrás de la suscripción y cuáles no, y como detesto las apps que no te lo dicen hasta que ya terminaste toda la configuración, probablemente solo intentaría acordarme de iniciar manualmente un entrenamiento de referencia