19

I have a drop down checkbox where there are 8 items to check. Two are selected by default.

I am trying to think of an intuitive way to let the user know they have to deselect the existing ones before checking another, and that they have to have exactly two checked (no more, no less).

I think I am happy to use JavaScript to help, perhaps some sort of tool-tip or notification. Any ideas? I'm open to alternative options other than a drop down checkbox too.

Improve this question
1
  • 3
    What will be the context for current drop down? if you add the context it will help us to answer the alternative options as well as to understand more about current scenario
    – Andy
    Dec 11, 2013 at 10:38

6 Answers 6

Reset to default
21

I'd suggest putting a button that they have to press to complete the selection, and using that button's label text and active/disabled state to transmit the information you want to pass to the user.

Something like this:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The idea is that the combination of the selected options and the text in the button makes it clear to the user what they need to do to proceed.

Improve this answer
8
  • Nice idea, however I think the user should be able to select 2 as a maximum, not exactly 2 (from the question: "they can only check a max of 2") I think this approach could still work well with a suitable tweak for this requirement though.
    – JonW ♦
    Dec 11, 2013 at 13:34
  • Serves me right for not reading the requirements thoroughly. The obvious fix is just to make the button in the middle version active (and green).
    – Racheet
    Dec 11, 2013 at 14:11
  • Ahh actually I got the requirements from the title which says that "2 and only 2 options must be selected"
    – Racheet
    Dec 11, 2013 at 14:22
  • Yeah I didn't notice the question body myself at first. I've added a comment to it to ask for some clarification.
    – JonW ♦
    Dec 11, 2013 at 14:49
  • No 2 are required, not just as a maximum, but required. It must be at least 2 and at most 2. This is a really good idea, except, with the defaults selected, we still need the user to know that they have to deselect some of the default selections.
    – Source
    Dec 11, 2013 at 20:00
19

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You can go to a two Combo interface. The first one with all the choices, and the second one with all the choices and an empty field.

Improve this answer
4
  • That would be an easy idea, but isnt going to look right. Perhaps I could do it like that in a drop down div though.
    – Source
    Dec 11, 2013 at 20:01
  • 3
    I like this approach. Be sure to take out the selected option in Choice 1 from the Choice 2 list once Choice 1 is made though.
    – GHP
    Dec 11, 2013 at 20:59
  • @Graham Or do a check to ensure the selected values are not the same
    – Grant Palin
    Dec 16, 2013 at 23:31
  • Dropdown lists are one of the most uncomfortable controls, let alone when there's only 8 options (as the OP says). Joel's criticism still holds: joelonsoftware.com/uibook/chapters/fog0000000063.html
    – Konrad Morawski
    Dec 18, 2013 at 9:49
7

Just use some kind of alert message, really. It is fine. I don't see a need to use a different interface solution as you have only 8 options and need to select just 2 of them. Also, the checkboxes represents well enough what the users need to do, which is to select multiple options.

Take a look at the image below, if a user tries to choose more than two options (like "Sleep"), show a message. Let the user explore your interface and learn its limits, they can, and you already did a good job using standard and well-known components which they know how to use.
enter image description here

Improve this answer
2
  • 2
    If the Sleep (and other currently not-selected checkboxes) are not available, then why are they enabled? I would disable the not available options in such a UI.
    – André
    Dec 17, 2013 at 12:07
  • @André I agree, that would be nice to do. As the two options are already checked, everything else is disabled. As soon as the user uncheck something, every other checkbox becomes enabled again. The message can appears when the cursos goes over the checkboxes. I'm not sure what solution would perform better, but I definitely like your idea.
    – pcattai
    Dec 19, 2013 at 0:02
6

I think the best solution is multiselect dropdown list like this sample - Chosen. You can limit number of possible selections and warn user if he try to make extra selection or disable all items in list. But he will be able easily delete previously made selection to make new one.

enter image description here

