I need to manage a list of users who can have different roles on different websites. A user could manage up to 20 websites. I'm trying to find the best way to organize this information. The image below fails in that it does not show each user's role per each website. It would also get messy real quick if the user belongs to many websites.
-
Does the eventual UI also have to function as a CRUD interface? or are you just looking for a way to show a read-only list of all the websites a user is associated with?– dennisleesCommented Feb 8, 2017 at 20:19
-
It would also need to function as CRUD. I'm hoping to avoid uniquely listing each website & role combo. I'm also hoping to avoid adding any filters. The final solution does not need to be a table though.– casey deckerCommented Feb 8, 2017 at 20:23
-
2In situations like this we use expanding table rows. Like this bit.ly/2knD8JC - That at least would solve your location issue. Is something like that feasible?– dennisleesCommented Feb 8, 2017 at 21:54
-
Either expanding table rows like what @dennislees said or have a View action that either opens another page or shows a modal of more complete info.– jenCommented Feb 8, 2017 at 21:59
-
@dennislees I think that is the best solution given my restrictions. Thank you for the suggestion. jen +1 for similar line of thought.– casey deckerCommented Feb 8, 2017 at 23:01
3 Answers
For complex interactions (e.g. CRUD) on table rows, consider an expanding row
This provides the space for your interactions.
For simple interactions (e.g. read-only lists), consider a modal window.
I think the way Facebook lets users review all the likes on a given item is a good example of this.
You could present the overflowing row information as follows:
In case the websites managed by the user begin to overflow, you could include a chip that presents the count of overflowing websites, including the one that is partially overflowing.
As the user hovers over the particular chip, the user is shown a floating modal that presents the list of all the overflowing websites. This view facilitates quick view in case the user is merely browsing the table.
Also, if you notice, I have incorporated a drop-down chevron at the end of each row. In case you wish to present a detailed view of the user with all their information, say his/her contact, their company etc. you could create an expanded view in the form of an accordion that expands and collapses as the user acts on the row element.