9

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
11

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.

mockup

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
14

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
5

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)
          | 6| 7| 8| 9|10|11|12|13|14|15|16|17|18|
  • 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

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.