Material Design the correct way to work with primary and secondary action in this case

Question

Today I've got a question about the correct way to use material design in a "UX way" and in a particular case.

I'm working on a desktop interface with a sidebar on the left that control main focus events on the right area of the screen.

this list is made by items with a content (the name of the control) and two type of controls:

1 - primary action - to activate and deactivate the control (it shows hide/things on the right area)

2 - secondary action - an expandable V to open a panel that influence what's happen on the right (only if the primary action is activated)

Questions: - is this the correct way to design it? - in Material Design design specs they define the order primary action,content,secondary action (A on the image)... In my opinion (B on the image) is better to put on the item's right two actions/controls that influence the events on the right of the screen that is the focus of what we are doing in a left to right reading direction.

Answer 1

If I understand correctly the Expand(secondary action) only becomes available when the switch is on. In this case it feels that neither of the 2 options you are showing work intuitively.

I would avoid combining two of those in a single nav item if possible.

BUT

I think it would work better you do Primary action > Content > Secondary action and make secondary action disabled until the Primary action has been turned on.

Answer 2

If it is a question between A and B I would go with A.

The reason is, that in B both actions are very close. The chance that a user clicks (or tap on mobile) the wrong action is more probable in B.

As you stated, it is likely that a user want's to open the item first and activate it after that. Therefore the order in example A is right.

Answer 3

An accordion item together with toggle control is confusing. An accordion item expands/collapses not only when a user clicks the V button, but also when the whole item is clicked. The same is with the toggle control - it switches when the whole item is clicked. In both A and B cases - what happens when a user clicks the item, not any of the buttons? I suppose nothing. But it contradicts the user's previous experience.

From your answers, I assume that the expanded accordion item contains some supporting info for the item and no other controls. If so, maybe consider implementing your sidebar as a list of items with toggle control and show additional info in a tooltip on mouse hover. Or show an (i) icon on mouse hover and display additional info on clicking it. Not applicable for mobile though.

If you are designing for mobile as well, check this example from MD Lists documentation picture 2. Try using a checkbox instead of a switch for primary action and an (i) button as a secondary action for displaying additional info.