Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
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. –  Surendra Vikram Singh Jun 4 '12 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 '12 at 3:35
add comment

4 Answers 4

up vote 5 down vote accepted

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.

share|improve this answer
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 '12 at 19:09
add comment

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

share|improve this answer
    
Thanks for that research. Your post combined with the one above have provided the kind of information I needed. –  mawcsco Jun 6 '12 at 14:16
add comment

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.

share|improve this answer
    
"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 '12 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 '12 at 17:14
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.