I am using a similiar interface to Lisa Tweedie's awesome answer to my question on what to do if you have too many checkboxes.

I am going to be using an interface similiar to this for selecting groups a user is part of. A user can be part of none or multiple groups. One group will be nominated as his primary group.

Currently, the interface looks like this:


download bmml source – Wireframes created with Balsamiq Mockups

The interface works really well, but now I need to add an action to each group choice. A user can be part of multiple groups, but he has to nominate one group as his primary group. The user should be able to nominate the primary group in both the "Selected Groups" area as well as the "Group choices area". There should always be one group that is the primary group.

One possible way I thought of:


download bmml source


  • If the user accidentally clicks the "make primary" button, the group will also be selected. He might not notice this and just assume nothing untoward has happened.

  • There isn't a way to make a group primary using the interface under "Selected Groups".

  • It might be hard to find an icon that represents "make primary".

What are some ways to achieve this with the interface? The interface needs to be designed with the assumption that there can be an infinite number of group choices.

  • Hey cheers for the vote of confidence (: Jul 15, 2012 at 2:23
  • I don't think you should double up the functionality. i.e. clicking on the star should not also turn on the checkbox. In fact the stars should probably be greyed out until the checkboxes are selected. This makes each action extremely clear to the user and avoids the "accidentally clicking" scenario. Jul 15, 2012 at 2:32

1 Answer 1


I'm not convinced that an infinite number of group choices can be realistically shown in the bar at the top, but assuming that there are only four or five out a large number of possibles, it might work.

A two-state control is needed for "Primary" — either a group is primary or it isn't. This is similar enough to browser favourites for a coloured star to be a candidate: the coloured star indicates the primary group.

I have no idea how this interface is to be made accessible. At the moment I can only think that a purely text-based set of pages would be needed (using the search function is most problematic; everything else can be made reader-friendly).


download bmml source – Wireframes created with Balsamiq Mockups

To address your problems:

  • Changes to what is shown in the top bar need to be obvious. Making an unselected group the primary (and thus selecting it) must add it to the top bar in an obvious way — perhaps by adding it at the front with a highlight colour which fades to grey. Similarly, unchecking a checkbox needs to remove the entry from the top bar — highlight it, fade out completely and close up the others.

  • Duplicating the star in the top bar allows that to be used (in the same way as the "Delete" X icon duplicates the checkbox).

  • I think a star is common enough.

  • +1 This seems like a decent solution. I think you should be wary of adding any more than one or two forms of interactivity (delete box and star) for each element might affect the intuitiveness of the display. Jul 15, 2012 at 2:30

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.