First let’s look at a single search result. The containing
element should have the .m-results-item class.
It should contain the title of the item (.m-results-item__heading)
as well as the type (using .m-results-item__facets),
description (.m-results-item__description),
and any important properties about the item relevant to the
context usage in the application.
It’s also helpful to provide the author, creation date, and
last modified dates of the item as well as a thumbnail if
the item supports it.
Contextual actions such as selection or statistical information
such as performance or usage can be provided in the lower left,
while buttons for general actions such as edit, delete, and
the like can be included on the left.
When displaying search results, it’s recommended to also display
paging and sorting controls to allow users to navigate through the
results. In addition, controls for UI actions such as toggling
all results’ selection state can be provided.
Provide a consistent interface for users to configure
searches and filter results.
Constraints that provide the user with options such as lists
from which options to choose should try to follow the patterns
described below and provided in example further down.
A) Multiple options but fewer than a dozen
B) Multiple options of more than a dozen that users can
easily find an option via text search
C) Multiple options of more than a dozen but need a
paginated views of options for users to navigate among