Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a mobile application where I need to filter a list by a range. (Imagine a dating app where you want to filter people by age). How should one design the range picker?

A person should be able to define a lower boundary (example: from age xx) and a higher boundary (example: up to age XX) but does not have to set both and should also be able to reset it to "nothing".

Both values are integers btw.

I imagine it will be easiest to solve it in with two entry fields and a number entry, but I think I might be missing a better solution.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

share|improve this question
    
Have you considered a spinner? –  dnbrv Mar 5 '12 at 16:28
    
I have, though I don't know how android would handle that, if we wanted to do a phone gap app on an HTML basis. And I think spinners are not effective for options that go up to 80 options. If one could create a spinner with two wheels using HTML and phone gap, it might be interesting. –  Roland Studer Mar 5 '12 at 16:34

3 Answers 3

Text input on mobile is very "expensive" (physically) and causes friction, and therefore should be avoided if possible.

This is what I suggest:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The age labels at the 2 ends change as the user slides the knobs (put the edge ages on both ends).

Here's an example from the app "Karma"range sliders on Karma

share|improve this answer
1  
This. Considering you want to use PhoneGap/Android, consider using jquerymobile.com. They have really good/easy to use support for stuff like this. –  borego Mar 5 '12 at 20:03

Textboxes are hard to manage for users, but the built in pickers work very well. They are also supported by iPhone, Android and Windows Phone - even if they look different. The slider work well too if the range is low, but supporting age (over 60 steps) on a 3,7'' screen would be difficult to get right. Why not try the pickers?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Good Luck!

share|improve this answer

Yosef Waysman's answer is a good pattern to use, but keep in mind that it always should be easy to control both elements (also when they are close together). Consider adding 'tabs' on top of the first control element and below the second control element, to separate them when they are close together. Or, alternatively, when they are close and hitting the 'box', always select the 'From'-control first.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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