I. How to add search parameters

Search parameters and their values can be displayed in different ways.

1. All parameters available on front UI

Advanced search page displays all available parameters on front UI and user does not have to add parameters explicitly. He can just select values against required parameters. This is called faceted search.

Microsoft careers page displays search parameters in left panel. By default, all parameters are in collapsed state and user can expand them one by one and select values.

Analysis:

• Displaying all parameters on front UI is a user friendly approach user can easily scan them.
• It works well for very large number of contents.
• The only disadvantage is that enough space is required to display all parameters and sometimes it creates clutter on UI.

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 user can select required parameters from menu.

Same steps are repeated each time to add a parameter.

Jira displays commonly used parameters on UI and user has the option to add more parameters from available list.

Clicking ‘More’ option displays a menu listing available parameters that can be added to search criteria. Each time user wants to add a parameter, he goes to ‘More’ and selects the required option from the list.

Linkedin displays detailed parameters in an extended panel.

eBay displays detailed parameters in a dialog box.

Analysis:

• This approach works well where most of the time common parameters are used to perform search. User is less worried about details that are not needed.
• Displaying only few parameters on UI requires less space and hence less cluttering on UI.
• It requires more clicks each time when user adds a parameter.
• Not good for very large number of contents.

II. How to select parameter values

There are different ways to display the values against a parameter. You can select an approach that best fits with your current context and requirements.

1. Input box

If 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 contains input boxes against parameters so that user can enter desired values.

Analysis:

• Input box is good to use when no defined values are available for a parameter.
• A placeholder text about type and format of the required input is helpful for user.
• If an input box can contain multiple values, it should be clearly instructed to user. For example, help text like ‘add multiple values separated by a comma’ is useful.

2. Checkbox list

If 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 user expands the parameter name. Also, you can see in the image below that an input box is available to search within values.

Linkedin job search displays options for a selected parameter inside drop-down menu in the form of a checkbox list.

Analysis:

• If user has to select from multiple options, then checkbox list is a good option.
• Checkbox list is a user friendly control as it provides a clear experience of selection and deselection of values.
• The default state should be unchecked as selecting a desired option is more convenient for users as opposed to deselecting what they don’t want.
• Providing checkbox list within a drop-down menu saves the space, but needs more clicks. Also, displaying multiple selected options in drop-down box is a challenge.

3. Hyperlinks

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 user selects a department, Amazon hides links to other departments. It means user can now focus only on the selected department’s details.

Whereas eBay does not hide anything and all links in hierarchy remain visible and accessible whether a link is selected or not.

Analysis:

• Hyperlinks are used to execute search immediately and user does not have to select a GO button to see the results.
• The selected hyperlink should display in selected state so user can easily differentiate them from others.
• It is better to display only the current level in hierarchy when a link is selected from a muli-level list. Displaying all levels when user wants to work only at one level creates extra clutter.

4. Radio button list

Radio buttons are also used to display values when user has to select one value for a parameter.

eBay displays radio options in search facets as well as in advanced search form where user can select a single option for a parameter.

Linkedin also uses the same approach when single selection is required for a parameter.

Analysis:

• Radio buttons are good to use when user has to execute search explicitly after making selections. Otherwise hyperlinks are better approach to display results on run-time.

5. Visual icons

Visual representation like image, icons or color boxes are used as values for specific type of parameters.

Customer reviews are shown as star icons by Amazon.

eBay provides color names for color selection in search form.

Whereas, Amazon displays visual color boxes for color selection.

Analysis:

• Visuals provide a good and appealing way to present information. If search parameter contains values that are best understood using visuals, then it is a good practice to use them. For example, colors should be given in visual form instead of names.
• Providing tooltips along with icons/visuals to make them more understandable is a good approach.
• Standard icons/visuals need to use where applicable, so that user can relate them easily.

6. Slider

Slider is used when user have to select a value from within a range.

Mango uses slider to display price range and user can drag the knob to make a selection.

Analysis:

• A slider provides a quick idea of available range and selected value.
• Slider should be used when start and end values are known.
• More user-friendly for a touch devices, as selecting a precised value is difficult using mouse.

III. How many values need to display

Another important thing is to decide how many values should display for a parameter so that 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.

Amazon uses the same approach and displays 8–10 values for a parameter in search facets. Remaining values are visible on selecting ‘See more’ option. However, if value count is very large, then all values display on a separate page.

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.

Analysis:

• Since values display in the form of a list — checklist, radio options, hyperlinks — the common guidelines to display number of options in a list are applicable here.
• A good approach is to display all values when they are less than 8. If values are more than 8, then display only common values with a More option. When number of item still exceeds, provide remaining items in an extended list or a dialog box.
• Using scroll to display all items at the same place may create difficulty for user to find the required value.
• Displaying a count of available items with values is a good way to provide user an idea of number of items from which he is going to perform search.

IV. How to execute search

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 user changes a parameter.

Amazon and eBay, both executes search just after user sets any of the given options.

Linkedin executes search when user hits Apply button after settings parameters.

Analysis:

• Executing search on run-time provides a simple and enjoyable experience to user where he can see the results just after each click.
• Executing search on hitting a button requires user to set all parameters and then click the button to see results. If user wants to see results after each change, he has to click the button each time he makes changes in parameters.
• Also, if user wants to go back to previous results, he has to revert back all changes and there is much chance that he has already forgotten the defined options.

V. How to display search results

