0

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?

mobile advanced search

gmail advanced searcj

  • Is there any reason why you don't just use the same design as gmail that you have in the screen shot? The "tabs" design you have doesn't make any sense since what you need is a form, not tabs. – Kevin Borders Jun 16 '14 at 12:20
  • The only reason is that I wanted to avoid using a form on mobile and wanted to come up with a more compact design than using drop-down menus. – Komal Waseem Jun 18 '14 at 11:05
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

Multi-faceted search concept

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.

default start position

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

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

  • Thanks for sharing that design idea! The second concept makes a lot of sense. – Komal Waseem Jun 18 '14 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.