List and details

List & Details

WHAT

The list and details pattern is related to the location list pattern. Both patterns share the same layout and use similar interaction patterns such as data brushing. The main difference is that with list and details, a user can select an item in the list to view and edit its attributes, or details.

WHY

A list is a series of objects that reflects data retrieved from a database or service. Most lists are displayed in the form of a simple list that displays the information in a card or a more complex table that consists of rows with multiple columns. Most list items show only a few attributes of the whole dataset, such as title, name, and other key fields. The underlying data is usually more complex, and there isn’t enough space available to show more than a handful of attributes. It’s almost impossible to edit this data inline or expand a row into a long form of attribute values. If users are interested in seeing or editing the details of a list item, they can navigate from the list to the details view. The details view helps the user focus on their tasks, such as performing an analysis or updating attribute values. Once the task is completed, users navigate back to the list. This pattern works well for items that have long or complicated attribute forms. It helps focus the user on the selected item. It also affords embedding map interactions, such as editing the geometry into the workflow.

WHEN

List and details is used in apps for situational awareness, operations, or asset management. The two types of apps that benefit most from this pattern are single-purpose and enterprise apps. Single-purpose apps can focus users on managing assets, projects, incidents, or any type of features that require a lot of attributes to be edited. Enterprise apps may use this pattern to show lists of clients, assets, or activities with their status, address, contact information, time stamp, or location.

HOW

Provide a list of items side by side with the map. The list is often sortable, filterable, searchable, driven by the user’s privileges, and populated through services from back-end servers. Keep the list simple by displaying only the most important columns and removing unnecessary design elements such as separators, row striping, shadows, or even cell borders. Offer a button to create a new item and place it toward the top of the list.

It’s not always necessary to provide a details view. For instance, simple attribute updates can be accomplished using inline editing or by opening an info pop-up. A dedicated details view is required for more complex data display or longer forms. The list view and details view are usually contained within the same panel. Users can navigate to the details view by clicking an item in the list and navigate back to the list view by clicking a simple back button on the details view. If the details view holds a form, you should provide buttons to save and cancel instead of the back button. You may also consider adding Preview and Next buttons or arrows to navigate between records in a linear fashion. This will reduce the need to toggle back and forth between the list and the details.

After an item is selected from the list, the app should remember the current ex-tent and zoom the map to the item’s extent showing the necessary level of detail for the user to analyze the item and interact with it. Upon the user returning to the list, the previous extent should be restored so the context isn’t lost.

It isn’t uncommon for the details view to require more horizontal space than the list view. It’s okay to adjust the width for each view if this mechanism is applied consistently. Consider adding a button to collapse the panel. Place the button at the vertical center so that it overlaps the map. The button collapses the panel regardless of the current view.

EXAMPLE

The BlackSky Tasking for ArcGIS Online app provides a convenient way for users to get up-to-date satellite imagery delivered in as little as 90 minutes. After the area of interest is specified, the app tasks a satellite to capture new imagery at the earliest available possibility. After successful collection, the imagery is ready to be transferred to ArcGIS Online. The order history section gives users the opportunity to review details of past and current orders. When a record is selected from the list on the left side, the app follows the list and details pattern to show more details while simultaneously zooming the map to the extent of the selected record. Depending on the delivery status, users may be offered additional actions, such as retasking the satellite or accepting the order to be moved to their ArcGIS Online organization. Closing the details view returns to the list and zooms the map back to the previous extent.

The BlackSky Tasking app allows users to order satellite images of a specific region and have them delivered to an ArcGIS Online organization.
The BlackSky Tasking app allows users to order satellite images of a specific region and have them delivered to an ArcGIS Online organization.

Leave a Reply