0

I'm currently working on a tool which more or less requires a submit/save button on every page. This is due to avoid any immediate effect on the end user who consumes the content.

Sometimes, it feels natural for me to throw in a toggle switch as a way to activate or disable a feature.

For example, if I have an image that has already been uploaded and is serving users, I then decide to update it with a watermark. In the image editor interface, should this be a toggle switch or a checkbox? The editor has a save button to publish the changes publicly too.

The answer would be a checkbox according to the guidelines found on Nielsen Norman (and also other sources). This is because toggle switches should never be used unless the effect is immediate, like turning on/off airplane mode on your phone. It also states that a checkbox should be used if it requires a submit button.

With that said, does this simply mean I should never use toggle switches as all of my pages requires a "save" before applying changes? Or could "immediate" also be interpreted for things that update the interface visually, even though it's not saved? In the case of the example, a watermark being activated and shown (not yet saved).

Please note that I'm not actually working on an image editor, I'm mainly looking for a generic answer that could be applied anywhere.

Improve this question

2 Answers 2

Reset to default
1

That NN/g article is correct, and the answer to your question is, Yes! :)

As also stated in, say, the Switch section of the Material Design Guidelines, the key behavior of a switch is that "[w]hen a user toggles a switch, its corresponding action takes effect immediately."

Every time I've discussed this aspect with fellow Ix designers, we agreed that "immediate" does mean that the user does not have to confirm that status change any further. It's applied as soon as the switch state is toggled.

Applied to your image example, it'd mean that the watermark is applied to the published image as soon as the user toggles that switch. Which is, of course, confusing, because the user does need to confirm that change by clicking the confirm button. So, what if I toggled the switch and then closed the window (assuming your product is a web app): has the change been applied, or not?

By restricting toggle switches to actual "immediate state change" uses, you can help affirm user's expectations of that control, vs. potentially watering it down.

Improve this answer
2
  • I just happened to update my iPad to the beta iPadOS 13 earlier this week, and what I noticed is that there are places where they require the user to "submit" by tapping "Done" to perform and save the settings. Please have a look at the image below which showcases the steps to keep the "Today View" on the homescreen. i.imgur.com/f7EIrdv.jpg I tried to exit the page without clicking "Done", instead, I swiped out of the page/clicked the home button. None of the changes were applied. What's your view on this?
    – stacked-cabbages
    Commented Jun 30, 2019 at 17:18
  • Great observation. :) For some reason, iOS's designers decided to use switches for any kind of on/off toggle, so you'll see them in modals and as "instant-change" controls. In contrast, Material Design also has classical checkboxes, so you can use the appropriate widget based on context. IOW, it's a shortcoming in iOS's default widget set.
    – JochenW
    Commented Jul 1, 2019 at 3:01
0

I believe your idea is correct regarding the use of checkbox when a Submit button is required. Toggle ON/OFF switch do not need a separate Submit button.

By 'immediate', as iOS guidelines describe, there should be some sort of visual feedback that the effect is now turned on or off, usually dependent fields are hidden/displayed/activated/deactivated. The watermark scenario sounds like a valid case if a submit button is not being used and a watermark preview is provided. (Source)

Improve this answer
6
  • I updated the description regarding the watermark in case I was a bit unclear. So the image editor still has a "save" button which is required to publish the changes publicly. But in the state where the user edits the image and adds the watermark, is it invalid to use a toggle switch if the editor has a save button (to save all the edits made)?
    – stacked-cabbages
    Commented Jun 27, 2019 at 10:46
  • The more important question will be – why not a checkbox. Checkbox seems to be obvious choice. If you still feel like having a toggle, you can test with some users and get their opinion.
    – Ren
    Commented Jun 27, 2019 at 10:49
  • I mainly want to find out if there are cases where I should use a toggle switch in my interface, considering all my edit/setting pages have an save button. If there's a clear answer to this, then I'm able to exclude the toggle switch completely for this project.
    – stacked-cabbages
    Commented Jun 27, 2019 at 10:51
  • There are a few questions at hand – first why is a Submit button needed? The sole advantage of having a submit button is to post multiple fields at once. If that is the case then checkbox is the type to go. A toggle switch should preferably be used in a standalone case. Even iOS uses checkboxes for bulk actions, for example when deleting multiple messages at once.
    – Ren
    Commented Jun 27, 2019 at 11:06
  • If I continue the image editor scenario: I would like to edit the image on my own pace and then apply all the changes at once. It's to prevent the image from updating on the "public" end while editing it.
    – stacked-cabbages
    Commented Jun 27, 2019 at 12:54

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