Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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

mockup

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?

Thanks.

share|improve this question
add comment

1 Answer 1

up vote 3 down vote accepted

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:

treegrid

share|improve this answer
    
Yes, that would improve the organisation of the data. But would you still use the notation or full description in the columns? –  jamesy Jan 8 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. –  Vitaly Mijiritsky Jan 8 at 10:08
1  
Got it — I mocked up another example using your suggested 'Tree Grid' view link. Thank you for your help. –  jamesy Jan 8 at 11:20
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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