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.

here is an example

3 Answers 3


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.


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.

  • Good Idea but the user has to be free to take a look on what kind of options the item has (by secondary action) before activate the primary action if he want... Jul 11, 2018 at 10:22
  • would that not make secondary action more primary step then? why not place the switch inside the revealed accordion?
    – ntnlbd
    Jul 11, 2018 at 10:28
  • Good question, but it is less faster for the user who knows what he is doing. Jul 11, 2018 at 10:37

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.

  • I agree and i think it is better for touch devices where it is error free ...In my opinion on desktop enviroment the proximity will be easiest/faster to make decisions that influence the behaviors on the right area. (one day i will be able to upvote your answer tnx) Jul 11, 2018 at 12:35

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.

Your Answer

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

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