Product Craft Bible
Maps & Geolocation UI
Inicio Social y Comunicación Maps & Geolocation UI
Social y Comunicación

Maps & Geolocation UI

11 reglas Android Developers, Create and monitor geofences (Google)Woosmap / Google Places API optimization guide; Algolia Autocomplete UX guideNielsen Norman Group, Maps and Location Finders on Mobile DevicesMap UI Patterns, Cluster marker; Google Maps JavaScript API, Marker Clustering
179

Maps & Geolocation UI

11 reglas
1558

Radio 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)
Preferir
Radio: 150 m
Evitar
Radio: 10 m
1559

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 guide
Preferir
Roosevelt, CDMX
Roosvelt St, Guadalajara
Roos Place, Monterrey
Roof Garden Hotel, CDMX
Rooker Ave, Puebla
Debounce 200 ms · max 5 sugerencias · texto coincidente resaltado
Evitar
12 resultados para "R"...
Roma, Ciudad de Mexico
Reforma, CDMX
Rosarito, Baja California
1 peticion por tecla · resultados irrelevantes
1560

Store 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 Devices
Preferir
Lista
Ver mapa
Tienda Centro
0.4 km · Abierto hasta las 20:00
Tienda Norte
1.2 km · Abierto hasta las 21:00
Tienda Sur
2.8 km · Abierto hasta las 19:00
Evitar
60% viewport · scroll bloqueado
1561

Agrupar 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 Clustering
Preferir
45
28
19
12
8
Zoom 11 · 8 clusters · 60 fps
Evitar
200 pines · <10 fps
1562

Solicitar 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 Requests
Preferir
Pantalla de tiendas
Tiendas cerca de mi
AllShops necesita tu ubicacion
Para mostrarte tiendas en un radio de 10 km. No guardamos tu ubicacion.
Evitar
AllShops desea acceder a tu ubicacion
Sin explicacion de para que sirve ni que valor aporta al usuario
1563

Zoom 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 levels
Preferir
Zoom 16 · Arrastra el pin para ajustar
Evitar
Zoom 5 · pin de 4 px · irreconocible
1564

Anclar 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, InfoWindows
Preferir
Cafe Insurgentes
4.7 · 0.4 km
Evitar
Cafe Insurgentes
Horario · Telefono · Calificacion · Descripcion · Servicios · Galeria · Resenas · Precio promedio · Afluencia...
Scroll interno → paneo accidental del mapa
1565

Relacion 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 Accessibility
Preferir
En auto
A pie
Evitar
Rutas invisibles sobre satelital
1566

Mostrar 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 Model
Preferir
0 ms
150 ms
800 ms
1 s
VacioSkeleton grisCallesPines
Evitar
Cargando...
3.2 s de espera
Sin feedback · usuario presiona zoom dos veces → sobrepase
1567

Controles 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, Controls
Preferir
+
safe area
Evitar
+
24x24 px · agarre raro · sobre etiquetas
1568

Usar 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)
Preferir
Descripcion del negocio...
Usa dos dedos para mover el mapa
Lista de sucursales · accesible con un dedo
Evitar
Descripcion del negocio...
Scroll atrapado
en el mapa
Lista de sucursales · inaccesible con un dedo