Formation of groups in a webpage

Question

I have to make a webpage to associate users (around 30) together into groups. I have thought about a vertical list of users with radio-buttons (number of users) in the line. Example:

  groups     1 2 3 4 5
John doe 1   O O O O O
John doe 2   O O O O O
John doe 3   O O O O O
John doe 4   O O O O O
John doe 5   O O O O O

And a column would be a group (O are radio-buttons). But it seems ugly for 30 persons and it must be confuse to see groups... Is there another alternative?

Answer 1

What about autocompleting the names of the members. Something like this:

1. Each group has a box with a list of its members.
2. Each box has a search form that can be used to look for the users (ideally with autocomplete).

If the users doesn't know the other users and they know better which groups are there it could be done the other way around: boxes for each user and search for the groups.

Answer 2

The most efficient and proven way, as far as I know, is by enabling multi-selection.

^{download bmml source – Wireframes created with Balsamiq Mockups}

The mockup above follows a similar design pattern for this as Google use in their Gmail for administrating what label/folder an email or group of emails should be associated with. This is a very efficient and streamlined way of handling this task. The administrating of user association that this regards would be totally transferable to a similar solution.

Answer 3

Perhaps:

• Create a five (5) column layout (whereas each column = a group) and produce a drag-and-drop interface from it
• Drag 'names' from one column (group) to another, respectively