QQ, I am debating with a fellow UXA, would love to hear your thoughts.
A switch is just a fancy checkbox. If a user checked a box, would you then show a save and cancel, and then ask for a confirmation? That's really overkill. Let the user check the box/flip the switch. If that's not what she wanted, she can switch it back.
How to cancel a checkbox: uncheck it.
No need to save/confirm, reconfirm "Are you really, really sure????"
Yes! You can absolutely use these together. The question is - is there a good reason to do so?
Based on your particular example, when you boil it down, an on/off switch is the same as a checkbox; it just has a different visual design. I see no fundamental reason why a checkbox can't go with a save ("submit") button. However, I see a few potential complications: if the switch changes more than one variable, if the action is potentially dangerous, and auto-save.
Let's start with auto-save. I think that this is the confusing part about the checkbox interaction -- a lot of designs combine state-change with submit. For example, when you toggle the wifi on your phone, you don't need to "submit" the change - it's already done for you. So, if your particular situation gives the implication that the switch would auto-save, you should probably avoid the additional button.
When I first read your question, the first thing that came to mind was the classic ejector-seat switch.
Obviously, you're only going to want to submit that state-change if you really mean it. So, to prevent careless triggers, the button takes two steps to activate. If your switch state needs additional consideration, a separate save button may make sense.
Finally, if your button contains more complicated interactions with other settings, I could see this being a good reason to have a separate save button. For example, if this particular switch is a master switch, or if it changes other aspects of the system that would need consideration before changes are saved.
In any case, I don't see a reason why the two don't pair well together - if anything I think they may be a good choice. As with all design questions, there's no "right" answer, and it depends heavily on the context.
Think about when you want to modify some setting on your smartphone. You navigate to your Settings section. You have lots of different features that you can enable/disable, you scroll to the appropriate setting, and you configure it the way you want it. You don't have to scroll to the bottom and confirm your change(s) in order to apply them.
A lot of people are saying this isn't needed, I say it depends on context.
- Does the option take time to action? (And cannot be run in the background)
If the feature turns on instantly, consider not having the extra steps.
If it takes 5 seconds to complete, and whenever the user switches the switch he has to wait for this process, well that's going to be frustrating. I think it would be much clearer/expected for the user to wait for this task on the save action.
However, if it's a background task that takes time, it's less of a concern. The phone Wi-Fi is a great example of this as other posters have said. The user doesn't care if it takes 5 seconds to connect. They switch it on, and the phone starts the process of connecting in the background.
- Is the action independent?
If the feature is an independent thing, like Wi-Fi, then there's less reason to have the 'save' step.
However, if the option is related to another option on the list then there could be a good reason for that extra step - the user might not desire to have "half" their options applied as they chose their feature set-up.
A good example of very closely related inputs: Username & Password. If you submitted/saved the form on every change the user is going to get invalid results.
Features are much less likely to be related than other inputs though. But I'd imagine there are some.
- Is the feature a big change?
If the feature is something that has a lot of impact, and you really want the user to know what they're doing. Similar to the "Ejector Seat" argument above. You mention you have a dialog - does this give more information or details? "Are you sure you want to turn on Extra Complex Super User Mode? This is only for experts that have been specifically trained!"
Having the dialog information occur on checking a toggle/checkbox doesn't seem right to me. That's not a normal response. It's also something you can toggle by accident. Multi-steps make sense. Though the dialog could get frustrating for experienced users, I'd consider a warning message in the box: