The UI And UX Design Of The Advanced Search

This week the new “Advanced search” feature in Bookmark Ninja went live. Before its release users could run only an “exact phrase” search. With the new “Advanced search” they can also set options like “search all of the words” or “search any of the words”.

What was really interesting that the server side coding was not a big deal, but designing the client side UI took several days.

I saw many implementations of the advanced search in different apps, but I didn’t like really them. I wanted to design something different, which has a cleaner UI and is easier to use.

Finally I came up with the following:

• The Search button launches an “exact phrase” search by default.
• There is a down arrow next to the Search button, if you click on it a menu pops up with the 3 different search modes.
• If you click on one of the search modes the search will start immediately with the selected mode, and the function of the search button is also changed to the selected mode.

It’s that simple. It has all the functionalities of the advanced search with a very minimal, clean UI.