I am making a search which is really a thinly-veiled SQL query.

For example: "Cities where population is less than 1000".

  • Cities = type of object
  • where = signals condition
  • population = attribute
  • is less than = operator
  • 1000 = value

Because it's not true NLQ, it needs a guide to help the user enter in the proper syntax. I have imagined two ways of displaying that guide.

The first way puts the options on the right. Pros: Options always in the same place Cons: A lot of eye travel

enter image description here

The second way puts a prompt under where the user's text cursor is. Pros: Much less eye travel Cons: A large visual object is jumping around the screen. It might be obtrusive and annoying for people who have learned the syntax and rather look just at what they're typing. enter image description here

Which option is better? Is there a third option?

2 Answers 2


Both search options seem quite unnatural to me. To me, the best solution would be to create an inline form where you have already set certain required words and allow the user to fill in the gaps.

This means less effort from the user, as everything is neatly packed and the user can already see which options will come up later on when filling the search query or form.

A website called 'Codrops' has an good live example that illustrates this solution perfectly: Natural Language Form. Of course, usability wise there are some things that could be clarified, but the idea is there.

Graphic preview:

Natural Language Form


There are various approaches to this.

1) Consider different input methods and usage scenarios. Perhaps a few common options might cover the vast majority of scenarios? Perhaps many of your users will be using phones or tables and typing might be a hassle? Perhaps having buttons for the most common options might make it easier to filter than typing out long choices like "number of coffee shops"?

This is how YouTube implements its filter system: enter image description here

And, of course, you could add a "custom value" option where needed.

2) If you've settled on a keyboard-first input method and only showing hints on what to write, then there are various ways you could lay out your hints. Unless you're showing results as you type, you could overlay any of the area below the search box.

You're right about your option 2 being annoying as the box would move with every character added. But how about just showing the hints left-aligned to the beginning of the search box, as in address bars?

enter image description here

You can also arrange your hints horizontally instead of vertically.

Additionally, if you plan to have a number of filters, you could use columns to categorize them into groups:

enter image description here

(Not the best example, but I hope you get the picture.)

3) Consider easing people's lives by making entry faster. Nobody wants to type out "number of coffee shops" when they could hit a quick shortcut or click a button. Things you can offer:

  • Autosuggest + "Enter" to submit suggestion
  • Click to insert
  • Keyboard shortcuts

When adding tags on StackOverflow, for example, you can both click or press enter to submit a suggestion.

enter image description here

Hope this helps.

Your Answer

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

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