...

Type	Description	Example
Live Search	Live search is also known as Active search, Incremental search or Search-as-you-type. Each character that the user enters or deletes runs the search query. This type of search is usually suitable for small-medium databases.
Search with Auto-Suggest	The system automatically suggests terms after the user has typed 2 or more characters. The search itself is runs only run after it is manually triggered by the user triggered it, by : selecting a suggestion, clicking the search icon, or hitting the Enter key. This type of search is usually suitable for large and complex databases.

Usage & Behavior

General guidelines

...

• A Text Field, where the user can enter their search.

• A magnifier icon, placed within the text field, to the right.

• In Search with Auto-Suggest, the user may click the magnifier Icon Button to initiate the search.

In Live Search the magnifier icon helps to identify the input field as a search bar

.

• A guiding/hint text, placed within the text field, left-aligned.

• A Clear All icon button (X). Appears to the left of the magnifier icon once a character has been entered in the text field.

Content

• An empty search field includes a hint text.

• The hint text must start with the word Search to indicate the search functionality.

• The next words should provide helpful context and describe the results type, for example Search employee or Search custom data field.

Length

• The search field should have a minimum width of 27 characters.

Internal Logic

Clear All

• An X icon button provides a Clear All function.

• The X button appears after the first character is typed, and disappears when the text is cleared (either manually or by using clicking the X button).

• Clicking the X button will:

  • delete all characters.

  • focus on the text field, so that new search term can be entered.

...

2 types of search logic may be applied, according to the specific needs:

• Type-ahead: all results will start with the typed string. For example:

• Contains: the search string may appear anywhere within a result. For example:

Select the appropriate approach according to:

...

Type-ahead should be the default approach. However, consider using the contains approach when:

• The user is not familiar with the list terminology and or the structure full name of each the item?.

• The list content and design. Does it include includes complex items, such as agents names? Does it have a complex design, for example a combination agent names or combinations of numbers and strings?

...

• .

...

String Highlight

The searched string is highlighted in bold within the list of results:

...

• When the searched items are already presented in bold within the list of resultresults.

• Where there are other, non-searchable bold items within the set of results list, such as bold headers in a hierarchical list, that may cause confusion.

...

Recent / Popular Searches (optional)

When an empty search field is focused, a list of recent or popular/trending suggestions may be displayed to enable the user to conduct a quick search.

• The suggestions list will include up to 8 items.The suggestions list will include recent searches and popular/trending searches.

• Recent items are strings that the specific user has searched for in the past. They will be presented only after the user has conducted at least one previous search, and will include the most recent searches only.

• Popular items are strings that are being frequently searched by a lot of users.

• Trending items are strings that are being frequently searched by a lot of users, within a recent time frame.

• The number of recent and popular/trending items should be equal, unless there’s not enough data to provide an equal amount of both types. In this case the list may be divided unequally.

• Recent items will be placed above popular/trending items.

• Each item will be accompanied by an icon, indicating the type of suggestion (recent or popular/trending).

Use the suggestion recent/popular searches list only if the user is expected to search for previously searched queries or popular/trending queries.

...

Search Query

• The search query should NOT not be case sensitive. For example, searching for RAR is equal to rar, Rar, or RaR etc.)

• Spaces in the query:

  • Spaces are included in the search string. For example, when searching repeated c “repeated c” the result “repeated callsalls” may be found.

  • When searching a list of names (such as employees or agents), the space may be addressed as a separator between 2 distinct searches. For example, when searching sh kl “sh kl” the employee “Shiri Kleinein” may be found.

States

State	Empty	Filled - Live Search	Filled - Search with auto-suggest
Regular			TBDComing soon…
Hover			TBDComing soon…
Active			TBDComing soon…
Disabled		-	TBDComing soon…
Error Only applies to Search with Auto-suggest (See Field Validation for more details).	-	-
Focused			TBDComing soon…
Focused, Hover			TBDComing soon…
Focused, Active			TBDComing soon…

Interaction

Varies per each search type. See Live Search and Search with Auto-suggest.

...

• the searched list has 10 items or fewer.

• the user wants to browse through the data or to look for datasets, and is not looking for specific items → use Filters.

• users are unlikely to know what they’re looking for.

General

Accessibility compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

...