I'm currently working on an m-commerce app project.

I would like to implement a "natural search" like this one :

Natural search

I am totally new to this approach and I can't find a way to mix it with a "classic" autocompletion, I'm stuck trying to show suggestions AND this kind of "auto-detected" labels in the same place.

Pardon my english :/

  • 3
    +1 for trying out something interesting and innovative. Just to clarify, can the users interact with the elements below or if they want to change their query do that have to retype in the search bar? – Michael Lai Apr 4 '16 at 4:18
  • I have to clarify few things too, this gif is not from me, all credits go to Richard Burton (uimovement.com/ui/1492/natural-search). That's why I said would like to something LIKE this one. I wasn't clear on this point, sorry about that. To answer you, yes in my version I wanted to let user interract with elements bellow, like tags for a search. – Brice Apr 4 '16 at 8:08
  • Doesn't really change my answer to your question, considering that I did take it into account already. – Michael Lai Apr 4 '16 at 22:18
up vote 4 down vote accepted

I think its too complicated and the users will have difficulties interacting with the field because they don't know how to use it. For this purpose you should give them instructions.

Better use recognition rather than recall. Making users to write difficult queries may demotivate them as this requires high cognitive load.

If I didn't knew that this field can give me multiple autocomplete options I would expect only 1 thing to come up. Anyways thats nice and innovative idea and if you implement it you should guide the users instructions on how to use the field with animated gif, like this one.

Edit:

The best thing to do is test this approach. User tests always show if its going to work well.

  • 1
    "What is now proved was once only imagined." - William Blake – user67695 Dec 9 '16 at 20:44

I think many people trying to implement this type of design would agree that it is a reasonably complex thing to get right for people not familiar with it. But as with most foreign things, once you get used to the idea then it is not so bad.

I would suggest, as with any complex designs, is to try and break things down into simpler components in the first instance, and as users built more trust and confidence in the system you can ramp up the level of complexity then.

So in this instance, why not break the query down into its components, like you have done visually with the dates and the price. Separate them into physically separate input fields, but design it in a way to show that they are all part of an extended query/search string. That way the user can focus on each aspect of the search input without worrying to much about whether they have structured it correctly, or whether there are context sensitive input that can make interpreting the input and results confusing.

It might help to have a hint text as an example than "Search Transaction". Something similar to your example and an answer to the example (everything in light gray and italics). Gives a quick idea how this thing works.

I'm not sure this "natural search" is an advantage, in this case at least. Typing something as we would naturally say it doesn't make it easier/faster than choosing directly the concept from an input.

It is probably easier:

  • to enter the exact value on each specific filter (search-query, dates, amount, etc.)
  • to use the appropriate input for each filter (text-field, dropdown, input-number, etc.)

Autocomplete makes sense in a text input. When typing helps making a shortcut and to suggest similar search terms. In other inputs, autocomplete could take the form of displaying different filters with different options, you might think the user would need, as the user enters the search data.

enter image description here

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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