0

For a website that provides kitchen renovations, we want to display a range of budgets. These are on $1,000s of dollars in a range from $35,000 - > $150,000

We are considering a range of ways to display this in an HTML dropdown:

1)

$35-50k
$50-75k
$75-100k 
$100-150k
$150k+

This seems practical, but at the same time messy/ sloppy. We are not overwhelming the eye with lots of 000's, but at the same time, we seem to be inconsistent with putting the 'k' at the lower end of the range and $ on the higher end of the range.

2)

$35,000 - $50,000
$50,000 - $75,000
$75,000 - $100,000 
$100,000 - $150,000
> $150,000+

This variant seems more tidy, but with all the 000's added, the 5 and 6 digit numbers appear "unaligned"

  1. Any combination or 3rd way?

We are looking for common/ best practices in terms of formatting money ranges in a dropdown. This is for the New Zealand/ Australian market.

Note: I checked 4 real estate listing websites in New Zealand and

  • 2 of them use separate dropdowns for low and high filter price. The formatting is $123k in both dropdowns
  • 2 use sliders with 2 controls on the slider.

The separation of low and high price range is not appropriate here. Using a slider is also unnecessarily complex, both for the user using it (the accuracy can be much lower at the higher price range) and the technology required and testing.

2 Answers 2

3

There is nothing wrong with the use of a dropdown unless there are only a few options to choose. Your concerns on how to display the options are right and can be solved as follows:

  • Remove the redundant "$" from the options and add it in front of the dropdown. The options start with a number which makes the list easier to scan.

enter image description here

  • Add the "k" to all values for clarity and consistency
  • Add a space between the values to increase readability

enter image description here

1

If the currency and the thousand symbol are the constants, and the variable is the quantity, I would separate the three elements, and put the variables between bars:

$ 35/50 k
$ 50/75 k
$ 75/100 k 
$ 100/150 k
$ 150+ k
1
  • 2
    Agreed about k placement, but that slash as a range is utterly unintelligible, at least to me as a North American! Commented Feb 1 at 23:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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