I often come across different ways of representing the expand/collapse behavior. Which one is more correct?
Option 1 (arrow left - arrow down)
Option 2 (arrow down - arrow up)
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.Sign up to join this community
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).