How to design a complex search interface
Designing a search interface for multiple databases or categories.
From time to time I have designed search interfaces and the user experience when searching. Anyone who has ever worked with search options and inputs knows how time-consuming it can be to design a user-friendly solution.
When working with lots of data, maybe multiple databases it can be difficult to visualize where the user is searching, and how they can change the database or category.
Yes, you can always implement some kind of advanced search but if the user is searching among huge amounts of data or in different databases the “quick-search” needs to be designed according to their needs. You do not want the users to have to use the advanced search to get a useful search result. Otherwise, the risk is they will not visit your website again.
A few weeks ago I needed to design a search input that has two backends, two databases. And the user must be able to choose which one they will use. It must also be very clear that they are using one database or the other. I had some ideas on how to do this but I wanted to take a look at different search interfaces and perhaps get inspired.
How do Amazon and eBay do it?
I was a bit curious how giants like eBay and Amazon designed this. Their users need to search among huge amounts of data so they should have a great design.
Looking at eBay and Amazon we can see that their solution is quite similar. Both sites have a drop-down where the user can choose the category and search. By selecting the search category the user will get fewer and more relevant results.
On the image above you can see that “Books” is selected as a category. They have chosen not to use a placeholder text which is usually the way to do it. It helps the user see what can be searched and describes the action of the input. Instead, if the user hovers above the dropdown the text “Seach in” appears. Good information but hidden. For more about best practice for the search input see Best UX practices for search inputs.
eBay has a similar design but with some differences. On the image below you can see that “Books” is selected in the dropdown as a category. But the placeholder text says “Seach for anything” which I find a bit confusing. Will the search results will show books or anything related to the search word?
Also, the purpose of the dropdown on the left side of the search input, “Seach by category” is unclear. Does it have the same function as the right side dropdown where I have selected “Books”? Why have the same functionality at two different places? It might be a difference but it is unclear to me.
I must say I was a bit disappointed when I looked closer at the search interface at eBay and Amazon. I expected better user experience, less confusion. Expected them to design a bit more by the book, following the best practices for example Jakob Nielsen’s 10 heuristics. The part about error prevention could be implemented better, designing carefully to help prevent problems from occurring. Eliminating error-prone conditions. For more information check out “10 usability heuristics for UI design”.
A design that helps prevents error could look something like this. A category dropdown with clear feedback in the placeholder text.
Only two options
As I mentioned, I have been designing a search interface with two different databases in the backend. The users, in this case, administrative personnel, could choose where to search dependent on the kind of information they needed.
Using a dropdown with only two options is not really good or common practice UX so I figured I would use some kind of toggle. Something like this.
Toggle option 1
Toggle option 2
Do you have any other ideas?