Search Results Item

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.


Item Type  by Author  created Jan 01, 2018  last modified Jan 01, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Additional properties…
image alt
Search Results

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.


2 results
1 – 2
Item Type
 by Author
 created Jan 01, 2018
 last modified Jan 01, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Additional properties…
image alt
Item Type
 by Author
 created Jan 01, 2018
 last modified Jan 01, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Additional properties…
image alt
Search Filters

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

CONSTRAINTS
Filter by Keywords
Filter by Choice(s) with Filterable Options
Filter by Choice(s) with Paginated Options
2 results
1 – 2
Item Type
 by Author
 created Jan 01, 2018
 last modified Jan 01, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Additional properties…
image alt
Item Type
 by Author
 created Jan 01, 2018
 last modified Jan 01, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Additional properties…
image alt