1

Note: This isn't a question about which icons or labels to use. It's purely about usability.

So, I have a page with expandable panels and I want to add a button to expand/collapse all panels. Now, I have 2 options, but I'm wondering as to which one is more usable.

Option 1

[ Expand all ] [ Collapse all ]

Pro: It's quite obvious which button does what
Contra: 2 buttons for a similar action seems somewhat overkill

Option 2

[ Expand / Collapse all ]

Pro: Just one simple button
Contra: The state isn't shown anywhere. This isn't usually a problem when either all panels are expanded or collapsed, but it becomes an issue when some panels are expanded and some aren't.

So, which one seems more usable?

Improve this question
3
  • 1
    I think option 1, where the functions are kept separate is best from a UX point of view, unless there is some compelling reason, such as lack of space, which makes option 2 necessary.
    – Steve Jones
    Dec 8, 2014 at 14:21
  • 1
    “but it becomes an issue when …” – exactly!
    – Crissov
    Dec 8, 2014 at 14:35
  • You 2 are both right. Option 1 seemed more usable to me as well. I just needed some feedback on this as I wanted to be certain. If one of you 2 want to post this it as an answer (a bit more thoroughly though), I'd gladly accept it.
    – Vince C
    Dec 8, 2014 at 14:50

1 Answer 1

Reset to default
3

Usually this comes down to space. If you have the space, two buttons makes more sense and is easier to implement. A single button is bit more confusing because you don't know which action will happen first.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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