Having lots of checkboxes and an extra action for each checkbox

Question

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}

Problems:

• 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.

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.