Improve this answer
5
  • 1
    combine this with Racheet's use of dynamic button labeling and you got a winner
    – hubson bropa
    Dec 12, 2013 at 22:27
  • I wouldn't use a dropdown list unless I had no choice. A regular listbox is much better. There's only 8 options in this case, why would you want a dropdown. joelonsoftware.com/uibook/chapters/fog0000000063.html
    – Konrad Morawski
    Dec 18, 2013 at 9:54
  • @Morawski I agree with you but also I think that we have no incorrect answers here - they all will work, so the main task is to choose more suitable for particular situation. As for me I like this control because it has more compact size than listbox as well as it's pretty informative.
    – Serg
    Dec 18, 2013 at 11:12
  • @Serg - the more compact size is precisely the problem in my opinion. Saving on space (at the cost of convenience and forcing one to do more clicking) should come from a specific need, and not be a default choice.
    – Konrad Morawski
    Dec 18, 2013 at 11:34
  • @KonradMorawski I agree - this is no ideal solution. As Andy said in comment to this question we need more about scenario.
    – Serg
    Dec 18, 2013 at 11:40
4

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Present the person with a list of options, and a list of visible placeholders for their choices. When they click an option on either side, it should disappear from that side and reappear on the other.

Once two choices have been made, let the user progress.

Improve this answer
7
  • 1
    I like it. A good thing about it is that - unlike eg. @pcattai's answer - it allows for explicitly overriding one of your choices. I mean, once you've already selected both options, you don't need to unselect anything prior to selecting another one. Because this UI inherently "knows" which of your previous choices you want to replace.
    – Konrad Morawski
    Dec 18, 2013 at 9:52
  • how would keyboard selection work here? Arrow keys & Space/Enter?
    – Vijay
    Dec 19, 2013 at 4:51
  • @Vijay That seems the most intuitive way to deal with it. Left/right to hop between lists, up/down to change selection within the list, and space/enter to shift the current selection to the other side (if there's room).
    – doppelgreener
    Dec 19, 2013 at 4:52
  • Thanks. I like your answer more as the visual cue is quite clear and immediate, no text parsing needed. However, how would you handle 1 or more upto 3 case? 3 dotted boxes, and then?
    – Vijay
    Dec 19, 2013 at 4:56
  • @Vijay As many placeholders as necessary. For only 1 selection this pattern wouldn't even be necessary as you can just make a normal single selection. This may begin to break down for larger sets, but this is only designed for 2.
    – doppelgreener
    Dec 19, 2013 at 4:58
0

Another alternative could be to do something sometimes seen in software applications, where items from one column can be selected to move into the other column, and the reverse. There could be a validation check for how many items are already in the second column, if any.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

It's not obvious in the image, but it can be possible to select multiple items in either list for moving, rather than having to do them one by one. Though for the criteria - two exactly - it may not be much of an issue. Another note is that it's possible to double-click an item to move it from one list to the other, which also reduces moving and clicking.

Improve this answer
3
  • Sorry but it feels clunky and very 1990s to me. It's not particularly comfortable. Note that if you selected "Item 3" and "Item 4", but realize that you actually want to select "Item 3" and "Item 2", you need to: a) click "Item 4" on the right list; b) click the <-- button c) click "Item 2" on the left list d) click the --> button. That's 4 clicks. Not a smooth experience. Compare it with ux.stackexchange.com/a/49127/10579 (my favorite) - just 1 click, drag and drop "Item 2" from the left onto "Item 4" on the right.
    – Konrad Morawski
    Dec 18, 2013 at 9:58
  • @KonradMorawski You're not wrong with the issue you point out. I added some notes to my response which can enhance the usability of the solution. No it's not pretty, but I see it come up occasionally and it is functional.
    – Grant Palin
    Dec 19, 2013 at 2:48
  • I am guilty of using this construct! :). It's similar to jonathon's answer and it's the best use of a common construct.
    – Vijay
    Dec 19, 2013 at 5:14

Your Answer

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

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