Lead: Shani Laendler (Unlicensed)

Description

Live search (aka "active search ", “incremental search” or “search-as-you-type”) is a search type in which 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.

Live search is also known as Active search, Incremental search or Search-as-you-type.

Usage and

...

Behavior

General Guidelines

Internal Logic

Search logic

2 search approaches may be applied (should be considered according to the specific need):

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

  Image Removed

   

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

  Image Removed

   

...

• The users' knowledge and expected behavior: do they know the full name of the item? how familiar they are with the list terminology and content?

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

The more complex the list is, and the less knowledge the user have, tend to choose the “contain” approach to provide more flexibility to the user.

...

Results Presentation

• The searched string will be highlighted in bold within the textlist of results.

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

• In case Where the items list area is arranged in an a hierarchical view tree:

  • the search results

  may

  • will also be presented in

  either

  • the same hierarchical view

  or as a simple list. See 'Best Practices' section for guidelines on selecting the appropriate approach. Example for

  • .

  • the user will be able to search on all hierarchies, unless otherwise specified.

• If the results are presented in a hierarchical view, all sections will be auto-expanded to show the searched items.

Example of a hierarchical view in the

...

results list:

Image Added

...

Image Added

• Where needed (and possible), consider presenting the number of results in a prominent area. Try adding that in any case when possible:

  Image Removed

  , particularly for larger or more complex results lists.

...

Results Loading Time

The system should mitigate long loading times.

• Less than 0.1 secondseconds: no loader is needed.

• 0.1 - 5 second:

  Option 1: loading spinner

  seconds: use a circular Progress Indicator with the text

  "

  Searching <Categories>...

  " Image Removed

  Option 2: loader within the field and list area with/out a placeholder for the results (consider Asaf’s use cases where there are several loading areas in the results area, see google example)

  Image Removed

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

...

• (Optional)

...

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

List definitions:

• The list will include up to 8 items

• Each item will be accompanied with an icon

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

  • Recents will be presented only after conducting at list one search. They will include the most recent searches only.

  • Popular items are items that are being searched by many users in many occasions (make sure to collect this information from the relevant database. For example, include searches that were conducted on the specific project only)

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

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

• Recent items will be placed above popular/trending items

Both recent and popular queries will be presented only if the user is expected to search for previously searched queries or for popular/trending queries. Otherwise this feature should not be used.

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

...

Interaction

Step	Visual Example	Description
Initial state

Image Removed

Image Added

Hint

Guiding / hint text in grey

Hover over the search field

Image RemovedBoarder colour changes

.

Click on the

text field

Text Field

Image RemovedSuggestions:

Image Added

Search is in focus.

Hint text presented

Text mark is flickering

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

presented (optional)

used. See Search for more information.

Enter first letter

Image Removed

Image Added

Hint text hidden

Suggestions are hidden (where used). The list is filtered

with every entry, from the first letterSearched query is highlighted

. The searched string is highlighted in bold within the list

• "X" is presented. will allow to "clear" search in one click.

Enter next letter/s

Image Removed

of results. A Clear All icon button (X) appears.
Enter next letters	Image Added	The list is filtered to show relevant results

Click on item in the list

Image Removed

Focus is moved away from the search field

Clear all

Image Removed

Click on the “x”: (1) clears all characters (2) focus on the text field, so that new search term can be entered.

The "x" disappears when the text is cleared (both manually or using the "x" button)

...

.
Clear all (either manually or clicking the X button)	Image Added	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 No <items> were found" (e.g. no . For example No categories were found, no or No employees were found).

Best Practice

• Automatic focus: use auto-focus on the search field to aid the user in conducting a fast search (and reduce clicks). Make sure to use it under these conditions:

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

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

...

...

Display results in an hierarchical tree view vs. simple list: the results may be presented in both list types. Use these questions to select the most appropriate type:

• Is the search expected to produce a single or multiple results? (if single than list is probably good enough)

• May several results have a similar name? (if yes, tend to choose a tree view)

• What will help to differentiate between items with similar name? (will it be the root?)

• Will the root be searched by itself?

• In case the results are presented in tree view, all roots will be auto-expanded to present the searched item. 

Use when:

...

Use when:

• the database is small-medium

  and

  size.

• the results can be filtered immediately

  (

  , with no need to retrieve the data from the

  back-end)The results area

  backend.

• the results list is located below and near the search field.

Don’t use when

...

the query is applied

...

to a complex or

...

large database that will cause a long loading time

...

→ use

...

Search

...

with Auto-Suggest (coming soon).

General

In case the list is the main component presented in the area or section of the interface (e.g. in a filter panel or in a modal window), the focus will be set to the search field automatically to aid the user in conducting a fast search.

Accessibility compliance

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

Design

See Search

Code

See Search