Maps & Geolocation UI
Maps & Geolocation UI
11 reglasRadio minimo de geofence: 100-150 metros
Geofences menores a 100 m generan falsos positivos porque la precision de Wi-Fi es de 20-50 m y puede degradarse a 200 m en torres 5G sin GPS. La Android Geofencing API recomienda un radio minimo de 100-150 m para triggers confiables.
Android Developers, Create and monitor geofences (Google)Autocomplete a partir de 3 caracteres con debounce de 150-300 ms
Lanzar peticiones de autocomplete solo al llegar a 3 caracteres Y tras 150-300 ms sin escribir. Comenzar en 1-2 caracteres genera resultados costosos y poco relevantes; disparar en cada tecla satura la API y degrada el rendimiento percibido.
Woosmap / Google Places API optimization guide; Algolia Autocomplete UX guideStore locator: lista por defecto en movil, mapa como opcion secundaria
En movil, mostrar los resultados de busqueda como lista desplazable ordenada por distancia, no como mapa a pantalla completa. Los mapas interactivos en paginas con scroll provocan paneo accidental. El mapa es un toggle secundario.
Nielsen Norman Group, Maps and Location Finders on Mobile DevicesAgrupar marcadores en clusters cuando hay mas de 50 visibles en un nivel de zoom
Cuando mas de 50 marcadores son visibles simultaneamente en el zoom actual, agrupar los cercanos en circulos con contador. Los circulos escalan su diametro proporcionalmente al numero de marcadores que contienen.
Map UI Patterns, Cluster marker; Google Maps JavaScript API, Marker ClusteringSolicitar permiso de ubicacion solo cuando la funcion lo requiere
Disparar el dialogo de permiso de geolocalizacion solo cuando el usuario inicia activamente una accion que depende de ubicacion. Jamas al lanzar la app para funciones no esenciales. Mostrar justificacion especifica antes del dialogo del OS.
Nielsen Norman Group, 3 Design Considerations for Effective Mobile-App Permission RequestsZoom 11-13 para vistas ciudad, 15-16 para tareas a nivel de calle
Zoom 11 (ciudad) para store locators o zonas de cobertura. Zoom 15-16 (nivel de calle) para confirmacion de direccion o puntos de inicio/fin de ruta. Volar al zoom 16 tras seleccionar un lugar en autocomplete para confirmar el pin visualmente.
OpenStreetMap Wiki, Zoom levels; Google Maps Platform, Style zoom levelsAnclar popups de info sobre el marcador; en movil usar bottom sheet
En escritorio, popups anclados al marcador con cola de llamada, posicionados arriba o al lado. En movil (<600 px), panel deslizable en el 40% inferior de la pantalla. Solo un popup abierto a la vez; abrir uno cierra el anterior sin demora.
Map UI Patterns, Info pop-up; Google Maps JavaScript API, InfoWindowsRelacion de contraste 3:1 en polylines de ruta sobre la capa base del mapa
Las rutas y superposiciones geograficas deben alcanzar contraste minimo de 3:1 contra los tiles del mapa (WCAG 2.2 criterio 1.4.11). Ancho de trazo minimo 4 px en zoom 14+, 6 px en zoom 16+. Jamas solo color para distinguir tipos de ruta: usar tambien patron de trazo.
WCAG 2.2, SC 1.4.11 Non-text Contrast; Map Library, Color Contrast Strategies for Map AccessibilityMostrar tiles en 1 segundo; placeholder visible en 200 ms
Los mapas interactivos deben comenzar a renderizar contenido visible en 200 ms (placeholder o tile esqueletico aceptable) y completar la carga de la capa base en 1 segundo en 4G. Mapas que tardan mas de 3 segundos provocan que el usuario repita gestos y sobrepase el destino.
Nielsen Norman Group, Maps and Location Finders on Mobile Devices; Google RAIL Performance ModelControles de zoom en la esquina inferior derecha en movil, superior izquierda en escritorio
En movil, botones de zoom (+ y -, minimo 44x44 pt, separados 8 px) en la esquina inferior derecha sobre el area segura, donde descansa el pulgar derecho. En escritorio, esquina superior izquierda. Jamas unicamente gesto de pinza sin botones en pantallas tactiles.
Map UI Patterns, Zoom control; Apple HIG, Touch Targets (44 pt min); Google Maps Platform, ControlsUsar gestureHandling: 'cooperative' en mapas embebidos en paginas con scroll
Configurar gestureHandling: 'cooperative' en cualquier mapa que no sea el unico contenido de la pagina. Esto exige dos dedos para panear/hacer zoom en tactil, y Ctrl+scroll en escritorio. Mostrar overlay de ayuda en intentos de un solo dedo.
Google Maps JavaScript API, Controlling Zoom and Pan (gestureHandling option)en el mapa
- R-1558 Radio minimo de geofence: 100-150 metros
- R-1559 Autocomplete a partir de 3 caracteres con debounce de 150-300 ms
- R-1560 Store locator: lista por defecto en movil, mapa como opcion secundaria
- R-1561 Agrupar marcadores en clusters cuando hay mas de 50 visibles en un nivel de zoom
- R-1562 Solicitar permiso de ubicacion solo cuando la funcion lo requiere
- R-1563 Zoom 11-13 para vistas ciudad, 15-16 para tareas a nivel de calle
- R-1564 Anclar popups de info sobre el marcador; en movil usar bottom sheet
- R-1565 Relacion de contraste 3:1 en polylines de ruta sobre la capa base del mapa
- R-1566 Mostrar tiles en 1 segundo; placeholder visible en 200 ms
- R-1567 Controles de zoom en la esquina inferior derecha en movil, superior izquierda en escritorio
- R-1568 Usar gestureHandling: 'cooperative' en mapas embebidos en paginas con scroll