Best way to toggle data tree expanding/collapsing

Question

I have a data tree that looks like this:

The blue button in the header is the master toggle button to expand or collapse all items in the tree.

The issue raised that I'm not sure the best way to approach is:

If the user has partially opened the data tree like above, by clicking the mater toggle button should this make the entire tree collapse or expand? Or should I have two separate buttons, one for collapsing the tree and one for expanding?

Answer 1

Use two separate unambiguous controls, and you can use text labels for clarity.

Toggling on and off is confusing, and the icon you're using looks more like a org chart icon turned sideways...

This way you avoid the problems that come with toggle buttons, in which the state change is unclear, and using text for labels instead of icons doesn't make the user guess.

See this icon usability article.

Due to the absence of a standard usage for most icons, text labels are necessary to communicate the meaning and reduce ambiguity.

I would skip the icons for now, and just use text.

^{download bmml source – Wireframes created with Balsamiq Mockups}