1

The scenario: I'm designing a table that will have both expanders (chevron icons) and multi-select action checkboxes on each row.

Table with eight rows, with expander and section box at beginning of each row

Expanded, the rows look like this (and will eventually have more data in them.)

Row with expansion

The user can also delete each row individually via a trash can icon that appears on hover at the end of the row. Originally I put the selection checkbox at the beginning of each row and the expander at the end, next to the trash.

Obviously, it's not a good idea to put frequently-used buttons right next to the trash. But also, we use the expander at the beginning of the row in other parts of the application, and the table occasionally gets covered with a pop-over sheet when the user is working through a certain flow.

Table in context of pop-over sheet and other page elements

The question: Is it the correct order to put the expander icon first, selection box second on each row? I have nothing but instinct to justify this decision, perhaps because it feels weird for the expander icon to be placed between two items with header information.

It's also feeling a little fidgety to have three small clickable components all together in a close area, so if this is a bad pattern for other reasons, I'd consider an alternative.

For the vote-closers, I'm simply asking:

  • Is there a standard in CRUD patterns for selector and expander order (I hate "best practice" questions, too).
6
  • What does the expand button expand? In other words, how each raw looks when they aren't expanded? I miss a screenshot.
    – Danielillo
    Oct 25, 2021 at 22:23
  • @Danielillo I added a screenshot, please see above.
    – Izquierdo
    Oct 25, 2021 at 22:31
  • I see, thanks. So, the closed and the opened chevron is the same icon, both pointing down? At first glance that's confusing, at least for me.
    – Danielillo
    Oct 25, 2021 at 22:34
  • Everything is quite complicated to even think about an answer. What's the functionality of the select icon? The select all icon on top together with the multi-select action which option is selecting at the end? When clicking select or select all, what's the next action? Actually this question just gives me more questions 😉. It clearly seems like a pre-made question but with undefined details, which makes it difficult to come up with an answer.
    – Danielillo
    Oct 26, 2021 at 0:51
  • @Danielillo The open state should have an upward-facing icon, I was rushing to get the screenshot in and missed that. "What's the next action" - when items are selected, an Action menu appears that allows several actions to be applied (see Gmail for pattern).
    – Izquierdo
    Oct 26, 2021 at 13:39

1 Answer 1

0

Based on the screenshot, the hidden content is only information about the item column, it's not selectable nor does it modify any of the subsequent columns.

Consequently, if the expand button only expands info below a single column of the table item and is just information, it doesn't make sense and creates confusion to place it at the beginning of each row. The expand icon should be only where there are elements to display:

enter image description here

1
  • Thanks for this mockup. We're going to eventually be filling in a whole section below the row, beyond the item column. Would the expander icon still work in this position? I like separating it from the selection icon, it's much cleaner.
    – Izquierdo
    Oct 26, 2021 at 22:29

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.