I've got a reasonably simple requirement but can't come up with any appealing ways of presenting it to the user.

To meet the requirement, the user has to be able to choose 1 or more age groups, ranging from 6 to 18. In its most simplest form, it would be a row or grid of 13 checkboxes with the values 6 to 18.

The selection can be completely random, i.e. 7, 10, and 18 so any kind of slider or other selector that would work with a maximum value won't work.

I'd love to hear some ideas on how to make this more appealing to the user.

  • You mention age group? But your examples states ages, 7,10,18 etc. If you need to know the age of the user why not use a text box or a drop down menu with the full range? – Daniel Zahra Jun 4 '15 at 8:23
  • I think the problem is the 'or more' - hence the need for 13 checkboxes. – PhillipW Jun 4 '15 at 8:26
  • @DanielZahra Sorry, age 'group' might not be the best description. Its simply multiple ages. It is however not free-for-all, the 6 to 18 are choices that the user is limited to, so a simple input won't be enough. I do have a full screen for this selection (together with some other simple options) so a dropdown to save space isn't needed either. – Stefan de Bruijn Jun 4 '15 at 9:36
  • @Stefan de Bruijn is this UI for a touch interface ? – bbh Jun 4 '15 at 10:05
  • I don't get the first paragraph of your question. I don't think your question was migrated here, and if that isn't the case I don't understand why you mention stackoverflow at all. Also such comments are generally considered useless noise in a question text. Avoid them. If you have to add that as a comment to the question itself. – Bakuriu Jun 4 '15 at 11:06

Maybe something like this could work:

Since you have such a small number of options just make them large, press-able buttons which display a checkmark once you tap them.

This list obviously scrolls off the screen but I think you get the idea.


download bmml source – Wireframes created with Balsamiq Mockups

  • I'll accept this answer just to end the thread. I'd probably have gone with something like this. Fortunately, I could circumvent the whole situation by reshaping the data, completely skipping this awkward question. – Stefan de Bruijn Jun 14 '15 at 3:45

One idea: draggable multiple range sliders

Instead of 13 checkboxes you could use one slider, on which the user can select multiple ranges and single values.

See an example of such a slider here: http://blog.153.io/Elessar/. Your slider would then go from 6 to 18 and instead of having time labels you could show the selected age. When moving the spans you have to update the label.

enter image description here

  • 1
    That's quite a cool widget! I'd have to make one on Android myself, but nice suggestion! – Stefan de Bruijn Jun 4 '15 at 9:32
  • 5
    Nice answer. I played with that control for a while but after adding a bunch of items I couldn't work out how to remove one. From some GitHub comments I noticed it's possibly by double-clicking middle-mouse-button but this didn't work for me. – demoncodemonkey Jun 4 '15 at 11:24
  • 1
    A requirement like that will never have a simple control, so this feels as intuitive as possible. If you have to create a new one yourself I'd divide the slider into equal boxes (kinda like @bluntfakie's answer). This way you are sure about which ages you selected. – Vince Caregnato Jun 4 '15 at 11:53
  • 4
    I did not enjoy using that slider. It would likely infuriate me on a mobile device. – MonkeyZeus Jun 4 '15 at 15:07
  • 1
    OTOH I liked it quite a bit (on OS X with a touchpad). There is room for improvement, of course. I couldn't figure out how to remove a slider, either; the sliders don't combine when adjacent (which you'd want for age ranges but not for e.g., appointments); and it doesn't support zoomin/zoomout gestures (which I expected to increase or decrease the range of the selected slider). But as an interface it's quite nice. – alexis Jun 5 '15 at 12:10

Painting a row of numbers

Imagine you have a row of numbers in boxes, you can click individual boxes to select/deselect them, or you can click and drag to select multiple ages.

Click to select ages (click and drag to select multiple ages)
  • 1
    I don't see how this is better than having a row of checkboxes, apart from saving minimal space by deleting the box – Stefan de Bruijn Jun 4 '15 at 9:33
  • 1
    The benefit this method has is it allows the user to select a range (e.g. 10-15) with a single click and drag motion. However without knowing more about the requirement I cannot say for sure if this is a common action, it might actually be more common to select many non-consecutive ages, instead of a range. – bluntfakie Jun 4 '15 at 9:57
  • 1
    I like this. Saves space, could look nice, probably easier to implement and easier to use on a mobile than marvin's suggestion. An image would help translate your answer though. – Prinsig Jun 4 '15 at 12:04
  • @bluntfakie Sorry missed the dragging part :) Would be easier to make than Marvin's bar probably... : – Stefan de Bruijn Jun 4 '15 at 12:25
  • Since it's for touch interfaces, I think this would work really well. I'd present it mainly as checkboxes, so that the user can just tap each if he doesn't get the painting metaphor, but provide a subtle hint for the power users. – Peter Jun 4 '15 at 13:55

Your Answer

