Visited marker

Visited Marker

WHAT

The visited marker pattern uses markers symbolized to show users which marker has already been visited, helping them avoid revisiting the same info pop-up repeatedly.

WHY

A pattern that has been around since the early days of HTML is to change the color of hyperlinks that have been visited previously. This is considered a usability best practice and helps users recall which hyperlinks have been visited in the past so they can either be revisited or excluded the next time. The same principle can be applied to map markers, which frees users from unintentionally revisiting the same pop-up repeatedly. This pattern is especially important when overlapping markers change their display order and visited points come to the forefront again. Users will end up seeing the same pop-up again and again and as a result give up faster out of frustration.

WHEN

Using the visited marker pattern helps users make faster decisions by increasing their focus on specific properties. Use it in single-purpose apps that are targeted to specific topics such as hotels or restaurants in which users explore an area of interest to make a booking or reservation. What appears to be a small detail might set your app apart from similar apps in the marketplace.

HOW

Show visited markers with a different background color, typically a shade of gray that is distinct from the marker’s primary color. After the user has clicked a marker to trigger the info pop-up, the previously colorful marker turns gray. This subtle change allows users to quickly see which markers have already been explored and reduces their anxiety and cognitive load to remember and recall. Changing the font color or weight is an acceptable alternative but less effective.

To comply with accessibility guidelines, remember to choose color/label combinations that provide a contrast ratio of at least 4.5:1. Use a contrast ratio tool such as https://contrast-ratio.com to find accessible foreground/background combinations. Alternatively, consider using a different shape or outline to avoid relying on color alone.

EXAMPLE

Recognition over recall is Vacation Rentals’ approach to using the visited marker pattern to indicate vacation rental markers that have already been visited. This feature reduces the cognitive load of having to remember already seen properties, empowers users to feel as if they are in control, and speeds up the booking process, which supports the app’s business model.

Vacation Rentals uses a lighter color to indicate visited markers.
Vacation Rentals uses a lighter color to indicate visited markers.

MORE EXAMPLES

Airbnb - visited marker
Airbnb – visited marker
Older version of Airbnb visited marker with gray background
Older version of Airbnb visited marker with gray background

Leave a Reply