5

I need to give a user the ability to select (on/off) a subset of options from a list. There are over 100 of these choices to be made and the list will get longer. The data is not user friendly either. They are alphanumeric codes roughly 4 - 8 characters in length that would be practically impossible to remember. Essentially I need the user to easily be able to select a subset of these codes.

I can't imagine anything that would make this an enjoyable task for a user but is there possibly a more user friendly alternative to checkboxes?

Just for clarity the codes are for devices (i-1000 etc) that the user would like to be able to support.

Improve this question
6
  • 2
    Is it possible to provide some additional data along with the codes? This extra-data will help to filter and select sub-sets and give the sense to the codes as well.
    – Alexey Kolchenko
    Commented Dec 18, 2013 at 13:08
  • 4
    Can you give us any more detail? This does sound like a very arduous task of the sort humans are terrible at. Can any of it be automated? Can any of it be groups/aggregated into larger chunks?
    – Alex Feinman
    Commented Dec 18, 2013 at 13:25
  • I agree with Alex: maybe you should try to improve the task itself, not the UI?
    – Lovis
    Commented Dec 18, 2013 at 13:39
  • 1
    So probably you could group the handsets by hardware interface or some other features, which are significant while decision on support are made. Defenitelly, it's not the code but some features what lead the decision. The code is just shortcut in this case.
    – Alexey Kolchenko
    Commented Dec 18, 2013 at 14:04
  • 1
    Yes this is true. The code is what is important to me but maybe not to the user. It may also be important to the user but it will surely help to use handset names. Grouping into sub groups seems to be key here. If the grouping is done properly the user may be able to include or exclude whole groups pretty easily. Thus getting down from 100+ interactions to 5 - 10 which would be MUCH better.
    – JeffJenk
    Commented Dec 18, 2013 at 14:15

3 Answers 3

Reset to default
6

You could use this excellent jquery plugin called Chosen and allow them to select from a dropdown and this plugin will ensure the ones which are selected are then removed from the list but highlighted in the selection.

enter image description here

This will scale even if the number of numeric codes increases and keeps the length of the form constant

Note: I know this will become a problem if the user selects a large number of values but then having so many values without specifying sub buckets for them is an information architecture problem.

Improve this answer
2
  • 1
    I think, the problem still exists with this solution, as user should choose a lot of the items. So the main issue for me is to decrease the number of separate interactions (i.e. 100 -> 5).
    – Alexey Kolchenko
    Commented Dec 18, 2013 at 13:13
  • 1
    I like this as a solution. I agree with Alexey though 100 items in one of there is still going to be a problem. Perhaps I can break the list up into smaller groups and have a few of these multi selects.
    – JeffJenk
    Commented Dec 18, 2013 at 13:41
2

Why not break up the long list into sections? Then you could use accordion-type functionality to allow users to expand/collapse as needed.

Example of look and usage here: http://jqueryui.com/accordion/#default

Accordion menu

As an optional extra, you could write a list [updated in real-time] of the selected items in another part of the screen, or at the bottom. This would allow the user to track which items then have selected without have to review the entire list (which is presumable longer than a single page).

Improve this answer
1

You could have...

  • a left-hand column which has a (hopefully small) list of the collections of codes with checkboxes next to them
  • a right-hand column which has the full list of every individual code

When the user checks a checkbox for a collection, it will automatically scroll to the individual codes and check them (and optionally flashes a color to alert the user that they've been selected). If a user unchecks a code, then it automatically unchecks the collection to inform the user that the entire collection is not selected.

Improve this answer

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.