Lead:  << Your name/s >> << Select the status -       >>

Related Pages: << Links to related pages, if relevant >>

Description

Basic Flow

Usage and Behavior

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:

• The results are displayed in the list area and according to the same sort method.

• The searched string will be highlighted within the text.

• Loading results: 

  • Less than 0.1 second: no loader.

  • 0.1-1 second: TBD.

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

  • The list is the only/ main component presented in the area or section (e.g. in filter panel, in modal window)

  • The list is presented upon request (e.g. click to open filter panel, click to open window).

Example: