What expand/collapse representation is correct?

Question

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)

Answer 1

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.

Answer 2

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).

Answer 3

Can you provide more detail about the content that you collapsing ? Is it a menu/list of items to be chosen? Or text area inputs?

Anyway, in my opinion: 1st option seem wrong to me. I am not used to see the symbol pointing left.

2nd option seems logical and user will understand.

But I have a concern about the symbol position at the right, maybe nothing is wrong but its seems more standard to place on the left. for example WindowsOS shows on the left on tree lists.

Though you are not asking for alternatives, the most frequent style is:

But when there are selection checkboxes, then:

• Arrow symbols better go on the right side
• Arrow right symbol doesn't represent displaying "child" tabbed right