I have a small and a wide version of an hierarchy which contain different types.

In the wide version the type of items is chosen based on the parent type. The types are not fixed to the hierarchy and can be changed.

The problem lies with the small version, here when the type is automatically determined it is not easily changed by the user.

How to make it easy for the user to select the correct type of item in a small tree?


download bmml source – Wireframes created with Balsamiq Mockups

  • In the small version initial types are invisible, so how user could decide to change a type? Commented Nov 13, 2013 at 14:08
  • The types are visible through the colour of text on the visible column.
    – Pesikar
    Commented Nov 13, 2013 at 14:57
  • Is it possible to add a small edit icon next to each item that triggers the select list for changing the type? Commented Nov 13, 2013 at 15:22

2 Answers 2


Standard solution is to use checkboxes:


download bmml source – Wireframes created with Balsamiq Mockups

It is not very nice looking, but it is easy to understand it's behavior. Also I'd recommend to display type of item with icon, not with text of the label — the tree will have less visual distractions in compact representation. To change the type of one item show the triangle only when the mouse is over it — it will also make visual communication more clean.


I agree with Jonathan Strate. Adding a small edit icon or link will help. It will also use less real-estate. How about something like this? list tree

Reference: http://dropdown-check-list.googlecode.com/svn/trunk/doc/dropdownchecklist.html

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.