The search input enables the users to input a query to be searched in a database. The input query can be extended to include historical suggestions, auto-completion queries, spelling checkers, and others.
Search input with results being used in Carl's Shop +
|
Component |
Usage |
Placement |
User action |
|---|---|---|---|
|
Search input (global scope) |
When using it globally, the search query can cover all the global information. |
The search input is placed at the same level as the navigation indicating the global context. |
The user inputs the keywords, forming the search query. |
|
Search input (local scope) |
When using it locally, the search query can cover all the local information presented on the page. |
The search input is placed at the top of the page indicating the local context. |
The user inputs the keywords, forming the search query. |
|
Search input (contextual scope) |
When using it contextually, the search query can cover a specific group of information. |
The search input is placed near the information indicating the specific context. |
The user inputs the keywords, forming the search query. |
The search input can be used in different contexts, being those global, local and contextual. The usage of this component will change the search query scope and the placement on the product grid.
Anatomy
Structure
|
|
|
leading icon |
Indicates that is a search input. |
|
placeholder |
Indicates the search working in a specific context. |
|
delete |
Once typing, the delete icon becomes visible and when pressed delete the entry. |
|
filter |
Indicates the filters. When pressed show the available filters. |
|
|
|
results |
Total of the results found, based on the search query. |
|
category |
The category to which the results belong, according to the search query. |
|
result item |
One of the items found, according to the search query. |
Sizes and Spaces
|
As most form elements search inputs are flexible in terms of width. |
|
The width of the results should match the width of the search input. |
Properties
Search input
|
Property |
Value |
Description |
|---|---|---|
|
Filter |
true false |
Allows the user to have filters on the search input. |
|
Size |
medium large extra-large |
Defines the height of the search input. |
|
State |
default active hover filled |
Defines the state of the search input. |
Search result list
|
Property |
Values |
Description |
|---|---|---|
|
Results |
true false |
If false, the results should be Dynamic context, content should reflect the keyword user started to type. |
|
Image |
true false |
If true in Dynamic search, items are listed with the image. |
|
Groups |
true false |
Advisable if the scope of the search is too broad and covers different areas/categories of the product/service. This is not applicable for contextual search. |
|
All results |
true false |
If true, the user should be redirected to a dedicated results page. This is not applicable for contextual search. |
Behaviour
Interaction
Getting results
When getting results, the user can see a dynamic list or a dynamic context.
The dynamic list appears once the user clicks on the search input and starts typing the search query. This search query needs to have a minimum of 3 letters for the list to appear. The references that the user will see should mention the letters present in the search query.
The dynamic context appears in the same user actions. The difference, when using this option, is that the content will adjust and show the related results on the page where the search input is placed.
No results found
Once the user starts the search process by typing in the search input, the search query can return a "no results found". If this happens, a follow-up suggestion should be shown to the user.
Loading indication
The user needs to know what's happening. When a user starts typing in the search input, a result, suggestion, or loading should be shown.
In the loading case, the loader should be shown when the search query takes more than 1 second to process. With this indicator, the user knows that the system is trying to find matches to what was written.
Categories usage
Just like the previous topic, the user needs to know what's happening. When the search context is too broad, and the search query is being shown in different places, the usage of categories to maintain the information crystal clear is key. The information presented to the user should be separated into categories.
Guidelines
|
|
⚠️ Caution
If the list of results is too big, consider in placing a "Show all results" button, and send the user to a dedicated results page