Lead: Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
...
Live search (aka "active search", “incremental search” or “search-as-you-type”) is a search type in which each character that the user enters or deletes runs the search query. This type is usually suitable for small-medium databases
Usage and
...
Behaviour
General Guidelines
Internal Logic
...
Magnifying glass icon
As indication only. Does not operate as button, since the search is conducted live.
Search logic:
The search is being conducted for any part of the term ("contains" approach). For example, the string "re" may return "revert", "correct" or "before".
Results:
...
Search logic
2 search approaches may be applied (should be considered according to the specific need):
“Type-ahead”: all results will start with the typed string. For example:
“Contains”: the search string may appear within a result.
Select the appropriate approach according to:
The users' knowledge and expected behavior: do they know the full name of the item? how familiar they are with the list terminology and content?
The list content and design: does it include complex items (e.g. agents names?)? does it have a complex design (e.g. a combination of numbers and strings)?
The more complex the list is, and the less knowledge the user have, tend to choose the “contain” approach to provide more flexibility to the user.
Results
The searched string will be highlighted within the text.
The results are displayed in the list area and according to the same existing sort method.
In case the list area is arranged in an hierarchical view:
The
search results will usually be displayed in hierarchical view as well:
...
In some cases the search results should be displayed as a flat list, and not in hierarchical view. See 'Best Practices' section for guidelines on selecting the appropriate approach.
Results Loading Time
The system should mitigate long loading times.
Less than 0.1 second: no loader is needed.
0.1-
15 second:
TBD.Option 1-5 seconds: loading spinner with the text "Searching <Categories>..."
More than 5 seconds: mmm this search type is probably not the best solution (go with more complex search type that does not filter immediately)
Option 2: loader within the field and list area as a placeholder for the results
...
List Types
Hierarchy:
The full list may be displayed in hierarchy
In most cases the search results will also be displayed in hierarchical view (Google Settings search as reference):
...
In some cases the search results should not be displayed as a flat list, and not in hierarchical view. See 'Best Practices' section for more details.
Automatic focus on search Field
Auto-focused on the search field allows fast search and reduces clicks.
- Search will be auto-focused when these 2 conditions occur
(consider Asaf’s use cases where there are several loading areas in the results area)
More than 5 seconds: this loading time is too long for “Live Search”. Use Manual Search instead.
Suggestions (Optional)
...
When focusing on an empty search field, a list of suggestions may be displayed to aid the user conduct a quick search.
List definitions:
The list will include up to 8 items
Each item will be accompanied with an icon
The list will include recent searches and/or popular/trending searches.
Recents will be presented only after conducting at list one search. They will include the most recent searches only.
Popular items are items that are being searched by many users in many occasions (make sure to collect this information from the relevant database. For example, include searches that were conducted on the specific project only)
Trending item are items that are being searched by many users in many occasions, on a recent defined time frame.
The number of recent and popular/trending items should be equal. If there’s not enough data to provide an equal amount of both types the list may be divided unequally.
Recent items will be placed above popular/trending items
Both recent and popular queries will be presented only if the user is expected to search for previously searched queries or for popular/trending queries. Otherwise this feature should not be used.
Interaction
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) |
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 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.
Example:
...
Use:
<…>
<…>
Don’t use
When the query is applied on a complex or big database that will cause a long loading time. Use Manual Search (with Auto-Suggest) instead
<…>