Info pop-up

Popup

WHAT

The info pop-up pattern employs the primary vehicle for accessing content and retrieving information about features on the map. The info pop-up, sometimes also called info window or just pop-up, is the most recognizable object of a map app but doesn’t receive the attention it deserves.

WHY

Builders tend to be content with the default display of attribute value pairs and overlook the potential of knowing the user’s intent while they interact with a feature. As such, data retrieval by itself shouldn’t be the end of a task. It can be the beginning of a workflow that uses the selected location or feature as input for getting route directions or making a reservation.

WHEN

Users have become so accustomed to opening a pop-up by clicking in the map that any layout, except the reference map, should provide pop-ups. Furthermore, pop-ups are the primary method for accessing additional data about objects on the map, so it makes sense to provide space inside them for information and actions. When users trigger a pop-up, their intention was most likely to interact with this feature, so any actions provided inside the pop-up, such as sharing, rating, deleting, or editing, are more likely to be used.

HOW

When someone clicks in your map, they should be rewarded with a bundle of useful information about that location. To make this happen, you need to consider four aspects: how the pop-up is triggered and closed, its position and dimensions, the content, and the actions. Most mapping frameworks take care of trigger interactions and positioning, but it’s nevertheless important to discuss them here.

The simplest way to trigger a pop-up is to click a marker or feature. Alternatively, opening can be triggered after selecting a search result (see search and location finder) or clicking a list item (see location list in the “Marker” section). Indicate the selected location by changing the feature symbol to the selected state, placing a marker on top, or replacing it with a marker altogether. Users can close the pop-up by clicking the X symbol or a Close link in the upper-right corner. In recent years, more apps omit the explicit option to close the pop-up in favor of clicking elsewhere in the map, which will open another pop-up or close it in case no information exists. It’s important to note that only one pop-up can exist at a time, which means that when a new pop-up opens, the currently active pop-up must close.

Usability guidelines have changed over time but current suggestions for positioning are to not pan the map to place the pop-up above the marker but find another position below or to the side. This helps users keep oriented without losing their sense of the marker location. On mobile devices where space is limited, dock the pop-up to the bottom or even the top of the screen. Don’t make the pop-up floating or draggable. In cases where map content must not be hidden, the info panel is the better choice. Always try to minimize the space that a pop-up requires by optimizing its content and avoid the need for scrolling whenever possible.

You will find that the main work for creating useful pop-ups is deciding on the information that is shown in the content area. Info pop-ups can contain photos, videos, ratings, charts, or even route directions, but aim to avoid information overload. A common technique to hide additional content until the user explicitly asks for it is progressive disclosure. As a result, the interface will appear less cluttered and will allow users to focus on exploration and navigation until the desired location is found. Avoid showing meaningless table columns such as ObjectID, Federal Information Processing Standards (FIPS), or other codes and abbreviations, but instead compile and compose the content into human-readable language and structure. Use visual hierarchies to structure the content. Although you are using a map, there is rarely a good reason to include latitude and longitude fields.

Provide meaningful actions in the form of buttons or hyperlinks that allow users to use the current object as the starting point for further analysis or exploration or to share, like, rate, and zoom to.

Especially beware of the antipattern of showing an empty pop-up with a message that reads, “No information found.” Either decide on not showing anything or use the input coordinates as an opportunity to start a search instead. In the latter case, reverse geocode the geographic coordinates to a human-readable address, or place and show a pop-up that includes one or more of the following actions: add missing place, route from here, route to here, report a data problem, measure distance, or search nearby.

EXAMPLE

Space Planner for ArcGIS Indoors is a browser-based app that allows users to plan occupant activity in indoor spaces, including assigning occupants to individual spaces or activity-based work areas called hotels or hot desks. Users start by creating a plan to evaluate several assignment scenarios. The scenarios are adjusted throughout the planning and review processes before the plan is chosen that best fits the organizational needs. The new assignments can then be exported for use in other Indoors apps such as booking meeting rooms or office hotels. The main interaction mechanism to view data about an office, office hotel, hot desk, or person is the info pop-up. This pop-up shows the title, important metrics, current and planned assignments, properties, and related items. It also allows users to assign and remove entities through actions available inside the pop-up. Although the same actions can be accessed elsewhere in the app, having them readily available feels intuitive and saves time.

Space Planner for ArcGIS Indoors makes extensive use of pop-ups to reveal information and let users act on the content.
Space Planner for ArcGIS Indoors makes extensive use of pop-ups to reveal information and let users act on the content.

MORE EXAMPLES

Mobile Popup
Mobile Popup

13 thoughts on “Info pop-up

Leave a Reply