Info Window 3

Info Window

What Problem Does This Solve?

Info Window is the vehicle for delivering facts/ideas (text), numbers, charts, and images to complement the map’s cartography. It shows additional information about a location, typically invoked after clicking on a graphic or symbol on the map.

When to Use This Pattern

Use when more information about an object on the map exists and will benefit the user in an informational or actionable way. It can be assumed with high certainty that the user intent was to know more about this location and therefore any actions that are directly related will get high click-through rates, e.g. sharing or rating the location, deleting or moving the object, etc.

What’s the Solution?

To view the info window click on the map marker. Additionally the info window could be triggered open after clicking on a search listing or other related content. To close an info window, click the x symbol or close link.

Why Use This Pattern?

When someone clicks on your web map they should be rewarded with a bundle of useful information about where they clicked.
Additionally it’s important to avoid information overload by disclosing data or information only upon explicit request by the user. As a result the interface will be appear less cluttered and user can focus on exploration and navigation until the desired location is being found. Info windows can contain enriched data such as photos, videos, ratings, charts, or even driving directions.

Special Considerations

Avoid showing meaningless table columns (ID numbers or codes
(e.g., FIDs, GlobalIDs, FIPS codes, etc.) or abbreviations but rather compile the content into human-readable language and structure. Make use of visual hierarchies to structure the content.
There is rarely a good reason to include latitude and longitude (or X and Y) fields.
Consider using info graphics that directly apply to the current state of the application and the selected location.
Consider the

Related Patterns

Examples

Please specify a Flickr ID for this gallery

References and further reading

3 thoughts on “Info Window

  1. Pingback: Empty Info Window ← Map UI Patterns

  2. Pingback: Marker ← Map UI Patterns

  3. Pingback: Rich Marker ← Map UI Patterns

Leave a Reply