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.

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:

mockup

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:

mockup

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.

share|improve this question
    
Hey cheers for the vote of confidence (: –  Lisa Tweedie Jul 15 '12 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. –  Lisa Tweedie Jul 15 '12 at 2:32
add comment

1 Answer 1

up vote 3 down vote accepted

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

mockup

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.

share|improve this answer
    
+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. –  Lisa Tweedie Jul 15 '12 at 2:30
add comment

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.