Minimum and maximum height filters

Question

I'm building a dating website and one of the search filters is for a person's height. A user will be able to select a minimum and/or maximum height. By default these will be set to "Any".

Since the site's target audience is the UK, I need to display the values in feet and inches. I need to make the process as quick and easy as possible.

The best solution I can think of is having two dropdowns (one for min and one for max). These will contain a list of all the possible values, e.g:

• 5ft 4in
• 5ft 5in
• 5ft 6in

In all there are likely to be around 30+ values in each dropdown. That's quite a lot to scroll through.

Is there a more intuitive way to do this? I was thinking of using a slider, but the filtering section will be quite narrow and I don't think I can get all the values on a slider.

Answer 1

In my experience, when people talk about their "type" they tend to say that they prefer certain attributes using language instead of mentioning specific sizes, here is what I mean:

• I prefer people taller than me
• I prefer people smaller than me
• I wouldn't date anyone smaller than me
• Height is not something I care about when dating

As long as you capture the user's height on signup, you will be able to set the range yourself, and allow users to pick a few options that suit which you could convert to numbers for search purposes e.g.

I am 5'6 and if I was to say that I like people taller than me then the range would be

"WHERE Height > 5'6"

To come up with the options, you could also survey people and ask them the question, then you will have a good idea of the specific language used to put your options together, as well as working out which ones are the most important in terms of ordering.

Answer 2

You can use vertical sliders. Once user clicks on min / max input fields, above it on top toggled is slider where you can scroll up <> down (just like with normal range slider, just vertical). Ofc include info on current state and selected state always.

If you want to get for extra attractiveness you could next to that slider show sillouethe of a person or have a fine tuning like that :)

Answer 3

I like the double slider, where the minimum is on the left and the max is on the right. Here's an example of a double slider implemented by hotels.com for setting the price range for a hotel search. Now imagine that instead of dollar values you're setting a range of heights.

Answer 4

I don't know, but my guess is most people can't pin their "height preference" (assuming they even have one) down to a specific inch... therefore, it might be easier if – instead of 30+ specific heights – you had a smaller number of probably-overlapping bands for both their minimum and maximum choices. E.g. something like:

• Under 5'2"
• 5'0" to 5'4"
• 5'2" to 5'6"
• ...
• 5'10" to 6'2"
• Over 6'0"

Obviously, there's a trade-off between how wide the bands are, and how many of them you will need to cover a representative range of heights.

A second alternative is to have just one set of bands for the user's preferred height range as a whole (rather than two controls for their preferred minimum and maximum heights). This would mean one less thing for the user to pick from, but would give the user no control over the size of their preferred ranges.