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? – Alexey Kolchenko Nov 13 '13 at 14:08
  • The types are visible through the colour of text on the visible column. – Pesikar Nov 13 '13 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? – Jonathan Strate Nov 13 '13 at 15:22

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.

|improve this answer|||||

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

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