Search and edit

WHAT

The search and edit pattern helps users find features that need to be updated or modified quickly. The typical use of search is to find an item and display its location and attribute values but users can also perform a search for an item so they can edit or even delete it.

WHY

Discoverability is the number one need for many single-purpose apps. Browsing through lists of data may work well for small amounts of data, but as datasets grow larger in volume, finding specific content quickly and reliably becomes critical for the UX. Apps that manage large amounts of data therefore require a search to find items quickly. Viewing the selected search result item is the dominant driver for a search in most cases, but providing a button to edit the item helps streamline the editing process.

WHEN

Single-purpose apps use search and edit to find features, objects, or records so they can be updated quickly. Users can be operators receiving phone calls from customers, subscribers requesting updates to their accounts, or field crews updating assignments or work orders. Using search and edit, which is a good example of a task-oriented pattern, is faster than selecting the correct layer, zooming to the area of interest, and visually identifying the feature on the map. It’s especially useful for apps that manage large or unfamiliar datasets.

HOW

Implement a federated search that displays type-ahead suggestions. Once the user selects the desired search result, the map zooms to that feature and shows the item content in an info pop-up. The content should include the name or ID, some key attributes, potentially some statistics, and an action button that reads View Details, Open for Edit, Update Record, or similar. Upon clicking this action button, the full item details open in a separate panel. Full map may choose an info panel, whereas partial map can use the content area of the side panel.

The search and edit pattern has similarities to the list and details pattern. Consider the following deviations between the two patterns:

• After selecting a search result, it can be useful to keep the results list open so that users can jump between results until the desired item is found. Alternatively, provide an easy way to recover the search by keeping the search term persistent.
• Structure the content of the info pop-up so that users can assess quickly whether the selected feature is indeed the correct one.
• If the app uses location list, consider showing the same item card in the list and in the pop-up.
• Avoid opening the item details in edit mode right away. Offer an easy way to trigger edit mode instead. Provide explicit save and cancel actions that both navigate back to the item details in view mode.
• Besides editing the item, consider alternative actions such as close, delete, transfer, attach, share, or analyze to manipulate the item.

EXAMPLE

The mock-up below shows an app for managing farmland ownership accounts. The app uses a partial map layout to show the landownership accounts in a list side by side with the accounts in a map. Users can filter the list by area (spatial filter) or account status (attribute filter) and toggle to the details of an account following the list and details pattern. The easiest way to find an account is to search by name, address, project number, or farm number. Selecting a search result zooms to the farm and opens an info pop-up with basic information about the account. At this point, the app senses that the user’s intent most likely is to modify the account, and that’s why the pop-up shows three action buttons: Edit Details, Transfer, and Close. Edit Details has the same effect as if the user had clicked on an item in the list and opens the details panel in edit mode. Transfer starts a task-oriented workflow to transfer the account to another person. Close is a drop-down list that allows users to choose from different ways to close the account, which changes the status from Active to Closed.