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?


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.

| improve this answer | |
  • It's would be very cool too, I wonder just if 30 initial box would have good size.. – nlassaux Jul 19 '12 at 15:56
  • You can sort them as a grid. How is the groups/users proportion going to be? How many users and groups are there? – Marcos Ciarrocchi Jul 19 '12 at 16:16
  • I want to group users together. I think it will have around 30 users, so I will have 30 groups maximum (each user alone). It will be a grid of 3x10. After, I can make a dynamic system and useless boxes can disappear (if an user join a group, I will need 29 boxes, etc.) – nlassaux Jul 19 '12 at 16:38


  • 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
| improve this answer | |
  • Ah yes, I like this idea ! Is it difficult to do with jquery? – nlassaux Jul 19 '12 at 14:45
  • In my opinion? No, it's not difficult, but that depends on where you are with jQuery. – Vin Burgh Jul 19 '12 at 15:15

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.

| improve this answer | |
  • The problem is that we haven't got any global view :/ I need all on the same page.. – nlassaux Jul 19 '12 at 14:46
  • ok, I'm not sure what that entails.. =) – AndroidHustle Jul 19 '12 at 14:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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