Short description

The component enables the user to search for specific data by entering input in the field.

When and how to use it

Use the search component to help users find data. For example, in connection to pages growing in size and complexity. The search component might not be necessary where there are limited amounts of data.

Placement

Place the search component where users expect to find it. There is no correct way where to place the search component. Normally the user might expect a search field to be placed in the upper right corner, however, depending on the page and its context the placement can differ.

Behaviour

Functional or decorative?

The component can be implemented in two different ways:

1. The functional way - The search icon is placed to the right in the input field and needs to be functional and clickable. A guideline is to use a button when it leads to a search result.

2. The decorative way - The search icon is placed to the left in the input field and is not functional, just decorative. Meaning the search icon is not there to be interactive. This can for example be used when the search field is accompanied with auto complete.

The functional way (icon to the right)

The Search component and its' states when having an interactive button has been divided into three groups:

1. Button states

• Explains the states while interacting with the search icon button
• Should include the functionality to press the button in order to search, and by pressing enter on the keyboard as a shortcut to search.

2. Input field states

• Explains the states while interacting with the input field
• When marking the input field, the border indicates that the input field is active for entering text. When the user starts entering search values, the input field changes the colour of the text.

3. Search states

• Explains the states as an inquiry has been searched for.
• Disabled state indicates that the search input field is inactive/ disabled.
• When a search has been completed, the search input field returns to the normal state, but with the darker text and the “x” placed to the right, in order to show that their specific query is active. The user should from here be able to cancel the search by pressing “x”, or by entering a new search value. When proceeding with a new search query after a previous search has been made, the input field returns to the “pressed and writing”-state

The decorative way (icon to the left)

The Search component and its' states when having a decorative search icon follows these states:

For mobile or tablet use

Although the user can press enter/ search from the keyboard on both mobile and desktop, the functionality of being able to search by pressing the search button should still be included if using the field with an interactive button. Rather let the potential accompanied functionality of the search field decide whether you need the search field with a decorative icon or an interactive button.

Smart search

It's preferrable to use the decorative search when auto-complete is being used.

Above: Examples of smart search, from https://material.io/design/navigation/search.html#expandable-search

Do's and don'ts

• Place the search component where users expect to find it.
• Consider whether you need the input field containing a decorative search icon, or the interactive search button.

• Don't use the search component where there are limited amounts of data

The search field should have a label that explains to the user what they can search for. To give the user instructions or examples on what to search for, we can use the label information or the placeholder. The label information and the placeholder should only be used if it adds extra value to the user, don't use it to repeat what's already said in the label.

Label information

When there is a limited number of keywords to search for, it can be a good idea to give them that information in the label information.

In Swedish

• Label: Sök kollega
• Label information: Sök på namn, personnummer, adress

In English

• Label: Search colleague
• Label: Search for name, personal ID, address

Placeholder

It is also possible, and maybe even more common, to use the placeholder. Many contexts have limited space, so using the placeholder to give the instructions might be a better solution. Remember though that the placeholder text disappears as soon as the user starts typing.

Helpful placeholder text

If there are many possible keywords to search for, give the user a few examples that differ from each other. It will help the user to understand the range of keywords to search for.

In Swedish

• Label: Sök transaktion
• Label information: t.ex. företag, belopp, datum

In English

• Label: Search transaction
• Label information: e.g. company, amount, date

Measurements

1 rem = 16px

States

States vary depending on:

1. Functional search
2. Decorative search

1. Functional search

Search icon is placed to the right

Button states

Default

• Signifies that the search box is currently in default mode.
• Border: 1 px, Grey 400
• Search Icon: 16x16px, Dark Blue 1
• Text: 16px, Gray 500

Hover

• Communicates when a user has placed the cursor above the interactive Search Icon.
• Border 1 px: Grey 400
• Search icon box: Blue
• Text: 16 px

Pressed

• Communicates when a user has pressed the interactive Search Icon.
• Border: 1 px, Grey 400
• Search Icon Box: Dark Blue 2
• Text: 16px, Gray 500

Focus

• A state that’s entered when the user for example tabs to the specific area.
• Border: 1 px, Grey 400
• Search Icon Box: Blue
• Shadow: Blue, X:0, Y:0, Blur: 4, Spread: 1.
• Text: 16px, Gray 500

Input field states

Hover

• Communicates when a user is hovering over the input field
• Input field border: 1 px border Blue
• Search Icon Box: Blue
• Text: 16px, Gray 500

Focus

• Communicates that the user has i.e used tab to navigate to the search field.
• Input field border: 1 px border Blue, Shadow Blue X:0, Y:0, Blur:4, Spread:1.
• Text: 16px, Gray 500

Pressed state

• Communicates that the user has pressed the input field.
• Input field border: 1 px border Blue, Shadow Blue X:0, Y:0, Blur:4, Spread:1.
• Text: 16px, Gray 500

Pressed and entering text

• Communicates that the user is entering text
• Input field border: 1 px border Blue, Shadow Blue X:0, Y:0, Blur:4, Spread:1
• Text: 16px, Gray 700

Search states

Disabled

• Communicates that the search field is inactive/ disabled
• Background: Gray 100
• Border: 1 px, Gray 400
• Search Icon: Grey 600
• Text: 16px, Gray 700

Search completed

• Communicates that a search inquiry has been made and if there are results, these are now shown. If the user clicks on the cross or press within the input field, the search box will go back to the pressed state.
• Border: 1 px, Gray 400
• Cross: Grey 600
• Text: 16px, Gray 700

Search completed – hover

• This state is the same state as search completed, but shows how the cross changes if the user hovers above it.
• Same specifications apply. The circle under the cross: 20x20px, Grey 200

2. Decorative search

Search icon is placed to the left

Default

• Signifies that the search box is currently in default mode.
• Border: 1 px, Gray 400
• Search Icon: 16x16px, Black
• Text: 16px, Gray 500

Hover

• Communicates that the user hovers above the input field
• Border: 1 px, Blue #41B0EE
• Search Icon: 16x16px, Black
• Text: 16px, Gray 500

Focus

• Communicates that the user has i.e used tab to navigate to the search field.
• Border: 1 px border Blue, Shadow Blue X:0, Y:0, Blur:4, Spread:1.
• Search Icon: 16x16px, Black
• Text: 16px, Gray 500

Pressed and entering text

• Communicates that the user is entering text
• Border: 1 px border Blue, Shadow Blue X:0, Y:0, Blur:4, Spread:1.
• Search Icon: 16x16px, Black
• Text: 16px, Gray 700

Search completed

• Communicates that a search inquiry has been made and if there are results, these are now shown. If the user clicks on the cross or press within the input field, the search box will go back to the pressed state.
• Border: 1 px, Gray 400
• Search Icon: 16x16px, Black
• Cross: Grey 600
• Text: 16px, Gray 700

Search completed - hover

• This state is the same state as search completed, but shows how the cross changes if the user hovers above it.
• Same specifications apply. The circle under the cross: 20x20px, Grey 200

Colours

• Black #000000

• Blue
• Dark blue 1
• Dark blue 2
• Grey 100
• Grey 200
• Grey 400
• Grey 500
• Grey 600
• Grey 700

Above: Example of search with interactive button

Above: Example of search with decorative button, accompanied by autocomplete.

Related

• Article: Babich, N. (2017). Best Practices for Search