I am trying to create an age picker and this is the best i can come up with:


download bmml source – Wireframes created with Balsamiq Mockups

the dropdown would have years, months, weeks and days and then a textbox to enter the value.

Is there a better way to do this?


It is for managing immunization schedules so values would be something like:

6 weeks to 2 months

2 months to 4 months

7 years to 12 years


Attached couple quick suggestions. I prefer the second one, as it

1) Exposes the options, rather than hiding them in a drop-down.

2) Reduces number of clicks to give a response.

In both solutions, the idea is to map the user's mental model of an answer, which is as you mentioned, something like - 2 months to 4 months

enter image description here


Is this for mobile or desktop? You can use a slider control for this as sliders are good for selecting ranges of values and can be used without any keyboard input

Age range:

  20            30

  • it is for a desktop app - a backend for admin types – aaron Dec 23 '15 at 3:12
  • I think a slider would work well. Just provide text feedback that describes the current value in appropriate terms (e.g., "3 months", not "0.25 years"). This might cause problems if there are some ranges that people describe using different terms (e.g., some people say "two months" and others say "eight weeks"), but I don't know whether that's common. – octern Dec 23 '15 at 20:03
  • Except if the aim is to supply values from 1 week to say 12 years, you're going to need a slider 12*52=624 pixels wide just to have a resolution of one week per pixel which will be very fiddly. Sliders work best when you don't know the final exact value to input but instead want to interactively vary a chosen value to see the effect it has e.g. a volume mixer or dynamic querying (say price ranges when online shopping) – mgraham Dec 24 '15 at 0:25

If it's for immunisations, and we know they occur at a set number of stages, can the two dropdowns not simply be an ordered list of options such as "Birth", "6 weeks", "2 months", "6 months", "1 year", "2 years" etc? That way you don't need the separate weeks/months/years control and it's easier to read. It'll depend on whether your users need the extra flexibility to enter values like "7 weeks" or "11 months".

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.