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?

Community
  • 1
Vince C
  • 927
  • 6
  • 15
  • 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 08 '14 at 14:21
  • 1
    “but it becomes an issue when …” – exactly! – Crissov Dec 08 '14 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 08 '14 at 14:50

1 Answers1

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.

Paul
  • 379
  • 2
  • 3