Helping users identify site search functionality

Question

I'm looking for ways to better expose the search functionality, which in my case plays a big usage role. I've been conducting talks with users, and have managed to identify that it's functionality was frequently missed, but when they were told about it, were really excited about it.

Because the search is possible by 3 different categories, it has a drop-down auto-suggest to chose from, which is also frequently ignored.

Things I've thought of:

1. Opening the autocomplete upon click in search box and displaying either explanations or popular examples or relevant searches to current page/user. The goal is to get the users' attention to the autocomplete box, so he'll try to use it when he types. Currently it opens after 3 letters. This should hopefully make him more aware of the different categories and options to search by.

2. Making the search box stand out visually: not all sites include search usage as a main flow, so I think this is a popular reason to ignore it. I've noticed fb have made a big effort to make the search box and it's autocomplete very noticeable, and am thinking to do the same.

3. Tour: opening a pop-up box with explanations and guiding the user through the process. I've noticed Google Maps have done this in their new release.

My Screenshots:
Search box in header with options to search by.

"On Click" showing 'try X' and auto-suggest displaying trending options.

After typing letters, directing auto-suggest to current query completions

Are there any other options, or do you have insights on the things I've thought about and how to help users better identify the functionality and how it can help them?

Answer 1

I would suggest a few things:

First, if search is a major part of the workflow, then do not stick it in the corner. Make it at the top of the screen, very prominent. Either in the middle, or if it's stuck in a corner, then make it stick out by letting it overflow the header area or whatever.

Second, put some text in the box before a search is performed, so that the user knows what kind of searches are available: "Find pancakes, blue jeans or your current electricity usage". Use grey italic text, as many sites do. The point of this example here is that your search functionality may be very diverse, far beyond what your user is expecting. If so, this is your chance to educate them prior to any action on their part.

Third, definitely display a popup box when clicked. The popup could surround your search box on both top and bottom. Above your search entry, provide deeper instructions: "Type the name of what you want to buy" or whatever. Below the search box, provide numerous examples showing both the typed text and what the user would find. If you have complex search conditions/criteria, use this space to train them on how to use it. Make sure you provide a "[ ] Don't show me this help in the future" option in case they find the popup jarring. And it shouldn't really be a popup, rather a div that appears around your search input box.

Answer 2

Regarding #2, see what Google did in their homepage. Don't be afraid to design your page according to your prioritization.