range/single field switcher

Question

Currently working on car listing app where users can browse cars contact sellers etc...

One of the filters we have is the year, right now we're providing the user with 2 fields (Year From - Year To) and relying on the user to enter both fields the same value if the user is looking for cars from a specific year.

I am trying to figure out an intuitive solution that supports both range and single values, given that the users are very simple (think of a grandpa) and the priority for range is higher than the single value.

Answer 1

I was about to comment on BrunoH's answer: https://ux.stackexchange.com/a/122001/98561, which I find a very nice and straightforward solution for desktop users as setting the sliders requires some precision difficult to achieve with touchscreen devices. My comment turned to bo quite lengthy, hence another answer.

I'd usee BrunoH's concept with two additions:

• a radio buttons allowing for explicit choice between range and specific value (I'm not putting manufacture years here out of laziness and because of my next idea)
  

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

• a quasi-exponential scale reflecting the supply of the used cars on the market. What I mean, there are not many cars from 1995 comparing to 2005, but we can assume that the total supply of cars manufactured between 1995 and 2000 will roughly be similar to those of 2017 only (more and more cars are manufactured each year and older cars end up on a landfill and not on the market).
  Thus the scale may look like this:
  

^{download bmml source}

Of course it makes it slightly more complicated if I'm looking for a car from 2009 exactly. A solution for this may be a "margin" if "specific year" is chosen, i.e. if I select "2008" with "margin", cars from 2008 +/-1 will be selected and I sort the search results by the manufacture year descending. And the earlier the manufacture date, the larger the margin.

It is a lot of logic behind the scenes, but still for the users that need very exact and detailed search options some "advanced search" facility can be provided.

Answer 2

you could achieve this by using a range slider. Like this:

Problem with this pattern: you have a fixed starting point. If your site deals with very old cars, this solution doesn't work. To get it to work with older cars you could display the from to fields as input fields. This way the user has the possibility to use the sliders or input the year directly.

Answer 3

For me a scale with two ways of interaction would work fairly well:

• if you click it then one value is selected
• dragging over a part would select a range

(Of course - as already mentioned in other answers too - it could be semi-logarithmic and values could be shown also in editable text boxes).

Although I have not yet seen this, so might not be very intuitive right at the beginning.