...
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 tree view the search results may be presented in either the same hierarchical view or as a simple list. See 'Best Practices' section for guidelines on selecting the appropriate approach. Example for hierarchical view in the search results:
 |  |
In case the results are presented in tree view, all roots will be auto-expanded to present the searched item.
In larger or more complex result sets, consider presenting the number of results in a prominent area. Try adding that in any case when possible:
 |
Results Loading Time
The system should mitigate long loading times.
Less than 0.1 second: no loader is needed.
0.1-5 second: loading spinner with the text "Searching <Categories>..."
 |
More than 5 seconds: this loading time is too long for “Live Search”. Use Search with Auto-Suggest 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. The "x" disappears when the text is cleared (both manually or using the "x" button) |
...