Lead: Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
...
The searched string will be highlighted within the text.
The results are displayed in the list area according to the existing sort method.
In case the list area is arranged in an hierarchical view :
Thethe search results
will usuallymay be
displayedpresented in either the same hierarchical view
as well:
...
In some cases the search results should be displayed as a flat list, and not in hierarchical viewor as a simple list. See 'Best Practices' section for guidelines on selecting the appropriate approach. Example for hierarchical view in the search results:
...
In larger or more complex result sets, present the number of results in a prominent area. Try adding that in any case when possible:
Results Loading Time
...
Less than 0.1 second: no loader is needed.
0.1-5 second:
Option 1: loading spinner with the text "Searching <Categories>..."
Option 2: loader within the field and list area as with/out a placeholder for the results (consider Asaf’s use cases where there are several loading areas in the results area, see google example)
More than 5 seconds: this loading time is too long for “Live Search”. Use Manual Search instead.
...
Step | Visual Example | Description |
|---|---|---|
Initial state |  | Hint text in grey |
Hover over the search field |  | Boarder colour changes |
Click on the text field |  |
|
Enter first letter |  |
|
Enter next letter/s |  | The list is filtered to show relevant results |
Click on item in the list |  | Focus is moved away from the search field |
Clear all |  | Click on the “x”: (1) clears all characters (2) focus on the text field, so that new search term can be entered. The "x" disappears when the text is cleared (both manually or using the "x" button) |
Validations and errors
No results found
...
The results area will clearly state no results were found
The text will say "no <items> were found" (e.g. no categories were found, no employees were found).
Best Practice
Automatic focus: use auto-focus on the search field to aid the user in conducting a fast search (and reduce clicks). Make sure to use it under these conditions:
The list is the only/main component presented in the area or section (e.g. in a filter panel or in a modal window)
The list is presented upon request (e.g. click to open filter panel, click to open modal window)
...
Display results in an hierarchical tree view vs. flat simple list: the results may be presented in both list types. Use these questions to select the most appropriate type:
Is the search expected to produce a single or multiple results? (if single than list is probably good enough)
May several results have a similar name? (if yes, tend to choose a tree view)
What will help to differentiate between items with similar name? (will it be the root?)
Will the root be searched by itself?
In case the results are presented in tree view, all roots will be auto-expanded to present the searched item.
Use when:
<…>
<…>The database is small-medium and the results can be filtered immediately (no need to retrieve the data from the back-end)
The results area is located below and near the search field
Don’t use when:
When the query is applied on a complex or big database that will cause a long loading time. Use In such case use Manual Search (with Auto-Suggest) instead<…>.