How would you design a good search UI?

Question

I want to provide my users with an 'advanced' search engine. I basically have a lot of search criteria to chose from :

• some are very simple/common and will be largely use (ie time period, item id)
• some are a bit less mainstream
• and some won't be used a lot, but I still want to provide them

Overall, I have around 30+ criteria to chose from

The result is a dataset which I display in a grid.

I've search for inspiration on internet, and even google doesn't seem to have a nice solution for advanced search.

I've designed this kind of tools in the past, and I wasn't really pleased by the result, although the user were eventually able to use it quite effectively.

• Do you think the search panel should be visible all the time (ie displayed on top of my result grid) or available in a separate form (which would let me use more place for all the controls)

• Do you think it's better to display all the search criteria, or to let the user click on 'advanced' if he wants to see/use more criteria

• How would you organize the criteria? by usage frequency, or rather by area (ie. criteria related to user, to location, to time, etc.)

• Where should I put the 'Search' button? next to the more common search controls, or at the bottom, or both?

And more generally, do you have tips you want to share on how to design a nice search UI ? What kind of functionalities do you usually miss in this kind of 'advanced' search engines?

Answer 1

Not an expert on UI, but I have seen a lot of bad UI.

• KISS is a good start.
• Make it intuitive.
• Keep the search both at the top and at the bottom. I'd be loathe to use something that forces me to move up the page to type (see Flex documentation, their pagination control is only at the top -- a miserable pain you know where).
• Organization of criteria should be two-fold:
  • basic operators (20%) which 80% will use up-front
  • dynamically edit the set of criteria available at any time.
• Get the users started with least ramp-up time and allow them to add/remove criteria on a as needed basis. The idea is to make him use something he needs and not clutter his thought or workflow with the brilliance of your feature set.
• As others have mentioned and is the trend nowadays with UI in general, use controls that are hidden until and unless the user explicitly wants advanced/fine-tuning (on-demand UI).
• A good rule of thumb is to have a maximum of 5-7 features on a page.
• It'd be great if you can arrange the criteria in such a way so as to make a story out of it i.e. the user can read his query and your operators make some meaning out of it.
• I'm a big fan of little text and easy to comprehend icons but such a setup depends on your installation environment. Can your grandkid use that mighty workhorse?
• Good design also necessiates that you make your UI accessible. That's a tough nut to crack and I have absolutely no idea how you'd do that.

Best of luck!