I have a UI that allows admins to manage what groups a user is in. Currently the list of groups are listed as columns in a grid, stacked horizontally, and the list of users are stacked vertically.

For example -

        Group A | Group B | Group C | Group D
User A |   X    |    X    |         |
User B |        |         |    X    |
User C |   X    |    X    |         |   X

There are a couple hundred users, and the list is growing, and currently there are only a few groups. However, the UI needs a complete re-design because there will soon be over 80 groups, and the current layout will look horrible.

I'm interested in ideas on a better design that will greatly improve the user experience. I already know that I need to provide some search filter that allows you to filter by group and user, in case you want to see all of the users assigned to a group, or all of the groups that a specific user is in. However, I can't seem to conceptualize any good design for the layout.

Any insight is greatly appreciated.

Thank you.


Consider the use of typeahead suggestions for the groups. Select a user, then have a field where you can enter a few words and a group is presented you can click on. Power users could add groups directly using commas.

Check out this example from WordPress. These are tags, but when it comes down to it aren't your groups just ways of tagging your users?

enter image description here

In this example you can see that after entering a few words, a known tag is presented that you can click to add to the list below. WordPress allows you to use the same interface to just continue typing and add a new tag by hitting the "Add" button, but clearly you won't need that.

You could add efficiency by making each of the tags/groups in the list a hyperlink that would take you to a listing of everyone in that group.


Replicating a table with infinite rows and columns in a browser is a futile task. It will quickly turn into a replication of excel or google sheets.

Try a different approach, maybe like google+ where each user has a mini profile and they are grouped under different circles.


I'd start asking what the typical tasks are, and I could think of a couple:

  • Add a new user (which needs a list of groups to select the ones this user belongs to)
  • Add a new group (which needs a list of users to select the ones which should belong to it)
  • Change responsibilities (or whatever the groups represent) of a user because she changed her job (which needs a list of current groups for this user as well as a selection of the new groups)
  • some more, depending on your business.

Interestingly, all the examples above (and none that also comes to my mind) is supported well by the userXgroups table you show. The big table replicates the database design onto the screen, and ignores the user's tasks.

If I want to create a good User Experience, I'd design different UIs fit for the tasks, not one showing the database design. For this I guess, at least two UIs are needed, one showing a group with the possibility to change the users in the group, and one showing a user with the possibility to change the group assignment.

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.