User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Radio buttons is for single option, and checkboxes are for multiple selection, but what would be the most ideal way to implement maximum two selection? do I:
whats the most ideal non invasive way to do it?
I have experimented with different solutions for a high traffic website, and the best approach was to use checkboxes and disable the rest of the options when the maximum is reached.
Initially the users see regular check boxes. There is a message telling users that they may select up to 2 options, but most of the visitors do not read it.
When the user selects two options, we disable the rest.
If the user un-checks one of the selected options, all checkboxes are enabled. The approach turned out to be intuitive even for inexperienced users.
Since this approach relies on JavaScript, there needs to be additional validation on submit.
disabled attribute prevents clicks from reaching the checkbox. It also makes controls inaccessible by keyboard. So if you want to remind people why they can't click on a now-disabled box, listening for clicks on the disabled boxes is not going to work.
Nov 26, 2020 at 11:04
You have a few options, but it all depends on how many choices you are giving the user to select from and how much recall they have (have they seen these options previously? Are they familiar options? Are they new to the user?). Here are some options that you may want to consider:
If you don’t have too many options to select from, then you may wish to consider using 2 select options. However, whatever choice has been made in one option will need to be disabled in the other. The downside of this, there is no immediate visibility of the options available.
You could use a select from many list. This can be limited by height, where vertical scroll will appear if the options are greater than the container height. Choices may then be added to the selection on the right-hand-side. Only use this if you have up to approximately 15 choices (scrolling through choices will be annoying). The downside of this, you are still able to select more than 2 options. I would allow this and add error correction to your model:
This allows the user to experiment, make choices and refine selection within your constraints.
Last of all, the solution that you have eluded to. Once 2 checkboxes have been checked, disable all other options. I would use this option if you have a lot of choices to choose from and the user needs to scan through all of the options and make a choice. If you do have a lot of options like this, consider whether the options can be categorised. If they can, split them up under category headings to improve scan-ability. The downside of this, users must deselect an option before they can refine their choice when 2 options have already been selected.
To answer your question on “wait until after submission to alert” or “alert in place and double check upon submission” — I think it would be nicer to have inline validation, so once more than 2 choices are made, the user is alerted and made aware that only 2 choices can be made. If we take my last example, and just allow users to select as many as they like, this removes the downside I mentioned which is arguably less frustrating. I would definitely add inline validation if you go with this option.
Assuming the number of options is few enough to consider something like check boxes or option buttons, try separate columns of radio buttons, one for each choice:
On selecting from one column, you disable the corresponding button(s) for the other (assuming choosing the same option twice is a problem). This prevents a user error from happening in the first place. In your case, two clicks, and the user is done. A simple change takes only one click. It doesn’t take much more space than using checkboxes.
A more ambitious alternative is to construct a physical metaphor to communicate the limits. This may be necessary if users are confused by the “1st” and “2nd” (e.g., thinking it implies a ranking that isn’t there). The exact metaphor may depend on the user's domain -you want it to be compatible and ideally communicate why two must be selected. For example, if it's about choosing two objects to "balance" or "oppose" one another, maybe show scales or a teeter-totter to place options on.
As a generic and compact example that implies limited resources, you could use hooks and a fixed number of tags:
Tags could be dragged and dropped, but simply selecting a hook moves the tag with focus to the option. Focus starts on a “stored” tag, so that’s three clicks to make two selections… not as efficient as columns of radio buttons, but it scales to higher limits and takes less space.
In the past, when we have to implement 'pick x of the below' I typically use jQuery to create a 'fade to yellow' tool tip. So, upon clicking of the fifth check box, you'd see this:
[x] option 1
[ ] option 2
[ ] option 3
[ ] option 4
[x] option 5 [3 of 5 options remaining...]
After selecting all the allowable options, a subsequent click on an unchecked box would produce the same visual tooltip but with an error message ala [You may only select 5.]
However, that's likely overkill for a max of 2 selections. In that case, I'd suggest going with Michael's suggestion.
If you look for a websolution you can take a look at JQuery Multiselect site, where are shown different styles. I like selectList most - you have a standard listbox and all chosen element will be presented as tags below.
Visually you could place two gray empty tags, which serves as a placeholder or sort of shadow. Thus users would recognise quickly, that only two selections are possible.
Image is adapted from selectList showcase
I think the selection process for large lists (and limiting those choices) has never been handles very well. The check boxes and the accumulator are okay but neither feels that good a solution long term. And the drop down solution is very limited by the number of the number in the list and whether users understand the list.
What about a predefined tag list, so users have a bunch of choices and they can select these moving them across, like the accumulator but more visual. This means the data can be presented in a flater style to stop people just selecting the top things of the list. You can then head up the boxes with some information about their progress.
