Behavior of the search icon in the search box

Question

I have a search box with a search icon at the right to let users know they can type to search. I implement the instant search so the result will show right below the search box.

But I not sure what to do with that icon when users click on that, in these 2 cases:

1. The search box is empty, not touched yet

2. The search box having some results

Answer 1

This is what I have done in a similar situation in the past.

Move the search icon to the left of the textbox and introduce an action which explicitly says search and below is the reasoning for my advice.

The search box is empty, not touched yet

In this scenario the search icon acts like a label for the textbox which means on click of the button the textbox is in focus and the users can start typing into the textbox

The search box having some results

In this case if the search button has been clicked the user seems to be looking for something that the user is unable to find in the instant search results. I have worked on a booking engine in the past and in our scenario we had instant search results which included property names along with destinations and the results were capped at 10. On selecting a result the user would be taken to the property or the destination page. In addition we also had an explicit search button build in to avoid a dead-end for the users if the results they are looking for are not part of the result set. If possible measure the clicks on this search button to see how many such clicks happen if they happen to be a lot then it gives you an indication to tune your search algo.

Hope this helps. Happy to chat further if required!

Answer 2

First thought is: not sure you really need to do anything with that search icon. I think you can provide the user with sufficient feedback in simpler ways, e.g., the text in search box when typing/filled in will be 100% opacity vs. lower opacity when empty.

Amazon, for example, has a similar magnifying glass search icon but it doesn't change after search. It only changes subtly upon hover. If you really want to change the icon, perhaps having the magnifying glass filled in vs. not filled in when empty.

Answer 3

Based on cases provided:

1. Do nothing

'null' keyword aren't searchable. 'do nothing' will give an idea to the user that this search box required keyword to start searching.

2. Reload the result, as like when they search it for first time.

It will look like we doing the same thing again and again, but this action will give an idea to the user that this search icon also meant to be click. It also useful to an application that doing live update where search result can be different after few moment (like live-tracking, online news, social media newsfeed, etc..).

Answer 4

I suggest you follow a similar pattern to the one used by the Search bar in Google Analytics, in their left menu.

First, move the search icon to the left.

1. When the search box is empty, clicking on the search icon does nothing.

2. When the search box has some results, clicking on the search icon still does nothing :)

In the Google Analytics example, this behavior works fine -- especially because the icon is on the left, so it is not distracting the user.

Note: Google does not have an 'x' to clear the search, but I think this pattern would still work fine with an 'x'.