Best position for collapse indicator on collapsible content

Question

What is the convention/standard/best-practice for the placement of a collapse/expand button/indicator on collapsible content?

I've seen many examples of the placement on the left (left of title in LTR languages).

This seems very common in commercial applications and Open Source toolkits.

I've been told that the "standard" is on the right of the title area.

Is this actually a standard (or even established convention)? Where can I find the documentation on this?

I'm looking for documentation or research that demonstrates one vs. the other. In the absence of documentation, I'd like opinions with some support or evidence.

Answer 1

I've watched users struggle to find the right-aligned arrow like the second example. I think it's because:

• it is very far from the title
• it is all alone, and small (hard to spot)
• sometimes, it is off the edge of the window or even the screen.

In contrast, when it is near the title, people have a much easier time finding the control (whether it is > or [+] or v).

Also, they have a harder time clicking on the lone arrow, because it's small, and far from other things. (cf. Fitts's Law)

These usability tests provide only anecdotal evidence of the former over the latter, but that's good enough for me so far.

Answer 2

The likely reason why people thought of the top-right corner being "conventional" for this sort of thing is that Windows puts its window management widgets in that corner:

Image taken from this page on Microsoft.com

Depending on the way you deal with this box (e.g. is it draggable? Can it close/hide completely?), you may be giving some users (at least the person who raised the issue) a sense that the container should behave like a window does, as opposed to a simple collapsing section.

It's worth noting too, that Microsoft provides these controls (which they call "Chevron buttons") variously on the left and right of the header block.

For instance, here's Microsoft using the chevron on the left (for the common "More details" behaviour):

Image taken from this page on Microsoft.com

And here they use it on the right (the full gradient background is clickable to toggle the sections open and closed):

Image taken from this page on Microsoft.com

Answer 3

I haven't found research material about this problem. But I think that the first one is a derivate from from the common tree. This could be an argument why the first princible is more common. But it's my assuming.

Answer 4

I think both options are well understood. A lot of UI's also just give the header clickable (button) look so that the arrows are not even needed. Placing the arrow on the right makes the title a bit more readable I think than having it in front of the text.