Tap to Navigate

Systemizing interactive labels for maps

Linzi Berry
Oct 15 · 6 min read
Image for post
Image for post

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.

Image for post
Image for post
Area type on a venue and zone

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.

Image for post
Image for post
Location type with map point | object | not combined
  • 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.

Image for post
Image for post
The tail is always centered within the bubble’s length. We don’t support moving it to the left for right side due to engineering complexity.

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.

Image for post
Image for post
Different zoom speed animations by Isaac Park

Icon

The icon content type blocks the least amount of the map. We highly recommend this type as long as the icon is clear.

Image for post
Image for post

Text

Use this content type when there is no easily recognizable icon for the content the map bubble is labeling.

Image for post
Image for post

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.

Image for post
Image for post

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.

Image for post
Image for post
Image for post
Image for post
Information density animations by Isaac Park

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.

Image for post
Image for post

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.

Image for post
Image for post
Icons by Meg Robichaud

Copy

Legibility is still important on the map. 15pt when the user is holding the phone and 24 for when the phone is mounted.

Image for post
Image for post

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.

Image for post
Image for post
If you are forced to have a long string through translation, it grows horizontally to 75% of the map space before wrapping. Both text and detail text will each wrap to a maximum of two lines and then tail truncate.

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.

Image for post
Image for post
Left default color | Right chosen color
  • 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.
Image for post
Image for post
The text and icon are only black or white, depending on the background color to meet accessibility requirements. The bubbles choose black or white when the designer chooses the branded color.

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.)

Image for post
Image for post
Left unselected | Right selected

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.

Image for post
Image for post
Made for example purposes only — not real UI from the app. Animation by Isaac Park.

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!

Tap to Dismiss

Sweating the details so you don’t have to

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store