Oct 15, 2020
Tap to Navigate
Systemizing interactive labels for maps
Systemizing a map component has remarkably more constraints than your average button. These seemingly simple interactive labels must stand out against all terrains, densities and fixed buttons. Can combined with regions, exact locations, objects or stand on their own. Are required to be big enough to meet accessibility and tap target requirements and small enough to not block map interaction. And flexibly hold content for 1 destination address or 1,000+ scooters and adjust when zoomed… and more!!!
This is our attempt at an elegant solution for systemizing interactive map labels, or as we like to call them— Map Bubbles.
Types
There are two bubble types to help users differentiate between areas and exact locations on the map.
Area
The Area type (no tail) is used to label a venue, zone, or route. It is anchored by it’s center.
The Area type should always be accompanied by an area or route underneath. It is typically centered within the area it is labeling, but it can be moved from the exact center if there are content collision issues.
Location
The location type (tail) is used to label the exact location of a static or moving object. It is anchored by the bottom of it’s tail. It can be used alone or combined with an object. Include the other object in the tap target, so if the user taps either the bubble’s interaction occurs.
- Combine with map point when you want to anchor the bubble to a specific location on the map.
- Combine with objects, like cars or current location, when you want to make them interactive.
- Don’t combine them with anything when there are many bubbles on the screen, like scooters, bikes or transit. Using it by itself reduces vertical height and visual complexity.
Tail placement
For most cases, the Location type’s tail should be at the bottom of the bubble. However, if you have two long bubbles on the screen at once, you can set one of the bubbles to have the tail at the top to avoid collisions. Once you set the direction keep it on that side.
Content & zoom
Map bubbles support disappearing and appearing content based on zoom. Map zoom levels are 0–20 where 0 is the whole world, 10 is a metropolitan area, and 20 is a mid-sized building.
Icon
The icon content type blocks the least amount of the map. We highly recommend this type as long as the icon is clear.
Text
Use this content type when there is no easily recognizable icon for the content the map bubble is labeling.
Icon & text
Allows for more content when zoomed in and less when zoomed out. Use when trying to communicate two pieces of information and one can be easily represented by an icon.
Icon, text & detail text
Icon, text & detail text allows for even more context when zoomed in and less when zoomed out. This content type should be used sparingly — only when the content greatly improves the user’s experience. Large bubbles make it hard to view and interact with the map underneath.
Content collisions
We provide the ability to overlap the bubbles, remove a bubble (visibility) and remove content to make the bubble smaller (shrinking) within our system component.
To achieve clustering, we recommend choosing to hide existing bubbles in close proximity with each other and replace them with a bubble that shows the aggregate count. Avoidance, meaning the two bubbles automagically switch orientation to avoid colliding, is extremely complicated from an engineering perspective and should be avoided unless absolutely necessary.
Density
>40% of the map should always be visible so the user can orient themselves and interact without accidentally tapping on a bubble.
Copy
Legibility is still important on the map. 15pt when the user is holding the phone and 24 for when the phone is mounted.
Think about localization when considering the amount of words. Avoid long strings in map bubbles — like names or addresses. Variable length and dynamic text forces the bubble to grow to be larger than the recommended screen density, which makes it hard to view and interact with the map.
Color
Map Bubble colors are flexible. They are white by default, but their background color can be changed to match branded moments. In most cases the coloring should only be behind the icon, however if there is no icon the entire background of the bubble can be colored.
- Use the black and white variant for the majority of standard use cases. For example, airports and short location names.
- Use the colored variant when the user needs to associate a color in the bubble with other content on the panel. For example, branded transit lines.
States
Map Bubbles are sized based on tap targets like other interactive elements throughout the map. The white outline and pill shape help them stand out against all base map terrains, densities and fixed map buttons (squares in our app.)
The have selected and unselected states, meaning that you can select one out of a group and visually notice the difference of the one you have chosen. Once selected, the colors of the bubble invert. Our default bubble, white with no color, turns black and our colored bubbles switch from background to stroke.
Our recommended behavior when tapped is to zoom in to Level 16 , center the map bubble within the viewable map, remove the current panel and have the new panel appear. Potential panel content includes additional information or navigating.
Last thoughts
Before jumping into designing UI for maps, take the time to study classic cartography guidance around color, typography and zoom levels. There are cues that help people easily orient themselves and changing something to be visually pleasing can result in a lack of clarity.
Special shout-outs to Isaac Park, Alex Lockwood, Kathy Ma, Gabriel Lanata, Jeremy Dizon and Sam Soffes. I’m Linzi Berry, currently product design manager of the team. My hope in documenting system design thinking and process is to contribute and learn from the design community at large. Please subscribe!
