I often come across different ways of representing the expand/collapse behavior. Which one is more correct?

Option 1 (arrow left - arrow down)

Option 1: arrow left - arrow down

Option 2 (arrow down - arrow up)

Option 2: arrow left - arrow down


Option 2 seems more correct.

You expand the dropdown box downwards so an downward arrow makes sense. Also the dropdown has a downward facing caret by default on Chrome and a lot of other programs.

The upward facing arrow also tells the user that the dropdown box will go up again.

the inward facing arrow of option 1 is confusing to me because it doesn't shorten the bar for example.

So option 2 is probably more natural and the way to go.


That's definitely the second option.

The button gives hints to the user about the action it engenders. In the second option, the facing down arrow tells the users there is more to see under it ; so that's more logical. Respectively, the facing up arrow button tells the user to collapse to the top the expanded panel (indicates the direction).

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.