Position of a bar near a search input

Question

I am building a website that includes a page that has a search input and a sensitivity bar near him that allows the users to control over the amount of results returned and their accuracy.

This is the design I have rigth now:

As you can see, the results range bar is located under the search input and the search icon, but it does not take the full width as the search icon and input take (Which makes it seem disproportionate and not symmetrical).

What is the best way to locate the sensitivity bar in this case?

Answer 1

It is an extremely interesting question, and the problem has several dimensions.

Understanding the refinement

Tis is the main problem I see here. The "Results Radius" does not convey any meaning that would be exact. Is it accuracy refinement? Or maybe it is narrowing the results to the ones that are close to my location? Or something completely else?

So, unless it is something really clear among the Users, I would suggest changing it to something that would be popularly recognisable.

The scale of refinement

There are situations, when the accuracy refers to some kind of an understandable measure, e.g.: "+/- 10 kilometers" or "+/- 2 years". In these cases, I would understand what it does before I can see the results.

In other cases tweaking the results before I can see them may feel too abstract to me as a User. It is only after I get them (results) that I can decide that this is a little bit too much and I want a narrower meaning.

Finally: the UI dimension of the problem.

The one you have included in the question reminds me a "Remember my login" checkbox: it is almost always in the same place and I almost always notice it just after pressing the "Log in" submit button when it is already too late.

Why is it so? It simply dose not match my focus. When logging in my aim is to get in. It is not even the primary aim, it is the only one; remembering me is a completely side thing. No wonder that I do not pay attention to the field below the login form. My journey is simply:

It is me, Dom. This is the proof. Now, let me in.

It is similar in case of searching. I want to tell the system what I want and get the results. Simple as that. In this case, should it be a conversation, it would be:

I want a book, go get it.

As you can see, narrowing the results is not a part of my original question. Of course I could ask for "books by H.P. Lovecraft" but this would still be a part of the question itself. It would not make me tweak the accuracy upfront.

Should you be sure, though, that Users would want to do this, I would adapt a model that would throw this refinement into the original question (without forcing Users to perform it, though), for example like this, where the refinement seems natural at this stage:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Or like this, however living with the fact that it is visibly forced into the natural asking flow:

^{download bmml source}

Wrap up:

• refining results before User performs the search action and sees these results may be too abstract and therefore it may be not a good idea to do it at the beginning (unless the refinement is clear at that stage),

• refining results is not something Users would focus on from the beginning, so to make it work at that stage, it may be important to change their flow a little bit, which in some cases may be a bit too complex,

• it needs to be understandable for the User how the refinement affects the results,

• Users will probably want to refine the results rather when they see them, so it is a good idea to allow them to do so after they get the results of an unrefined search.

Answer 2

@Dom has explained it very well and I do agree with him.

However, if you are looking for a solution with the same approach in mockup, I would suggest you change the position of the slider to top-left of search field - so the users can first set the criteria and then perform search action:

---

Think of a way to explain the use of slider as to what that means and how the users can manipulate the results by using it - possibly expand all customizable options for users to choose and control.