3

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. enter image description here

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

4 Answers 4

3

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!

5
  • In our case, we only have the instant search result, no redirect the other pages. But you are right, let me measure the user behavior of that button.
    – Finn
    Apr 20, 2018 at 7:01
  • 1
    @Finn For (2), if your "instant search" only shows the "top 10" or similar, clicking the search should "complete the search" and show all results. If you already show all results, clicking the search icon should probably confirm that all results are visible: my experience is that as many sites only show the "best" matches for instant-search, if I can't see what I'm looking for I'll click the explicit search to make sure.
    – TripeHound
    Apr 20, 2018 at 10:32
  • @Finn, let me know ur findings.
    – Bhupi
    Apr 23, 2018 at 8:13
  • @bhupindersingh thank you for the active response my question. My product does not launch yet, then currently I implement this feature similar to your response, I will update when I have something new ;)
    – Finn
    Apr 23, 2018 at 8:20
  • @Finn, happy to help!
    – Bhupi
    Apr 23, 2018 at 8:22
1

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.

1

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.

  1. 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..).

2
  • As I understand, the idea is that button will do the search with the keyword in the input box, if there is nothing, do nothing, if there is some text, do search regardless the result before?
    – Finn
    Apr 20, 2018 at 2:18
  • 1
    Actually what i meant here is when the user click on the 'search' icon, he/she expecting result to change or reload, even though result is just same. Apr 20, 2018 at 2:37
1

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.

enter image description here

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

enter image description here

  1. 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'.

2
  • 1
    Agree, when the button moves to the left side, it does not distract the user. I considering this option, thank you ;)
    – Finn
    Apr 20, 2018 at 11:18
  • You're welcome :) I've implemented this solution myself, based on observing the GA pattern. It seems counterintuitive at first, but works well in practice. Apr 20, 2018 at 13:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.