I have a summary card for a web-based application which expands into an interactive table that consists of different users and permissions from Custom to Read, Write, Deploy, etc. There will be dropdown fields to add projects and permissions.
Attached image with one user but will be repeated to create more users.
The requirements are:
- Projects can have one or more permissions but won't be a lot (done)
- Permission types will be growing (that's why I used a dropdown)
- There should be a summary of projects with permissions and expand in a table format for users to add, edit, delete project permissions (located on top of the mockup)
- It is important to see custom permissions from different projects than to see all possible permission types. If there is more than one project with the same permission type, a tooltip will be used to indicate more.
- There could be up to three rows for the summary and show more details on expanding the summary card. If there are more than 3 rows in the summary, the rest of the details will be in the expanded table.
My questions are:
- How might we present the summary in a cleaner way where if the user expands the card, the data is still readable in the same order as the summary?
- The way it is arranged is that the permissions are grouped in the summary (1st row left to right, 2nd row left to right, etc.) and from top to bottom on the interactive table. I'm not quite convinced that the flow is readable or visually appealing. Does adding a pie chart in the summary help?
- Grouping the permissions into separate columns might not be possible because the permission types will be a growing list and the user adds a new row, input the project name, and set permissions in a row.
The permissions custom, read, write, deploy, etc. are listed vertically while the summary displays them horizontally. Is this acceptable? Perhaps add a label in each row to make it more clear that the permissions are sorted automatically? Or add labels and separate "add row" per permission type?
Does auto-sorting work in this case? The way I imagine it would function from this layout is when a user sets permission to a project in a new row, that row will automatically be arranged under the same permission type. Just like how Gmail alphabetically arrange labels after input.
Is there a better way of solving this problem?