Here is the problem I faced during making mock-ups for one web application.

I have a grid that represents some essential details about "Roles". As you can assume the role is given profile to particular user within application, so following with the role that user is assigned, the user has certain permissions and prohibitions. The thing is that roles have tree structure, so each role has its parent and child (except the first role in tree, that only has children).

enter image description here

My problem:

How to represent path to the particular role in table cell. I am wondering what is the best way to show role's parents?

The possible problems are following:

  • The client I am working for has insisted to put path in "Role" column, next to the role. Something like "Agent (Administrator > Main Agent > Agent)". On the picture above you will see that I have placed path in another column called "Role Path", though.
  • The long path will not be visible in certain moments.
  • In future it is possible to add new columns, so the cell will get more condensed.
  • It may be confusing to users to figure out the order of roles.
  • It may be strange to see the full path of role within table cell.

Possible solution:

First of all, I am writing here to hear your possible alternatives to this problem. I am pretty fine with some mini pop-ups that shows up on hover, or after click on some button. At the very end of each row there is a drop-down list of actions. You can take this list in account when it comes to choosing right place for placing the button. Write down everything that comes to your mind and you think it has good usability!

I would appreciate any advice on formatting the path, in order to emphasize where the path ends. You will notice that I emphasized the last role. Also, some arrows would be better solution than slash.

I am looking forward to here something good from you :))


You can try something like this: enter image description here

There is no way to scape to the variable lenght of the Role Path, so I would try to: - add suspension points to end of it, that will inform users that it's cut. - add a clickable button to the end of it. Make sure the icon it's clear and obvious. - Clicking on the icon will reveal a row below with the full path, with a button to close, right below the "eye icon" button.

That will save you space and it's a quite simple interaction.

| improve this answer | |
  • That's nice solution Gualter! I really like it. That one think I would change it making some tooltip instead of creating new row. This way I think is more obvious. Another thing is, considering your solution it is very hard to determine the position of close button because the path length can vary from extra short to extra long :/. Anyway at the end I was forced to place path in "Role" column so the path continues after role name , so it looks like this now: Admin - (parent/child/child/child...) – Jerry Aug 4 '16 at 7:43

In Desktop applications, I have seen an Ellipsis (Wikipedia) together with a tooltip. The ellipsis tells the user that there's something not shown. The tooltip displays the missing information without the need of clicking something, which might change the content and layout of the screen.

In contrast to @Gualter's solution, which has the ellipsis at the end, I suggest putting it in the middle, because obviously the last part of that information is relevant.

In this particular case I suggest omitting only whole parts of the path and avoid Parent\ch...d\admin.


Ellipsis with tooltip

| 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.