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.

Improve this question
6
  • 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
    Commented Jun 4, 2015 at 8:23
  • I think the problem is the 'or more' - hence the need for 13 checkboxes.
    – PhillipW
    Commented Jun 4, 2015 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
    Commented Jun 4, 2015 at 9:36
  • @Stefan de Bruijn is this UI for a touch interface ?
    – bbh
    Commented Jun 4, 2015 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
    Commented Jun 4, 2015 at 11:06

3 Answers 3

Reset to default
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

Improve this answer
1
  • 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
    Commented Jun 14, 2015 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

Improve this answer
5
  • 1
    That's quite a cool widget! I'd have to make one on Android myself, but nice suggestion!
    – Stefan de Bruijn
    Commented Jun 4, 2015 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
    Commented Jun 4, 2015 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 C
    Commented Jun 4, 2015 at 11:53
  • 4
    I did not enjoy using that slider. It would likely infuriate me on a mobile device.
    – MonkeyZeus
    Commented Jun 4, 2015 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
    Commented Jun 5, 2015 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|
Improve this answer
5
  • 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
    Commented Jun 4, 2015 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
    Commented Jun 4, 2015 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
    Commented Jun 4, 2015 at 12:04
  • @bluntfakie Sorry missed the dragging part :) Would be easier to make than Marvin's bar probably... :
    – Stefan de Bruijn
    Commented Jun 4, 2015 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
    Commented Jun 4, 2015 at 13:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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