4

I am designing a mobile screen where a user needs to enter a min/max price range on defective items in a house. For example, cost to replace roof $10,000 - $20,000.

I'd love to use a price range slider, although I'm not sure this is realistic since the maximum could potentially be extremely high. For example, cost to replace windows in a mansion could be $500,000.

Right now I am handling this by having a minimum cost and maximum cost text input, however I really don't like it.

Any ideas on how to handle this?

4 Answers 4

5

I can understand why you wouldn't want to use the input field, as this increases the effort the user needs to use the filter. But in cases like yours where you have described, you don't have a concrete range, the input field is the best solution.

The other solution you can use is to have ranges for the most common ones and also have the current input field if the ranges don't fulfill their needs. Check out Amazon's take on this.

enter image description here

This type for filters are most common on e-commerce websites and this helps reduce the learning curve.

3
  • I like this! Thank you! May 9, 2019 at 17:17
  • IS this there web or mobile approach? I don't have a ton of real estate on mobile. May 9, 2019 at 17:21
  • This is on their web app. You should check out the same implementation on their mobile app. May 14, 2019 at 4:39
1

If you know a minimum and a maximum value, an exponential scale is what you need:

When the price range is very wide, it is difficult to enter the desired value using a slider. We've all experienced how annoying it is to try to find the exact pixel position of a slider to get the desired value.

Additionally with a linear scale, each slider step has the same increment and it's too small in large values (you don't want to look for $500.000 by $1.000 steps) and too large in small values.

In your case, the value increment you need in small values is smaller (say $500) than near the upper limit (more like $50.000). The usual solution for this case is an exponential scale. This is how the volume knob works on a audio amplifier for instance.

price = 10 ^ (a * offset + b)
  • offset is the linear position of your slider (for instance 0 to 100)
  • b is a factor you pick so that 10 ^ b is your desired minimum value
  • a is a factor you pick so that 10 ^ (a * 100 + b) is your desired maximum
  • you can even modify the 10 to change how steep the change is

To avoid getting weird values (for instance 10 ^ 3.5 = 3162) round that price by keeping the first (or two first) digit and replacing the others by zeroes (to get 3000).

1

As the price range is just an estimate, entering a min and a max value can be replaced by a single price estimate and a margin of error as a percentage.

The price estimate would be a single value slider (exponential as in my other answer) and a radio button list with +/- 5%, +/- 10%, +/- 20%.

You can display the resulting range as a confirmation.

0

A slider with progressive scale should do the trick.

2
  • 1
    Why do you think this would the most optimal solution? May 9, 2019 at 4:51
  • Could you expand on this answer?
    – Mayo
    May 9, 2019 at 12:47

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.