WHAT
The info panel pattern provides for the display of long or interactive content that doesn’t fit into the small space of an info pop-up or that must not obstruct the map.
WHY
The info panel is, like its cousin the info pop-up, an important UI component to display information about an object on the map. The reason that builders may choose a panel over a pop-up is that it provides a reserved area of the layout to display long, rich, or interactive content, whereas the pop-up has space only for a title, a few attributes, a short description, and some action buttons. The info panel is especially useful when further interactions with the map are required and potentially overlapping pop-ups are undesired or inefficient.
WHEN
Use the info panel when the content to be displayed is long, interactive, requires further interaction with the map, or must not cover parts of the map. Apps in the safety and security space often have a hard requirement to avoid obstructed content because it might hide potentially important data, such as incidents, emergency vehicles, or 911 calls. Enterprise apps geared at expert users often tie advanced mapping tools and workflows directly into info panel content, and apps that use the list and details pattern may use the available panel to show details of the selected object.
HOW
Provide a panel on the left or right of the map so that it serves as the container for the content. On mobile devices, the panel should take up the full screen and operate like a modal window. It’s advisable to make panels closable or collapsible to avoid taking up map real estate when they aren’t needed. After a feature is clicked, the app adds a marker at that location and slides open the panel without centering the map on that marker. This animation will cause the map extent to change by clipping equal parts of the map on the left and the right while preserving the map center. This may lead to the less common case that the selected marker is on the portion of the map that got removed, but users understand that a simple pan will move the marker in sight again and still prefer this behavior over automatic panning, zooming, or clipping.
Remember that the info panel effectively replaces the info pop-up, so consider adding MapTips to provide immediate feedback. Some apps may even display sticky MapTips that resemble an info pop-up and stay in place even after the pointer moves away.
Last, it’s important to consider the empty state of the info panel. Design special content that can be displayed while the panel is open but before the user clicks a feature. In this case, the panel can either serve as a place for instructions on how to select something, show a graphic that adds interest to your app, or use the space for other useful content, such as a list of curated locations. If no such use can be identified, keep the info panel closed by default.
EXAMPLE
ArcGIS Indoors software is a complete indoor mapping system for smart building management. Its indoor viewer app allows you to find office locations and resources within a building or a site. The app starts by displaying the whole site. Selecting a building lets you peek inside to see its floor plans. As you do that, an info panel opens on the right showing detailed information about the building or feature. Within that panel, users can then invoke actions such as routing to other features, booking meeting rooms or office hotels, calling or emailing occupants, or logging issues and work orders. The info panel is slightly offset from its surrounding borders to distinguish it from the content panel on the left and indicate that the information shown is related to a selected feature in the map.
MORE EXAMPLES
