FIlter and searchdes

ya-bo-ng · September 19, 2019, 9:21am

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?

karlos · September 20, 2019, 9:30am

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

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

Global Filtering - Filter by tags or search by keyword

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

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

Clicking either on the search icon or persistent search field should result in a cursor with suggestions dropdown.
As the user types, the suggestions and filterable categories are filters to matching results
Filtering and plain text search results in a label being added to the search field with a remove action.
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:

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.

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

AWS
EC2 Console - Instance Filtering