Search is a method of finding the required information from large content. Basic search is based on a single parameter (usually name) that is used to find an item. Advanced search is a way to find something from a large list of items by specifying criteria including multiple parameters.
Let’s have a look at a few examples and extract best practices that will help you to design a simple and efficient user experience to perform an advanced search while designing your products.
An advanced search option is usually placed somewhere closer to the basic search box on UI so that the user can easily find and go towards it.
A user defines a search filter and applies it to large data to narrows down its scope. A filter is created by adding different parameters. For example, to search a list of contents, parameters can be Name, ID, Type, Status, Creation Date, Author, etc. The user selects a parameter and defines its value. A parameter can have a set of values for selection, like Type can be Image, Docx, PDF, etc. Multiple parameters defined for specific criteria make a filter. Users can define and save a filter for later use. When the search is executed, results display and users can see and further narrow down these results.
This is how advanced search works.
The below section presents a few examples and best practices that can be used to define a simple and intuitive user experience for advanced search UI.
I. How to add search parameters
II. How to select parameter values
III. How many values need to display
IV. How to execute a search
V. How to display search results
VI. Filtering and searching in results
VII. How to save and access filters
VIII. How to exit search mode
IX. Advanced mode for a technical user
Search parameters and their values can be displayed in different ways.
1. All parameters available on front UI
The advanced search page displays all available parameters on front UI and the user does not have to add parameters explicitly. He can just select values against the required parameters. This is called faceted search.
Microsoft careers page displays search parameters in the left panel. By default, all parameters are in a collapsed state and the user can expand them one by one and select values.
Microsoft careers page displays search parameters (facets) in the left panel.
2. Commonly used parameters available on front UI
This approach displays commonly used search parameters on front UI. Parameters are displayed in a drop-down menu and the user can select required parameters from menu.
The same steps are repeated each time to add a parameter.
Jira displays commonly used parameters on UI and the user has the option to add more parameters from the available list.
Jira displays commonly used search parameters on top.
Clicking ‘More’ option displays a menu listing available parameters that can be added to search criteria. Each time a user wants to add a parameter, he goes to ‘More’ and selects the required option from the list.
Clicking ‘More’ displays a menu listing available parameters.
Linkedin displays detailed parameters in an extended panel.
Linkedin displays an extended panel to list all parameters.
eBay displays detailed parameters in a dialog box.
eBay uses a dialog box to list all parameters.
There are different ways to display the values against a parameter. You can select an approach that best fits your current context and requirements.
1. Input box
If the user is supposed to enter an input against a parameter, then a simple text box is displayed.
Twitter displays a search form to define search criteria that contain input boxes against parameters so that the user can enter desired values.
Twitter advanced search form
2. Checkbox list
If the user can select multiple options for a selected parameter, then checkbox list displays. This checkbox list can be provided as a separate list, or it can be encapsulated within a drop-down menu to save the space.
Microsoft careers search page displays available options of a parameter when the user expands the parameter name. Also, you can see in the image below that an input box is available to search within values
On the Microsoft careers search page, search parameter values are displayed in the checkbox list.
Linkedin job search displays options for a selected parameter inside the drop-down menu in the form of a checkbox list.
Few search parameters require a single input from a given list of values. Hyperlinks are used for this purpose.
Since hyperlinks can have multiple hierarchical levels, sometimes only the current level is shown on UI.
Amazon uses the approach of hiding the parent level hyperlinks for a selected link. ‘Departments’ is their main level link that displays a list of departments. When the user selects a department, Amazon hides links to other departments. It means the user can now focus only on the selected department’s details.
Amazon search displays Departments as hyperlinks in the left panel.
Selecting a Department link displays the sub-links only and hides other Departments.
Whereas eBay does not hide anything and all links in hierarchy remain visible and accessible whether a link is selected or not.
All Categories remain available in the left panel irrespective of a selected Category at any level in the eBay search.
4. Radio button list
Radio buttons are also used to display values when the user has to select one value for a parameter.
eBay displays radio options in search facets as well as in advanced search form where users can select a single option for a parameter.
eBay: Radio options are available where the user can select only one value for a parameter.
eBay: Advanced search dialog displays parameter values as radio buttons.
Linkedin also uses the same approach when a single selection is required for a parameter.
Linkedin: Parameter values inside the drop-down menu display as radio buttons.
Radio buttons are good to use when a user has to execute search explicitly after making selections. Otherwise, hyperlinks are a better approach to display results on run-time.
5. Visual icons
Visual representations like image, icons or color boxes are used as values for specific types of parameters.
Customer reviews are shown as star icons by Amazon.
Amazon: Customer review in iconic form.
eBay provides color names for color selection in the search form.
eBay: Color values in textual form.
Whereas, Amazon displays visual color boxes for color selection.
Amazon: The color list is displayed as color boxes.
A slider is used when the user has to select a value from within a range.
Mango uses the slider to display price range and the user can drag the knob to make a selection.
Mango displays slider for selection of price.
Another important thing is to decide how many values should display for a parameter so that the user can make a selection.
eBay displays 7–8 items for each parameter. Selecting ‘see all’ option next to each parameter displays all values inside a dialog box.
eBay: An option ‘see all’ is provided along with each parameter to view the complete list in the dialog box.
Amazon uses the same approach and displays 8–10 values for a parameter in search facets. Remaining values are visible on selecting the ‘See more’ option. However, if value count is very large, then all values display on a separate page.
Amazon: ‘See more’ and ‘See Less’ options are available to show and hide all values.
Microsoft careers page displays all values in the facet area along with a scrollbar. For making selection convenient, they have provided a Search box on top of each parameter.
Microsoft careers: All values can be scrolled in search facet.
Search can be executed using either of the ways: (i) clicking a Search or OK button, or hitting Enter key, (ii) on run-time when the user changes a parameter.
Amazon and eBay, both execute search just after the user sets any of the given options.
Linkedin executes a search when the user hits the Apply button after settings parameters.
Linkedin: Executing a search requires a hit to the Apply button after settings parameters.
When the search is executed, contents display as per defined filters. There are a few considerations that should be made while displaying search results.
1. Placement of search results
Search results are displayed either on the same page where filters are defined, or a new page is opened to show the results.
Twitter and Linkedin follow the convention of displaying search results on a separate page.
Twitter displays search parameters on a separate screen. Clicking the Apply button will open search results.
Linkedin displays an extended area where all search parameters are listed. Clicking Apply button will close this area and displays results.
Microsoft careers provide the search results along with the parameters panel. Only the results area is refreshed itself when results are loading.
Microsoft Careers: Search results are loaded on the same page where the user is defining parameters.
2. Search progress
Search operation takes some time to display results. During this waiting state, feedback about progress of the search function is displayed.
Amazon displays a loading icon in the center of the page when results are loading.
Amazon: Loading icon shows that search results are loading on the page.
Microsoft careers display a loading icon to provide an indication that search results are going to display in a while.
Microsoft careers: Loading icon displays when results are generating.
Search results display in the form of a list or grid whatever is suitable for a site or application.
eBay displays results in the list view, however, the user can change view to grid mode if he wants.
eBay: User can switch between List and Grid view to see search results.
Linkedin changes its default view from Classic to Split to display search results.
Linkedin: Search results are displayed in Split and Classic views.
4. Pagination vs infinite scroll
Search results usually contain large content that requires to display on multiple pages. Pagination or infinite scroll is used to navigate contents.
eBay and Microsoft career display pagination at the bottom of the results page.
eBay: Pagination control on the results page.
Microsoft Careers: Pagination control on results page.
Twitter displays infinite scroll to load search results when they exceed a page size.
More results are loading in Twitter search results.
5. List of applied filters
Search results display a list of filters that are applied to produce results. The user is able to remove any of the applied filters and search results are updated accordingly.
eBay lists all applied filters on top of search results. Users can remove any filter he wants. Clicking the ‘Clear All’ option will remove all filters at once.
eBay: All applied filters are listed on top of search results. User can remove filters that are no longer required.
Linkedin displays applied filters on top. Since all filters are not visible on front UI, the ‘Clear’ option shows the number of applied filters. Details of applied filters display in an extended panel when the ‘All filter’ option is clicked.
Linkedin: List of applied filters display on top of the page. To see all applied filters, user can click ‘All filter’ option.
6. Result count
Result count displays the number of items produced as a search result.
Microsoft Careers page displays the number of results on top of the page.
7. Empty results
If the search result contains no items, this needs to be handled gracefully.
eBay displays a message of an empty result. However, they display items that are closer to the defined search criteria.
eBay: No matching result found.
Amazon displays a message of an empty result. All contents display in results area that shows no filters are applied.
Amazon: No matching results found.
Linkedin displays an instruction for the user to check the defined criteria once more since no results are found.
Linkedin: No matching results found.
Microsoft careers displays zero-result message. It is not showing any suggested list or instructions for the user.
Microsoft Careers: No matching results found.
VI. Filtering and searching in results
Search results usually contain a lot of information for the user. It is good to provide a few logical filters that the user can apply to results.
The sorting option helps the user to sort the results in the desired order.
Also, the user can change the view to see the results in a preferred layout.
eBay provides Sorting, Change view, Filtering and Grouping options to narrow down the search results.
eBay: Options like Sorting, Change view, Filtering, Grouping are provided to narrow down the search results.
Twitter search results contain type-wise filters on top and attribute wise search filters in the left panel. These help users to further refine search results.
Twitter: Search results contain filters and search options to refine search results.
It is a common practice to save applied search filters so that they can be used for later searches. You can also select a saved filter and make changes to create a new one.
eBay provides an option ‘Save this search’ along with results and the user clicks on it to save this filter. A filter is saved using an auto-generated name based on defined filters. The filled heart icon and ‘Saved’ text show that filter is saved.
eBay: Users can save defined parameters using the ‘Save this Search’ option on top.
eBay: Defined parameters are saved.
Users can access this saved filter by going to ‘My eBay’ settings. Filters list provides few functions that users can apply on filters: sort, edit search filter, view results.
eBay: A saved search can be executed and updated as per requirements.
Jira provides a ‘Save as’ option on the search page and the user can click on it, name the search filter and save it. The saved filters are displayed in the left panel and the user can simply click on a filter to execute it.
Different functions can be applied on a selected filter including Rename, Copy and Delete.
Jira: Saving a filter.
Jira: Saved filter displays in the left panel.
Twitter provides the ‘Save Filter’ option in a drop-down on the search result page. The filter is saved with a default name and can be accessed by again clicking the search box inside a menu.
Twitter: Search can be saved using the option in the drop-down menu.
Twitter: Saved filters display in the search menu.
An exit option is provided for the user to go back to the screen from where the search was initiated.
eBay, Microsoft careers, Linkedin all provide a ‘Clear’ option to clear all applied filters and hence search mode will be exited.
Query-based search is available for technical users. Users can write a complex SQL query in the search box.
Microsoft Outlook provides a query-based search. However, no help is visible when the user enters query parameters.
Microsoft Outlook provides a query-based search.
Microsoft Outlook provides a query-based search.
Jira is a very good example of providing advanced search options with instant help.
Jira provides instant help when user writes a search query.
Jira provides instant help when the user writes a search query.
Providing a simple experience to perform an advanced search is a challenge. This can be achieved by following the best practices while designing advanced search screens.
About the Author
Passionate about UX Design | Loves to share and learn about UX design | uxdworld.com
The article was originally published on uxplanet.org