2

Say I have a page where I want to be able to select what people are on what team. Each team can have up to 3 participants(so height shouldn't be an issue) but the same people can appear on multiple teams.

Originally, I thought of having using a tree(FuelUX or otherwise), but a tree does not do a good job of the case where the same person belongs to many teams. I could do it by duplicating the name entry, but that brings confusion.

enter image description here

The problem is, there is a large difference between how many people are in a group(1-3) and how many are available (20-60). Additionally, the user should be able to see who is not in a group and who is a glance (hence the tree would have worked had If I didn't need a person to belong more than one group).

What would be the best solution for this? My best idea is to split the group creation and modification into two separate pages. First the groups are creating, then the user individually looks at each group in detail and selects who belongs in it(again, with 20-60 people, displaying all at once is not a good idea). It's tricky to make this look good AND make it obvious that each team is editable.

I'm stumped, Any suggestions?!

Improve this question
1
  • 1
    How many groups do you expect? If just a few, then a "checkbox" grid with the groups across the top and the people along the left, might work. Could even work with more than a few groups if you display the group names at a 90 degree angle (vertically). Group creation could still be "as and when needed" as it would "only" mean adding another column.
    – Marjan Venema
    May 16 '13 at 20:20
4

Have you looked at the Google Plus Circles UI? That's an awesome way to move a large number of people into smaller groups.

enter image description here

It solves a number of your requirements:

  • people can be in multiple groups

  • it's easy to show people that are not yet in a group by filtering the overview of available people

  • it makes great use of your screen real-estate for at-a-glance overview

  • it looks great

Of course you need to tweak this for your specific situation, but it's a nice pattern. Just be sure you put in all the animations and other fancy stuff ;)

Improve this answer
1

This is a bit old school but perhaps will help stir the creative juices.

A list builder is a classic example of this functionality. In that case, the tree grid ends up being the "view" of the teams (and in this case, you could pivot that view by teams or by people/players).

The benefits of the list builder, assuming attributes may have a one:many relationship, are that you can assign the one (people) to many teams and display it.

Brain is stumped on a web example of this, but MS Excel > Customize the Ribbon is a good example. enter image description here

Improve this answer

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.