Versions Compared

Version Old Version 36 New Version 37
Changes made by

Liav Nadler

Yehiel Elad-Certner

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Example of a hierarchical view in the results list:

Image ModifiedImage Modified

  • Where needed (and possible), consider presenting the number of results in a prominent area, particularly for larger or more complex results lists.

Image RemovedImage Added

Results Loading Time

...

  • Less than 0.1 seconds: no loader is needed.

  • 0.1 - 5 seconds: use a circular Progress Indicator with the text Searching <Categories>...

  • More than 5 seconds: this loading time is too long for Live Search → use Search with Auto-Suggest instead.

Image Modified

Interaction

Step

Visual Example

Description

Initial state

Image Modified

  • Guiding / hint text in grey.

Click on the Text Field

Image Modified

  • Search is in focus.

  • The guiding / hint text is hidden.

  • The text cursor is blinking.

  • (Optional) It is recommended that a suggestions list with recent and/or popular queries are used. See Search for more information.

Enter first letter

Image Modified

  • Suggestions are hidden (where used).

  • The list is filtered.

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

  • A Clear All icon button (X) appears.

Enter next letters

Image Modified

  • The list is filtered to show relevant results.

Clear all
(either manually or clicking the X button)

Image Modified

  • Characters are cleared.

  • The focus is set on the text field.

  • The X button disappears.

...

There are no validations on the search string.

No results found

Image Modified

  • The results area will clearly state that no results were found.

  • The text will say No <items> were found. For example No categories were found or No employees were found.

...