FIlter and search

Filter and search
e.* 1. g charmstore, newjass (17), (18), transcript

    1. Clicking adds items, clicking again toggles?
    1. Added items appear in search field
    1. But you can also type: how does autocomplete work?
    1. If there’s more suggestions than you can show, how do you prioritise?
    1. Visuals: weight of headings vs items, (jaas is a wireframe, charmstore is a visual?)
    1. Typography challenge - the lozenge device makes the font inside smaller, and it can all get a bit teeny tiny…
    1. Should we distinguish between things e.g. an individual machine name, whatever you are searching for in the list, and categories and kinds of things, e.g. region, which will narrow the search but not result in a ‘direct hit’?
    1. Colon pattern like GMail? “From:”etc
    1. Compare with AWS EC2 instance search and Google cloud similar functionality
    1. How does it scale to 20,000 instances, employee names? Can it be fast enough? How to deal with latency? Different patterns for in-memory and endpoints?

Filter and search
Searching across a tabular dataset can fuzzy match the subset of the dataset or the entire dataset. For example, the search could search just name and tags and not owner or price.

Filtering generally results in a chip/marker representing the filter applied. Allowing the user to quickly remove the filter or have an additional clear all filters action.

Usage
04

Inline Filtering - Enter a string to narrow the list of available tags. Select tags to add them to the filter query
32

Global Filtering - Filter by tags or search by keyword
00

Global Filtering - Hitting enter transforms the query into a chip and the filter is applied
20

Global Filtering - Any string can be transformed into a temporary filter tag

  1. Clicking either on the search icon or persistent search field should result in a cursor with suggestions dropdown.
  2. As the user types, the suggestions and filterable categories are filters to matching results
  3. Filtering and plain text search results in a label being added to the search field with a remove action.
  4. Remove all is achieved by clicking the global search close icon

Principles
Actionable

  • Plain text search
  • Search term matches a parameter to filter the search by the following text
  • Toggle and clear filter
  • Clear search

Flexible
Buttons can vary their verb according to the item selected
Discoverable
Buttons should be visible without scrolling if your items-list is long considered placing the buttons at the top, rather than the default bottom placement.

Do
Always provide a “Clear filters” action next to the markers:
43

Use real-world language
Filters should be modelled after the actual behaviour of users.

This pattern in use - real product examples
Salesforce
Depending on your context, you will either need a linked pill or a pill option inside of a list box.
19

Shopify
Use to allow merchants to add attributes to, and remove attributes from, an object.
24

AWS
EC2 Console - Instance Filtering
02

Jira
Advanced filter/search using query language (‘JQL’)
07

ZenHub
Board search and filtering
02

Luna
Use multi-select if users can select one or more keywords in their response.
08

Myntra
The search followed by verbose filter dropdowns
14

Airbnb
11

Zenhub
17

Wordpress
21

Key Components in Vanilla this pattern uses

Molecule
Search and filter

Atoms
Search box
Contextual menu
Labels (potentially can be renamed: Chips / Markers / Tags…)

filter-search