“Search & filter” pane UX pattern
The Search & filter pane allows users to start a query.
Structure
Pane title
The pane title should be labelled as follow: “Seach & filter”.
No close icon should be found in the pane header.
Content
The first field should be the search text field.
Under it, users should have a set of filters, in accordion lists, in order to refind search result.
Behavior
When users type a query, the search button becomes a primary button and a clear X icon appears on the right side of the search field.
As users check filters, suggestions are refined in the result screen. The X action, next to each filter list, allows users to clear all filters from the list.
A “Reset all” should also appear once users start a query allowing users to quickly clear all.
