Related Pages: Searchable Dropdown Drop-down Menu

Description

Search enables users to find relevant content in a list List or dataset , by specifying a word, phrase, or query.

Types

Type	Description	Example
Live Search	Live search (aka "active search", “incremental search” or “searchsearch is also known as Active search, Incremental search or Search-as-you-type”) is a search type in which each 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 autoAuto-suggestIn this search type the system autosuggest terms as the user types 2 Suggest	The system automatically suggests terms after the user has typed 2 or more characters. The search itself is being conducted only only run after manually running it (by it is manually triggered by the user, by: selecting a suggestion, clicking " the search " or 'Enter'). icon, or hitting the Enter key. This type of search is usually suitable for complex and big database searchlarge and complex databases.

Usage &

...

Behavior

General

...

guidelines

Structure

...

Search consists of:

• 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.

...

Content

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

...

'x' icon (clear): added and aligned to the magnifier icon. 

• Empty 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 word/s words should provide helpful context and imply describe the results type (e.g. 'search employee', 'search , for example Search employee or Search custom data field').

Length

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

Internal Logic

Clear All

• “Clear all” is presented using an "x" icon.

• The "x" is presented 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 (both either manually or by using the "x" X button).

• Clicking the "x" X button will:  (1)

  • delete all characters

  (2)

  • .

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

Search logic

2 types of search approaches logic may be applied (should be considered , according to the specific need)needs:

• “TypeType-ahead”ahead: all results will start with the typed string. For example:

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

Select the appropriate approach according to:

• The users' knowledge and expected behaviour: do . Do they know the full name of the item? how How familiar are they are with the list terminology and the structure of each item?

• The list content and design: does . Does it include complex items (e.g. , such as agents names)? does Does it have a complex design (e.g. , for example a combination of numbers and strings)?

The “typeType-ahead” approach ahead should be the default approach. However, yet the more complex the list is, and the less knowledge the user users have, tend to choose the “contain” approach to provide more flexibility to the userthe more appropriate it is to use the Contain approach, which allows more flexibility.

String Highlight

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

Exceptions- an An additional background color will be added to the bold string in these cases:

Image Removed

• Searched When the searched items are already presented in bold within the list of result (regardless of the search string)There .

• 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 (e.g. bold titles in an hierarchical view) .

Image Added

Suggestions (Optional)

When focusing on an empty search field is focused, a list of suggestions may be displayed to aid enable the user to conduct a quick search.

List definitions:

• The suggestions list will include up to 8 items.

• The suggestions list will include recent searches and /or popular/trending searches.

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

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

  • Trending item items are items strings that are being frequently searched by many users in many occasions, on a lot of users, within a recent defined time frame.

  • The number of recent and popular/trending items should be equal. If , 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 with by an icon, indicating the type of suggestion (recent or popular/trending).

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

...

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

• Using spaces Spaces in the query:

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

  • When searching on lists a list of names (e.g. employees, 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 “shShiri Klein” ein may be found.

States

State	Empty	Filled - Live Search	Filled - Search with auto-suggest
Regular			TBD
Hover			TBD
Active			TBD
Disabled		-	TBD
Error Applies Only applies to “search Search with auto-suggest” only - TBD Auto-suggest (See Field Validation for more details).	-	-
Focused			TBD
Focused hover, Hover			TBD
Focused active, Active			TBD

Interaction

Varies per each search type (see . See Live Search and Search with autoAuto-suggest).

Validations and Errors

Varies per each search type (see . See Live Search and Search with autoAuto-suggest).

Best Practice

Use when:

• The

  the searched list has more than 10 items.

• Users

  users are looking for specific items and know, to some extent, how to look for it (e.g. when supervisors are looking for their agents in a list).

Don’t use when:

• The

  the searched list has 10 items or

  less

  fewer.

• The

  the user wants to browse through the data or to look for datasets, and is not looking for specific items

  (in this case use filters)The user doesn’t know what he’s looking for

  → use Filters.

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

Accessibility compliance

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

Design

Zeplin link	Screen thumbnail
https://zpl.io/25Gz0na

...