How to Design the Saved Search Feature in a Web Application

Saved Search

Yesterday, I was searching people on Twitter who tweet about web applications and noticed that Twitter provides a Saved Search feature.

Basically this is how Twitter’s Saved Search feature works.

Once you are logged in you can see a search box on top right hand side. You can enter anything in it and hit the return key or click the magnifying glass icon. Once the search results display, you will get a “Save” link in the top right. Just click that link and you search term gets saved.

Saving Searches in Twitter

Now, next time wherever you place your cursor inside the search box, you will get a list of saved searches. You can just select the one you want and the search results will get displayed.

Twitter Saved Search List

Pretty neat!

It is actually a very useful feature to have in an application. Particularly in applications where the user is expected to perform searches quite often.

So, today I will talk about how to design a saved search feature for a web application. This is also a natural extension to the previous articles I wrote on Basic Search design, Advanced Search design and Faceted Search Design.

Exclusive Bonus: Get Rapid Web App Design email course. This free course will teach you how to design easy-to-use web applications in 5 simple steps. Click here to get started.

When to Provide Saved Search Feature

Saved Search feature will only be useful if you expect the users of your web application to perform searches quite often.

An example of this could be a Warehouse Management application, where the user is expected to frequently search of items in inventory or items from a particular supplier.

If you do not anticipate frequent search to be performed in your application then no need to provide this feature.

An example of this can be an Email application where users are not expected to perform searches quite often.

 

Creating Saved Searches

You can provide the actions to save the searches in either of the following two places:

  1. In Search Query Panels or
  2. In Search Results table

And if you just have a single search box in your application, you can think of implementing the saved search similar to how Twitter has done it.

 

Saved Search in Search Query Panel

Lets say you are designing a web application that captures orders raised by your customers so that you can track them and fulfill them.

One of the pages in this application shows all the orders raised by your customers that you need to fulfill.

The search query panel in your application looks something like this:

Search Query Panel

So you have some fields in which search criteria can be entered.

You can provide a Save option in the top right or at the bottom.

Save Search Action

Invoking the Save action can bring up a dialog box where the user can enter the name of the saved search and save it.

Create Saved Search Dialog-box

The saved search can later be accessed from a drop-down at the top right.

Saved Search from Dropdown

You can go a step further and let the user choose to set the saved search to execute by default. This will result in the search being executed as soon as the page loads.

Run Automatically Option

This kind of an option can be useful where the users want to just see the data they need to work on. For example, the user can create a saved search for orders that are to be fulfilled in the coming month. Now, whenever the user navigates to the page, the saved search executes immediately and the user can see all the orders pending fulfillment in the next 30 days.

You can also think of providing some saved searches right out of the box. For example say there are account managers assigned to every customer and the orders raised by customers get assigned to the respective account managers then on the Orders page you can provide a saved search which just displays the orders assigned to the account manager who is logged into the application. This way every account manager will see the orders assigned to them by default instead of them having to search for their orders.

 

Saved Search in Search Results Table

Another option is to provide the save option in the Search Results table or region, similar to how Twitter has done it.

For providing advanced options like running the saved search by default, you can bring up the same dialog we saw above.

 

Editing Saved Searches

We have looked at how to create the saved searches so far. But, what about editing them?

This might not be a common use case for all applications.

But if you want to provide a way to let the user edit an existing saved search which he has created then you can provide an action to Manage the saved searches which in turn will let the user edit the saved search.

Edit Saved Search

Here the user can edit the name of the Saved Search or change the option to run the saved search automatically.

 

Deleting Saved Searches

You will also have to think of a way to let the user delete the searches saved by them.

Twitter does it by providing a small delete icon right next to the saved search.

Delete Saved Search on Twitter

You can also think of doing the same.

And if you are using the above Manage dialog box to let the users edit the saved search then you can simply provide a delete action next to the name of the saved search as shown in the below image.

Delete Saved Search

Clicking the delete link will delete the selected saved search.

 

Final Design Considerations for Saved Searches

Always remember that most of the times saved searches are specific to the user saving them.

Meaning they cannot be accessed by other users.

If you want, you can provide a check box that the user can use to make his search visible to all the users.

Visible to All Option

But I cannot think of any cases where you might want to provide that option for regular users.

You can think of providing that option to Admin users so that they can create searches that are available to all.

Exclusive Bonus: Get Rapid Web App Design email course. This free course will teach you how to design easy-to-use web applications in 5 simple steps. Click here to get started.

I hope you have now got an idea of how saved searches can be made available in an application.

So what do you think about Saved Search feature? Do you see it as a useful feature? Let me know in the comments.

And as always please feel free to share this article with your friends.

UX Designer?

Ever Wondered How to Design Web Apps In Just 5 Steps?

Sign up for the free Rapid Web App Design Course to learn how to rapidly design web apps that people will love to use!

Leave a Comment

Your email address will not be published. Required fields are marked *