Visited Marker

Visited Marker

What Problem Does This Solve?

Help users to avoid revisiting the same popup repeatedly

Why Use This Pattern?

A pattern that has been around since the early days of HTML is to show links that have been visited preciously in a different color. This is considered a usability best practice to help users recall which links have been visited in the past so they can either be revisited or excluded the next time. The same principle can be applied to markers which frees users from unintentionally revisiting the same popup repeatedly. This patterns helps users to easily identify points that have not been visited yet and it is especially important when overlapping points change their display order and visited points come to the forefront again. User will end up seeing the same popup repeatedly and give up faster because they have a reduced sense of mastery.

When to Use This Pattern

Use in applications that are focused on a specify topic like hotels or restaurants. User that explore an area of interest to make a booking or reservation. Using the Visited Marker pattern will help users deciding faster by simultaneously reducing their level of frustration.

What’s the Solution?

Show markers that have been visited (clicked on) in a different background or foreground color, typically a shade of gray that is distinct from the primary color. After the user has triggered a popup, the colored markers start turning gray. This subtle change allows users to quickly see which markers have already been explored.

Special Considerations

Always remember to choose color/label combinations that provide a contrast ratio of at least 4.5:1, use a contrast ratio tool to find a good foreground/background combination. Consider using a different shape or outline to meet the accessibility requirement to not rely on color alone to convey information.

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