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). enter image description here

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. enter image description here

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.

  • I think both are good ways. But i prefer the first one as user can see the arrow(up or down) or plus or minus icon near the title text. Jun 4, 2012 at 17:24
  • As an aside: no matter which option you pick, the whole title block should be clickable to toggle the block's visibility unless you also allow the user to drag it around.
    – Kit Grose
    Jun 6, 2012 at 3:35

5 Answers 5


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.

  • 1
    This is a great response. More in line with what I'm looking for. I'm going to wait to see if anyone comes up with documentation or research before declaring and answer.
    – mawcsco
    Jun 4, 2012 at 19:09

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:

Screenshot of a Windows 7 window with labels describing its features

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):

Screenshot of the Windows UAC dialog

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):

Screenshot of the Windows Vista Security Center window

Image taken from this page on Microsoft.com

  • Thanks for that research. Your post combined with the one above have provided the kind of information I needed.
    – mawcsco
    Jun 6, 2012 at 14:16

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.

  • "I think both options are well understood" are you basing this on anything? You may be right, but this sounds like you're just assuming this is the case.
    – JonW
    Jun 4, 2012 at 16:55
  • @anna-rouben I'm looking for some documentation that establishes one or the other as being superior for reasons discovered in research or something to that effect. I will amend my question to reflect this clarification.
    – mawcsco
    Jun 4, 2012 at 17:14

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.


IMO, these are the conventions:

1) Section-expanding and section-collapsing arrows go to the immediate left of the text. 2) Menu-opening arrows go to the immediate right of the text.

Maintaining those conventions helps to distinguish the two types of arrows in the visual grammar of the interface.

Placing any arrow far away from the text makes it harder to find and should be avoided.

  • Welcome to the site, @Raxin. Can you cite any sources that support your claim that those are "conventions"? Dec 28, 2015 at 21:27

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.