When search is executed, contents display as per defined filters. There are 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.

Microsoft careers provides the search results along with the parameters panel. Only results area is refreshed itself when results are loading.

Analysis:

• When new page opens to display search results, the context of user changes and it feels like something new is opened.
• If search parameters display on a separate screen or dialog, user has to go back each time he wants to make a change in parameters.
• Refreshing only results area as being done by Microsoft careers is a good approach as user gets a strong feeling that he is working on the same page.

2. Search progress

Search operation takes some time to display results. During this waiting state, a feedback about progress of search function is displayed.

Amazon displays a loading icon in center of page when results are loading.

Microsoft careers displays loading icon to provide an indication that search results are going to display in a while.

Analysis:

• Loading icon is a good way to show that content is being loaded.
• If something goes wrong while loading results, it should be conveyed to user in the form of a proper message.

3. Layout

Search results display in the form of a list or grid whatever is suitable for a site or application.

eBay displays results in list view, however user can change view to grid mode if he wants.

Linkedin changes their default view from Classic to Split to display search results.

Analysis:

• The desired layout is one that best describes the searched items as per their type and user requirements.

4. Pagination vs infinite scroll

Search results usually contain large contents that require to display on multiple pages. Pagination or infinite scroll is used to navigate contents.

eBay and Microsoft careers display pagination at bottom of results page.

Twitter displays infinite scroll to load search results when they exceed a page size.

Analysis:

• Infinite scroll is best suited for sites and apps that are streams of user-generated content (Twitter, Facebook, Pinterest, Instagram). Pagination, on the other hand, is well-suited for goal-oriented sites and apps.
• While scanning through results, user goes from top to bottom, so there is a chance of skipping page navigation at the top. A more user-friendly approach is to display pagination at bottom.

5. List of applied filters

Search results display list of filters that are applied to produce results. 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. User can remove any filter he wants. Clicking ‘Clear All’ option will remove all filters at once.

Linkedin displays applied filters on top. Since all filters are not visible on front UI, ‘Clear’ option shows the number of applied filters. Details of applied filters display in an extended panel when ‘All filter’ option is clicked.

Analysis:

• All applied filters should be listed on results page so that user can easily relate them with results.
• If user has to go to the other page to see applied filters, it provides a disconnected behavior to user.

6. Result count

Result count displays the number of items produced as search result.

Analysis:

• Result count is a useful information that helps user to get an idea of number of results generated for applied filters, and how much navigation is required to see them.

7. Empty results

If search result contains no items, this needs to be handled gracefully.

eBay displays a message of empty result. However, they display items that are closer to the defined search criteria.

Amazon displays message of empty result. All contents display in results area that shows no filters are applied.

Linkedin displays an instruction for user to check the defined criteria once more since no results are found.

Microsoft careers displays zero result message. It is not showing any suggested list or instructions for user.

Analysis:

• A good approach is to give user some suggestions in response to an empty search result.
• The approach from eBay seems the best from the given examples. It is giving results of a criteria which matched few of the defined parameters. It is easier for user to change one or more parameters and see the updated results.

VI. Filtering and searching in results

Search results usually contain a lot of information for user. It is good to provide few logical filters that user can apply on results.

Sorting option helps user to sort the results in the desired order.

Also, user can change view to see the results in a preferred layout.

eBay provides Sorting, Change view, Filtering and Grouping options to narrow down the search results.

Twitter search results contain type wise filters on top and attribute wise search filters in left panel. These help user to further refine search results.

Analysis:

• Filters can be used to further limit the number of results.
• However, it is not a good idea to provide a lot of filters on result page that overwhelm user with a feeling of searching within search results. Decide on few logical filters that help user to filter results.

VII. How to save and access filters

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 user clicks on it to save this filter. Filter is saved using an auto-generated name based on defined filters. The filled heart icon and ‘Saved’ text shows that filter is saved.

User can access this saved filter by going to ‘My Ebay’ settings. Filters list provides few functions that user can apply on filters: sort, edit search filter, view results.

Jira provides a ‘Save as’ option on search page and user can click on it, name the search filter and save it. The saved filters are displayed in left panel and user can simply click on a filter to execute it.

Different functions can be applied on a selected filter including Rename, Copy and Delete.

Twitter provides the ‘Save Filter’ option in a drop-down on search result page. Filter is saved with a default name and can be accessed by again clicking the search box inside a menu.

Analysis:

• An option to save search should be available on advanced search page so that user can define a filter and save it.
• User should be able to access filters easily and perform different functions on it like execute, edit or remove.

VIII. How to exit search mode

An exit option is provided for user to go back to the screen from where search was initiated.

eBay, Microsoft careers, Linkedin all provide a ‘Clear’ option to clear all applied filters and hence search mode will be exited.

Analysis:

• A clear and simple option is required to display on advanced search page

IX. Advanced mode for technical user

Query based search is available for technical users.

User can write a complex SQL query in search box.

Microsoft Outlook provides query based search. However, no help is visible when user enters query parameters.

Jira is a very good example of providing advanced search option with instant help.

Analysis:

• Proper and instant help needs to provide when user is writing the query.
• Run time evaluation of query format is more helpful as compared to an explicit execute action from user.

Conclusion

Providing a simple experience to perform advanced search is a challenge. This can be achieved by following the best practices while designing advanced search screens.

Thanks for reading. See more articles: uxdworld.com

If you have any questions, contact me and I will write about it: Twitter | Facebook