Tap to Dismiss
Published in

Tap to Dismiss

Tap to Navigate

Systemizing interactive labels for maps



Area type on a venue and zone


Location type with map point | object | not combined

Tail placement

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

Different zoom speed animations by Isaac Park



Icon & text

Icon, text & detail text

Information density animations by Isaac Park

Content collisions


Icons by Meg Robichaud


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.


Left default color | Right chosen color
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.


Left unselected | Right selected
Made for example purposes only — not real UI from the app. Animation by Isaac Park.

Last thoughts



Sweating the details so you don’t have to

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