Results pane UX pattern

The result pane shows the results of the Search & filter pane.

Pane header

The pane header should have a “New” primary button, on the right, to create a new record.  This button could also have an ellipsis icon to access the pane menu.

On the left, a search icon with a left arrow should be displayed, allowing users to hide/show the Search & filter pane.

The pane title should have the following format: {Record type icon} {Record type, plural} {Record quantity} + total

Content

Search results should be displayed using the multi-column list component.

No result list by default

For apps that deal with private information (e.g. Users app) or are search focused (e.g. Codex app), no result list should be displayed by default when opening an app. Instead, the result pane should display the following message: “{Arrow pointing toward the search & filter pane} Choose a filter or enter a search query to show results.”

Result list visible by default

For apps that deal with personal content (data created by you or your team), a result list should be displayed by default when opening an app.

Start a query

When users start a query in the Search & filter pane, the result list should be refound accordingly.

When there are no results found, the following message should be displayed: “{Search icon} No results found for “{keyword}”. Please check your spelling and filters.

Performing actions

The list menu, located under the pane menu dropdown, allows users to perform actions on items and customize the list.

End of content

A fleuron should be used to marks the end of the result list.