Designing Gmail advanced search for mobile?

Question

I'm trying to figure out a design for advanced search panel where a user can apply multiple search criteria.

For example, they can search for a post by keyword shared with a specific user - "testkeyword to:komal" where the to: filter further has a list of users to select from.

This is quite similar to gmail's advanced search panel on desktop browser where the user can select from drop-down menu corresponding to each of the search filters.

For mobile, I'm thinking the best approach would be using drop-down menus as well but not sure if those works well on mobile.

Could the design in the attached screenshot work where user will be allowed to select multiple tabs?

Answer 1

The control (word, from, to, type) you are trying to use is probably best thought of as a radio button set - Only one option can be selected.

Here is one idea I had. Clicking on the list of options adds a tag element in the search field which you can then add text to. This way you can add multiple search elements in a string. If the tag is clicked again it is removed from the search string. The 'X' at the end of the input field clears all elements from the search.

CONCEPT 1

The problem with this first idea is that it isn't a standard pattern and some of the elements of the search would be hidden if there a number of them.

An earlier less compact idea I had was creating a new line each time a new search element in selected. As I gather you were trying to make a compact solution this one is probably only useful in understanding the evolution of the idea.

Concept 2

It starts with the default 'all' as in 'search all' field.

As you tap on the search elements they appear as new lines

Clicking the 'X' at the end of the line will remove that element from the search.