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.
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.
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.
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:
- In Search Query Panels or
- 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:
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.
Invoking the Save action can bring up a dialog box where the user can enter the name of the saved search and save it.
The saved search can later be accessed from a drop-down at the top right.
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.
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.
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.
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.
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.
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.
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.
