What is advanced Search?
Search is a way to find the information you need from a huge amount of content. A base search is a single parameter (usually a name) used to find an item. Advanced search is a way to find the contents of a large list of items by specifying criteria that contain multiple parameters.
Let’s take a look at some examples and extract best practices that will help you design simple and effective user experiences and perform advanced search when designing your product.
How to conduct advanced search?
The advanced search option is usually located near the basic search box on the user interface, making it easy for the user to find.
User-defined search filters are applied to big data to narrow it down. Create filters by adding different parameters. For example, to search for a list of content, parameters can be name, ID, type, status, date created, author, and so on. The user selects the parameter and defines its value. A parameter can have a set of values to choose from. For example, the type can be image, document, PDF, etc.
Multiple parameters defined for a particular standard constitute filters. Users can define and save filters for later use. When a search is performed, results are displayed, which the user can view and further narrow down.
This is how advanced search works.
Here are some examples and best practices for defining a simple and intuitive user experience for an advanced search user interface.
How do I add search parameters
Search parameters and parameter values can be displayed in different ways.
1. All parameters available on the front-end user interface
On the advanced search page, all available parameters are displayed on the front user interface. You do not need to explicitly add parameters. He only needs to select values based on the desired parameters. This is called faceted search.
The Microsoft Jobs page displays search parameters in the left panel. By default, all parameters are collapsed, and the user can expand them one by one and select values.
Microsoft Jobs page displays search parameters (dimensions) in the left panel
Analysis:
A. Displaying all parameters on the front UI is a user-friendly way for users to scan them easily.
B. Applies to a lot of content.
C. The only drawback is that you need enough space to display all the parameters, and sometimes it can be confusing to the user interface.
2. Use common parameters on the front-end user interface
This method displays common search parameters on the front-end user interface. Parameters are displayed in the drop-down menu. You can select desired parameters from the drop-down menu.
Repeat the same steps to add parameters each time.
Jira displays common parameters on the user interface, and users can add more parameters from the available list.
Jira displays common search parameters at the top
Clicking the more option displays a menu of available parameters that you can add to your search criteria. Each time the user wants to add a parameter, he goes to “More” and selects the desired option from the list.
Clicking More displays a menu listing the available parameters
Linkedin displays detailed parameters in the Extension panel.
Linkedin displays the extension panel and lists all parameters
EBay displays detailed parameters in a dialog box.
EBay uses a dialog box to list all the parameters
Analysis:
A. This approach works in cases where most common parameters are used to perform the search. Users no longer worry about unnecessary details.
B. Displaying only a few parameters on the user interface requires less space and therefore less clutter on the user interface.
C. Each user needs to click more times to add parameters.
D. It is not good for complex content.
How to select parameter values
There are different ways to display values based on parameters. You can choose the approach that best suits your current environment and requirements.
1. The input box
If the user wants to enter parameters, a simple text box is displayed.
Twitter displays a search form that defines search criteria with parameter input boxes so that the user can enter the desired values.
Twitter Advanced search form
Analysis:
A. Use the input box when there is no defined value for a parameter.
B. Placeholder text on the type and format of input required is helpful to the user.
C. If the input box can contain more than one value, it should be clearly indicated to the user. For example, help text such as “Add multiple values separated by commas” is useful.
2. Multiple boxes are displayed
If the user can select multiple options for the selected parameter, a list of multiple checkboxes is displayed. This checkbox list can be provided as a separate list or encapsulated in a drop-down menu to save space.
When the user expands the parameter name, the Microsoft Job search page displays the available options for the parameter. In addition, you can see in the figure below that the input box can be used to search within a value.
On the Microsoft Job search page, the search parameter values are displayed in a multi-box list
Linkedin Job search displays options for selected parameters in a drop-down menu in the form of a multi-box list.
Linkedin search parameters display values as a drop-down menu of multi-box lists
Analysis:
A. If the user must choose from more than one option, a checkbox list is a good choice.
B. Checkbox list is a user-friendly control because it provides a clear experience of selecting and deselecting values.
C. The default state should be unchecked because it is more convenient for users to select the desired option rather than uncheck what they do not want.
D. Providing a drop-down list of multiple boxes saves space but requires more clicks. In addition, displaying multiple selected options in the drop-down box is a challenge.
3. The hyperlinks
Few search parameters require a single input for a given list of values. Hyperlinks are used for this purpose.
Because hyperlinks have multiple levels, sometimes only the current level is displayed on the user interface.
Amazon uses a parent hyperlink method that is selectively hidden. Department is the primary level link that displays the list of departments. When a user selects a department, Amazon hides links to other departments. This means that the user can now only focus on the details of the selected department.
Amazon search displays departments as hyperlinks in the left panel
Select department links to show only sublinks and hide other departments
But eBay does not hide anything, and all links in the hierarchy remain visible and accessible, whether or not links are selected.
All categories in any level of eBay search remain in the left panel, regardless of the selected category
Analysis:
A. Hyperlinks are used to perform immediate searches, and users can view the results without selecting the “Query” button.
B. The selected hyperlinks should be displayed as selected so that users can easily distinguish them from other hyperlinks.
C. When selecting a link from a multi-level list, it is best to display only the current level in the hierarchy. Displaying all levels creates additional confusion when the user only wants to work at one level.
4. Radio button list
Radio buttons can also be used to display values when the user must select a value for a parameter.
EBay shows radio options in search and in the advanced search form where users can select a single option for a parameter.
EBay: Radio options are available and the user can only select one value for the parameter
EBay: The Advanced search dialog displays parameter values as radio buttons
Linkedin uses the same approach when metrics require a single selection.
Linkedin: Parameter values in the drop-down menu are displayed as radio buttons
Analysis:
A. The radio button can be used when the user must explicitly perform the search after making a selection. Otherwise, hyperlinking is a better way to display results at run time.
5. Visual ICONS
Visual representations such as images, ICONS, or color boxes are used as values for specific types of parameters.
Customer reviews are displayed by Amazon as star ICONS.
Amazon: Iconic customer reviews
EBay provides color names for color selections in search forms.
EBay: Color values in text form
But Amazon does show visual color boxes for color selection.
Amazon: The color list is displayed as a color box
Analysis:
A. Vision provides a good and attractive way of presenting information. If the search parameter contains a visual best understood value
B. Using them would be a best practice. For example, colors should be given visually, not by name.
C. Providing tooltips, ICONS, and visuals to make it easier to understand is a good way to do this.
D. Standard ICONS and visuals need to be used where appropriate so that users can easily associate them.
6. The slider
A slider can be used when the user must select values from a range.
Mango uses a slider to display price ranges that users can drag buttons to select.
The Mango slider shows a selection of prices
Analysis:
A. The slider can quickly understand the available range and selected values.
B. When the start and end values are known, the slider bar should be used.
C. Touch devices are more user-friendly because precise values are difficult to select with a mouse.
Three, the number of values to display
Another important thing is to determine the number of display values for the parameters so that the user can choose from them.
EBay displays 7-8 items for each parameter. Selecting the View All option next to each parameter displays all the values in the dialog box.
EBay: The view All option for each parameter enables you to view the complete list in the dialog box
Amazon uses the same approach, and the search parameters are displayed as 8-10 values. You can see the remaining values when you select the View More option. But if the count is very large, all values are displayed on a separate page.
Amazon: The View More and View Less options can be used to show and hide all values
All values displayed on the side slider of the Microsoft Job page. For easy selection, they provide a search box at the top of each parameter.
Microsoft Recruitment: All values can be scrolled in search
Analysis:
A. Because values are displayed as lists, radio options, and hyperlinks. The general guideline for displaying the number of options in a list applies here.
B. The best method is to display all values below 8. If greater than 8, use only the “More” option to display common values. When the number of items is still exceeded, provide the remaining items in the extended list or dialog box.
C. Sliding all items in the same location makes it difficult for the user to find the desired value.
D. Displaying the count of available items with values is a good way to provide the user with the number of items to search for.
How to perform the search
The search can be performed in any of the following ways:
1. Click Search or OK, or press Enter
2. Run when the user changes parameters.
Both Amazon and eBay perform searches after the user sets any given option.
Linkedin searches are performed when users set parameters and click the Apply button.
Linkedin: Perform search requirements press the “Apply” button after setting parameters
Analysis:
A. Performing a search at run time provides a pleasant and simple experience for the user, with results visible after each click.
B. When you press the button, you need to set all parameters. Click the button to view the search result. If the user wants to see the results after each change, the button must be clicked each time the parameter is changed.
C. In addition, if the user wants to go back to the previous state, he must restore all changes, and he may have forgotten the defined options.
How to display search results
When a search is performed, the content is displayed according to a defined filter. There are several factors to consider when displaying search results.
1. Location of search results
The search results are displayed on the same page that defined the filter, or a new page is opened to display the results.
Twitter and Linkedin follow the tradition of displaying search results on separate pages.
Twitter displays search parameters on a separate screen. Clicking the Apply button opens the search results
Linkedin lists all search parameters displayed in the extended area. Clicking the Apply button closes the results displayed in this area
Microsoft Jobs provides a parameter panel for search results. When the results are loaded, only the results area is automatically refreshed.
Microsoft Jobs: Search results load on the same page as user-defined parameters
Analysis:
A. When a new page is opened to display search results, the user’s environment will change and it will feel like a new content is opened.
B. If the search parameters are displayed on a separate screen or dialog box, they must be returned whenever the user wants to change the parameters.
C. It is a good idea to simply refresh the results area as Microsoft Jobs because the user will have a strong sense that he is working on the same page.
2. Search progress
The search operation takes some time to display the results. Displays feedback on the progress of the search function while waiting.
When the results are loaded, Amazon displays the load icon in the center of the page.
Amazon: Load icon shows that search results are being loaded on the page
The Display load icon for Microsoft jobs is an indication that the search results will be displayed over a period of time.
Microsoft Recruitment: Load icon is displayed when results are generated
Analysis:
A. Load ICONS are a good way to show what is being loaded.
B. If there is a problem when loading the result, it should be communicated to the user in the form of a correct message.
3. The layout
Search results are displayed in a list or grid that applies to a site or application.
EBay displays results in a list view, or users can change the view to grid mode.
EBay: Users can switch between list and grid views to see search results
Linkedin displays search results in a split view instead of a classic view.
Linkedin: Search results are displayed in split view and classic view
Analysis:
A. Perfectly describe the layout of search items according to search item types and user needs.
4. Paging and infinite scrolling
Search results often contain large content that needs to be displayed on multiple pages. Paging or infinite scrolling is used to navigate content.
EBay and Microsoft jobs are paginated at the bottom of the results page.
EBay: Paging control of results pages
Microsoft Jobs: Paging control of results pages
Twitter uses infinite scrolling to display loaded search results when the page size exceeds.
Twitter’s search results load more results
Analysis:
A. Unlimited scrolling is best for user-generated content streams on websites and apps such as Twitter, Facebook, Pinterest, Instagram. Paging, on the other hand, is great for goal-oriented websites and apps.
B. When the user views the results from top to bottom, the page navigation may be skipped at the top. So a more user-friendly approach is to show pagination at the bottom.
5. Apply the filter list
The search results show a list of filters that were applied to generate the results. Users can remove any application’s filters and update the search results accordingly.
EBay lists all the apps’ filters at the top of its search results. The user can delete any filter he wants. Clicking the Clear All option removes all filters immediately.
EBay: All app filters are listed at the top of the search results. You can delete unnecessary filters
Linkedin displays the app’s filters at the top. Since the user interface at the front of all filters is not visible, the Clear option shows the number of applied filters. When you click the All Filters option, the details for applying filters are displayed in the Extension panel.
Linkedin: A list of application filters is displayed at the top of the page. To see the filters for all applications, the user clicks the All Filters option
Analysis:
A. All application filters should be listed on the results page so that users can easily associate them with the results.
B. If the user must go to another page to view the application filter, the user is disconnected.
6. Result count
The result count displays the number of items generated as a search result.
The Microsoft Jobs page displays the number of results at the top of the page
Analysis:
A. Result counts are a useful piece of information that helps users understand the number of results generated for application filters and see the number of navigations they require.
7. Blank results
If the search results do not contain any items, they need to be handled gracefully.
EBay displays a message with blank results. But the items he showed were closer to standard search criteria.
EBay: no match found
Amazon displays a message with an empty result. Everything is displayed in the results area, indicating that no filters have been applied.
Amazon: No match was found
Linkedin, unable to find results, displays a command for users to double-check the standard definition.
Linkedin: no match found
Microsoft recruitment displays zero result messages. It does not display any list of suggestions or instructions to the user.
Microsoft Recruitment: no match found
Analysis:
A. Provide users with suggestions for responding to blank search results.
B. eBay seems to be the best example. It gives a standard result that matches several defined parameters. It is easier for users to change one or more parameters to see the updated results.
Filter search results
Search results often contain a lot of user information. It is better to provide some logical filters that users can apply to the results.
Sort options help the user sort the results in the desired order.
Users can also change the way the results are viewed in the preferred layout.
EBay offers sorting, changing views, filtering and grouping options to narrow down search results.
EBay: Offers options for sorting, changing views, filtering, grouping, and more to narrow down search results
Twitter search results contain type-wise filters at the top and property-wise search filters in the left panel. These can help users further optimize their search results.
Twitter: Search results include filters and search options to optimize search results
Analysis:
A. Filters can be used to further limit the number of results.
B. But it’s not a good idea to have lots of filters on the results page, which makes searching for results difficult. Identify some logical filters that help users filter results.
How do I save and access filters
It is common practice to save an application’s search filters so that they can be used for future searches. You can also select a saved filter and make changes to create a new filter.
Search results in eBay and users click the “Save this search” option to save the filter. Save the filter with an automatically generated name based on the defined filter. The filled heart icon and “Saved” text show the saved filter.
EBay: Users can save defined parameters using the “Save this search” option
EBay: Save the defined parameters
Users can access this saved filter by going to the “My eBay” setting. Filter lists provide a number of functions that users can apply to filters: sorting, editing search filters, viewing results.
EBay: Can execute and update saved searches on request
Jira provides a “Save as” option on the search page, which the user can click to name the search filter and save. The saved filters are displayed in the left panel, and the user only needs to click the filter to execute.
You can apply different functions to the selected filters, including renaming, copying, and deleting.
Jira: Saves the filter
Jira: The saved filters are displayed in the left panel
Twitter offers a “Save filter” option in the drop-down list on the search results page. Filters are saved by default and can be accessed again by clicking the search box in the menu.
Twitter: Save the search using the options in the drop-down menu
Twitter: Displays saved filters in the search menu
Analysis:
A. The option to save the search should be provided on the advanced search page so that users can define and save the filter.
B. Users should have easy access to filters and perform different functions on them, such as execute, edit, or delete.
How to exit the search mode
Provide an exit option to return the user to the screen where the search is launched.
EBay, Microsoft Recruiting, and Linkedin all offer a “clear” option to clear all app filters, which means exiting search mode.
Analysis:
A. The advanced search page should display simple and easy-to-understand options
Advanced mode for technical users
Query search is suitable for technical users.
Users can write complex SQL queries (structured Query Language) in the search box.
Microsoft Outlook provides query search. But when the user enters query parameters, he doesn’t see any help.
Microsoft Outlook provides query search
Jira is a great example of an advanced search option that provides instant help.
Jira provides immediate help when users write search queries
Jira provides immediate help when users write search queries
Jira provides immediate help when users write search queries
Analysis:
A. Users need to provide correct and immediate help when compiling queries.
B. Runtime evaluation of the query format is more helpful than explicit execution by the user.
conclusion
Providing a simplified experience for performing advanced searches is a challenge. This can be achieved by following best practices when designing advanced search screens.
Original address:
https://uxplanet.org/how-to-improve-advanced-search-ux-450df698004c
Saadia Minhas (Ux Design Enthusiast)
Translator: SKYUI_HOME
The UI homepage: http://i.ui.cn/ucenter/990700.html