range/single field switcher

Clash Royale CLAN TAG#URR8PPP

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
1
down vote

favorite

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 your grandpa) and the priority for range is higher than the single value.

interaction-design microinteractions

share|improve this question

asked 2 hours ago

UX Labs

1,70511020

add a comment | 

up vote
1
down vote

favorite

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 your grandpa) and the priority for range is higher than the single value.

interaction-design microinteractions

share|improve this question

asked 2 hours ago

UX Labs

1,70511020

add a comment | 

up vote
1
down vote

favorite

up vote
1
down vote

favorite

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 your grandpa) and the priority for range is higher than the single value.

interaction-design microinteractions

share|improve this question

asked 2 hours ago

UX Labs

1,70511020

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 your grandpa) and the priority for range is higher than the single value.

interaction-design microinteractions

interaction-design microinteractions

share|improve this question

asked 2 hours ago

UX Labs

1,70511020

share|improve this question

asked 2 hours ago

UX Labs

1,70511020

share|improve this question

share|improve this question

asked 2 hours ago

UX Labs

1,70511020

asked 2 hours ago

UX Labs

1,70511020

asked 2 hours ago

UX Labs

1,70511020

1,70511020

add a comment | 

add a comment | 

2 Answers
2

active

oldest

votes

up vote
2
down vote

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.

share|improve this answer

answered 2 hours ago

BrunoH

1,002413

add a comment | 

up vote
1
down vote

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.

share|improve this answer

answered 38 mins ago

Mike

2,628625

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "102"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
noCode: true, onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f121996%2frange-single-field-switcher%23new-answer', 'question_page');

);

Post as a guest

Name Email

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
2
down vote

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.

share|improve this answer

answered 2 hours ago

BrunoH

1,002413

add a comment | 

up vote
2
down vote

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.

share|improve this answer

answered 2 hours ago

BrunoH

1,002413

add a comment | 

up vote
2
down vote

up vote
2
down vote

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.

share|improve this answer

answered 2 hours ago

BrunoH

1,002413

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.

share|improve this answer

answered 2 hours ago

BrunoH

1,002413

share|improve this answer

share|improve this answer

answered 2 hours ago

BrunoH

1,002413

answered 2 hours ago

BrunoH

1,002413

answered 2 hours ago

BrunoH

1,002413

1,002413

add a comment | 

add a comment | 

up vote
1
down vote

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.

share|improve this answer

answered 38 mins ago

Mike

2,628625

add a comment | 

up vote
1
down vote

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.

share|improve this answer

answered 38 mins ago

Mike

2,628625

add a comment | 

up vote
1
down vote

up vote
1
down vote

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.

share|improve this answer

answered 38 mins ago

Mike

2,628625

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.

share|improve this answer

answered 38 mins ago

Mike

2,628625

share|improve this answer

share|improve this answer

answered 38 mins ago

Mike

2,628625

answered 38 mins ago

Mike

2,628625

answered 38 mins ago

Mike

2,628625

2,628625

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fux.stackexchange.com%2fquestions%2f121996%2frange-single-field-switcher%23new-answer', 'question_page');

);

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Name Email

Name

Email

Name Email

Name

Email