Is there a preferred location for Expand / Collapse?

Question

I'm in the process of designing a form that contains both required and optional groups of information. We currently use group section headers throughout the application so I've leveraged them here for consistency, but this is the first time we're expanding sections.

My question is, where should the expand/collapse icon be located in this scenario, where there's a mix of expanding and static sections?

The left hand side placement seems to be more logical, but the right side placement ensures that the group label always starts in the same place.

Answer 1

I'd say either full left, or full right. Not zigzaggy in the middle. Consistency is super important.

However, have you considered making the whole row act as a button? This would make it a much larger touchtarget. It has the minor drawback of making the label text slightly harder to select but not impossible; try selecting one of the 'related questions' from the righthand sidebar for example.

You'd end up with something like on this site: It doesn't really matter how you style it, you can choose to (and I'd advise that) still include a + or V as dropdown indicator to show the difference between expandable and non-expandable headers.

If you've got enough but not excessive whitespace and your icon is pretty solid (uses many pixels, so ▼ instead of ▽) I'd move it all the way to the right, so it stands apart of the label. That way you could easily skim to see which parts could expand and which not.

Answer 2

The expand icon on the right can help the flow feel more "natural". Placing it on the left can create a consistent look but the "expandability" is a secondary information, primary information you want the user to notice is the content, aka text.

Answer 3

Option 1 is better compared to Option 2. The + buttons at least get to look consistently positioned and easier to identify once its action is learnt.