Rich marker

WHAT

The rich marker pattern extends simple markers on the map to show a key metric, performance indicator, or other important information.

WHY

Sometimes the color, size, or shape of a marker is not enough to depict the information a user is looking for. Although this information can be accessed through the info pop-up that appears after clicking a marker, a user would greatly benefit by not flipping between individual markers and having to recall their content.

WHEN

Use a rich marker when the content of a set of markers is important for decision-making and the user benefits from seeing this information immediately. A store locator, for instance, may want to enrich individual stores by showing the distance or duration from a user’s location, or a hotel booking site may want to indicate the price for the cheapest room in addition to the place itself. A sophisticated rich marker might even display actions that users can directly interact with, such as share or like, without the need to open an info pop-up first.

HOW

Before adding rich markers to your map, consider that they tend to clutter the UI with additional content and can easily lead to information overload and overwhelm your user. As a result, rich markers work best when the result set is limited to a small amount and without overlapping points. In the case of overlapping markers, consider implementing a mechanism that brings partially hidden markers to the foreground on a hover event. Adding subtle hover effects to highlight the border or background or gently increasing the marker size are helpful feedback mechanisms.

Make the rich markers larger than simple markers so that additional content can be displayed inside. Show metrics or indicators that are directly related to the context of the task. Numbers must be meaningful and equal in scale and unit; indicate the unit, such as miles or degrees, if not immediately evident from the UI. Users still expect to see an info pop-up upon clicking, so it’s a good practice to show the pop-up even though the same information has already been pulled to the forefront through the rich marker.

EXAMPLE

This mock-up of a vacation rental imagines an online marketplace for travel lodging. Its users are vacationers who want to find vacation rentals based on location and travel period. Price is the key differentiator, and that’s why the map markers show the average nightly price inside a rich marker instead of using static markers or color-coded points with a low/medium/high classification.