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.

One comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s