We have to display 4 states for certain groups or positions in our org tree. It's rare to show all 4 states so in the mock-up below, I only show 2 states.

The sequence for my mock-up, is as follows

  1. Select one or more resources. In my example Vesper Lynd and Honey Rider are selected.
  2. Now select a position in tree (Training Manager).
  3. From the Actions menu, select Remove

The 'Training Manager' position would update, and display the pending deleted members indicated by the '-2'.


download bmml source – Wireframes created with Balsamiq Mockups

The engineer came up with the notation i.e.

  • Members = number (green font)
  • Pending Members = plus number (green font)
  • Non-members = number (red font)
  • Pending deleted members = minus number (red font)

Anyone lost?!

Some other context, we added a settings filter so the user can choose to toggle the visibility of these states. The requirement was to show these states by default though. We showed this to a small set of users who where confused by the numbers, especially because in the brackets we display how many are already in that position. I've also mentioned to the engineer we shouldn't rely on colour to convey meaning.

The previous iteration used 4 different icons, but the UI look cluttered. Can anyone propose a better way to display this information?


1 Answer 1


It sounds to me like you need a treegrid, since you basically wish to display a tree with 4 additional columns. This would also make sure that the numbers of each type are aligned and unaffected by the different lengths and indentation levels of the nodes.

Here's an example:


  • Yes, that would improve the organisation of the data. But would you still use the notation or full description in the columns?
    – jamesy
    Commented Jan 8, 2014 at 9:14
  • Just the numbers in the column cells, without the font games, and the descriptions in the column headers. I'd make the text wrap in the header row, so instead of having very wide columns that only contain numbers, you make them narrower. Meaning that "Pending members" and the other titles are broken down into two lines within the header cell. Commented Jan 8, 2014 at 10:08
  • 1
    Got it — I mocked up another example using your suggested 'Tree Grid' view link. Thank you for your help.
    – jamesy
    Commented Jan 8, 2014 at 11:20

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.