Search & Filters
The Search component is one of the most complex on
our design system. It allows the user find content by introducing a word or
a set of words into a general input field, with the option to input more
specific criteria on an Advanced Search section.
Use Cases
- As a general option in all our applications, it can be shown on the Header and will perform an overall search through the platform.
- As a more specific option, it can be located on a screen whenever a table of content is shown, allowing a Slide-out to be shown if an Advanced Search is required.
Filter
HTML
Do's & Dont's
Result Page must show the criteria
specified
After introducing the criteria and clicking/tapping the Search
button, the user will be addressed to a Results page.
It is important to show on this screen the criteria specified accordingly (our design system show this in a block of tags) aswell as a Header indicating the number of total results, and then the content (usually displayed on a Table, but this can vary depending on business needs).
It is important to show on this screen the criteria specified accordingly (our design system show this in a block of tags) aswell as a Header indicating the number of total results, and then the content (usually displayed on a Table, but this can vary depending on business needs).
Sort Results and Advanced Search
A search can be as general or as narrowed as user requires. But, as
space can be constrained sometimes, usually the option provided will
be a single input field (when performing a general search) and a set
of input fields (when the Advanced Search is shown either on a
Slide-out or on the main area of the screen).
Also, when on the Results page, the user must have a way to filter the content (see Table component page) for a better navigation.
Also, when on the Results page, the user must have a way to filter the content (see Table component page) for a better navigation.
Avoid lack of feedback on blank pages
Even if the search has delivered no results, always show a response
to the user's request. Having a blank page as result of a search can
be confusing to the user.
For giving proper feedback on this scenario, you can use the Empty State component, as explained on this same Library.
For giving proper feedback on this scenario, you can use the Empty State component, as explained on this same Library.
Alternative and Related components
