Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

  • disable all checkboxes after second choice?
  • wait till after submission to alert?
  • alert in place and double check upon submission?

whats the most ideal non invasive way to do it?

share|improve this question
    
IMO, alert in place and check is the best route - or, as per some of the suggestions, build the interface to only allow two selections. If my choices are restricted, I want to know this before I submit. –  Schroedingers Cat Jan 28 '12 at 13:36

6 Answers 6

up vote 7 down vote accepted

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.

The list of options before any are checked

When the user selects two options, we disable the rest.

The same list of options after the maximum number of items has been checked, with the other options disabled and the selected items emboldened

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.

share|improve this answer
    
I like the answer that displays a message tool tip next to it, but i went with this one since i only had two choices to allow user to make –  Ayyash Feb 29 '12 at 6:11

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:

enter image description here

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.

enter image description here

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:

enter image description here

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.

share|improve this answer
1  
Slightly off topic, but what software is used to make these mockups? :) –  F21 Jan 28 '12 at 11:39
    
Balsamiq: balsamiq.com/products/mockups –  DigiKev Jan 28 '12 at 12:58
    
I like these options because they scale nicely beyond two. However, under the philosophy that it’s better to prevent user errors than alert users about them, for the second option, I would use (two) text boxes rather than a list box to hold the selected items. This makes the limit obvious and it’s impossible to get more than two. –  Michael Zuschlag Jan 28 '12 at 16:31
    
dont u think its a bit too many clicks to perform a single "choose" action? the checkbox is inherently an "add-remove" control, having to click on another add button probably too much, if clicking on a checkbox visually transfers the item to the second box, it may be faster, but it may confuse the user if it wasnt smooth and slow enough for him to see it –  Ayyash Feb 29 '12 at 6:13

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. enter image description here

Image is adapted from selectList showcase

share|improve this answer
1  
This will take up slightly less screen real estate than the 2 select boxes I shown in my first example but you will need to also consider the following: 1). This is only good for limited amount of options, the example of select movies would be too long a list. This is only good for high recall 2). You will need a JavaScript fallback, which will likely be the 2 select boxes option 3). Possibility of confusing users as this is not usual behaviour for select options (being able to use it multiple times), and the control itself normally displays answer 4). You will need to disable after 2 choices –  DigiKev Jan 28 '12 at 10:23
    
Sure, there are always pros and cons. First two points are same with your two column view. You always need JavaScript fallback. And last two can be smoothen by good information design like "Choose two options in list below". Never heard of listbox "normally displays answers". Do you have any reference for that? –  FrankL Jan 28 '12 at 13:08
    
It is just how it works by default. No need for a reference. When you select an option, the option is shown within the input area. –  DigiKev Jan 28 '12 at 13:23
    
Okay, now I understand what you mean. Sure, thats different with this JQuery plugin. –  FrankL Jan 28 '12 at 14:04

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:

Column for 1st and 2nd 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:

Two tags on a storage hook, one hook per option.

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.

share|improve this answer
    
For just two, I think the two-column radio button list is perfect. A close second would be two SELECT lists. –  DA01 Jan 28 '12 at 19:53
    
2 fantastic and creative solutions. This would be my best answer. –  DigiKev Jan 28 '12 at 21:05

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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