2

To let users search by number or date, I want to provide two inputs. If you have two inputs, its a range search. If you have one input, it's a "greater than or equals" or "less than or equals". Will users understand they may leave one input blank? If not, how to make it discoverable?

values: 1 ,2, 3, 4, 5, 6, 7, 8, 9, 10

inputs: -- 5
meaning: "not greater than 5" 
result: 1, 2, 3, 4, 5

5 --
"not less than 5" 
5, 6, 7, 8, 9, 10

3 6
"not less than 3, not greater than 6"
3, 4, 5, 6
  • I think in this case the design of the interface will really determine if it might be clear or not. Another comment is that the - (or even --) symbol could be associated with negative value or negative counter. – Alvaro Feb 21 '17 at 8:13
2

Symbols for not greater than and not less than are usually like this

  • <= 5 - not greater than 5
  • >= 3 - not smaller than 3
  • 3 .. 5 - between 3 and 5

If you want to make clear that empty field means no max/min, you can:

  • gray it out and/or
  • add placeholder e.g. "Any"

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Or use min value/max value instead of "Any" if they are known to you.

  • I like the use of "Any". It's applicable for both min and max and both number and date. I didn't think of that. Oh, and since the question states that the search value can be both a number AND a date, you can't know the min/max values (referring to your last statement). – Paul van den Dool Feb 21 '17 at 12:04
1

I personally think you might be right and users might not understand that leaving an input blank means there is not minimum or maximum.

You could solve this by adding a placeholder.
Leave blank for no minimum
Leave blank for no maximum
The problem with placeholders is that users might forget about the hint as soon as the placeholder disappears.

A label might be a better solution.
Leave blank for no minimum or maximum

When the max number (and min) is known to you, you could also think about a range slider.
enter image description here
This example shows a range slider on a webshop. The cheapest product in the category is 12 euros. The most expensive is 850 euros.
This however, might not really work for dates.

A final, possible solution is something I've seen on a website listing houses for sale. It has maximum price ranges at different increments listed in a select box with the final option "No maximum". This works if you have a small range of numbers, but since your input can contain both numbers and dates, this might not work for you. This is a solution, slightly based on the concept:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

I hope this gives you some inspiration. There is no one, best solution I'm afraid.

0

If the value are fixed (1-10) I would suggest to use a number picker similar to date range pickers. See an example below:

enter image description here

Users should be able select a range by selecting a start and end number. Also, it would be nice to allow them to select not only range but any value even without range (see the 3rd example).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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