2

When designing collapse and expandable rows, are there certain ways to choose between using a twisty icon vs a plus/minus icon?

Below are examples I've taken from google search ---

With a twisty icon: enter image description here

With plus/minus icon: enter image description here

2

I think plus/minus is better choice for a number of reasons:

  1. User clearly understand this row has child rows
  2. Minus sign also clearly states user can close it
  3. It represents tree view with perfect understanding

But plus/minus looks a bit boring if not designed well similar to your second example. So design these in way that it looks apealing to users.

| improve this answer | |
1

I think both are equally clear however I would never nest the twisty arrows. They feel more like a single level accordion so here are the questions I ask when deciding...

  1. If there are multiple levels of hidden child items then use + and -

  2. If there is only a single level of hidden items then either one acceptable

  3. If I can click on the entire row to expand/collapse children then the twisty arrow is preferred

  4. If I need the user to click the icon directly (to allow selection of text in the same row) then + and - is preferred

Since your examples show multiple levels of nested children and data that a user may need to select with a mouse drag then I would use a nice sized + and - squares that the user can click on to expand and collapse the child rows below it.

| improve this answer | |

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.