2

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.

enter image description here

6
  • 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?
    – dennislees
    Commented 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. Commented Feb 8, 2017 at 20:23
  • 2
    In 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?
    – dennislees
    Commented 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.
    – jen
    Commented 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. Commented Feb 8, 2017 at 23:01

3 Answers 3

4

For complex interactions (e.g. CRUD) on table rows, consider an expanding row

This provides the space for your interactions.

enter image description here

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.

enter image description here

0

you can also try displaying is statistical way.

enter image description here

0

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. Chips to present overflowing website count

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. floating modal to present the list of overflowing websites

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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