Versions Compared

Version Old Version 41 New Version Current
Changes made by

Liav Nadler

Femi

Saved on

Key

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

...

Description

Live search is a type of Search where each character that the user enters or deletes runs the search query. This type of search is usually suitable for small-medium databases.

...

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.

...

Results Loading Time

The system should mitigate long loading times.

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

  • (Optional) Delay trigger of initial search until at least 3 characters have been entered to improve performance.

...

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.

Validations and errors

There are no validations on the search string.

No results found

...

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

...

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

Design

See Search

Code

See Search