1

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.

enter image description here

  • Keeping it to the left would be easier for the user to identify if the section is expandable. This will also lead to a cleaner design. – DarkBlaze Mar 24 '16 at 17:10
2

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

0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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