Search

If your website has a search, it would be better to make it visible immediately. Unnecessary clicking on the icon and opening the search field only makes the interface less clear.

Often search is hidden behind an icon in the navigation to make the design more compact and visually clean. But this only leads to problems, and the search becomes invisible for the user.

If search plays an important role on the site, and it always does when it's there, it's better to disregard compactness for the sake of convenience and usability.

02 Search icon

The search field is seen as an ordinary input field without the icon and does not present itself as a search. It is better to add a search icon to the input field. This will emphasize the form and help the user distinguish it quickly when scanning the website.

If the search field is large and explicitly highlighted on the site, its icon is not so important. The size and style of the field and the placeholder will make it clear that it is a search.

If the icon is on the right edge of the input field, it can be seen as a search button.

03 Search and clear buttons

It can be misleading if the search button has only an icon without a label. A label with text or an icon plus text is more familiar.

A button with only an icon usually triggers a toggle action, like opening a popup or switching from one state to another. It raises doubts if there is only an icon button to the right of the search field. Maybe there are additional search parameters hidden under the icon?

If the search results are displayed immediately on the page, it is a good idea to add an icon to erase the typed query in the input.

This speeds up the work with the search and gives a clear understanding of how to remove its results. Undo action with one click is always a good solution.