I am working on one plugin for the Outlook. This plugin is for email sharing. When user tries to compose email a notification butter bar will come up in compose window and will say that particular setting is ON. User will get an option to switch that setting OFF by using the toggle button.

Now the catch is, I want to keep that setting ON by default and don't want user to switch it OFF ever but still want to empower user by giving an option to switch it off. I want to keep Switched ON state less highlighted and switched OFF state highlighted so that user switches it ON.

  1. If I keep Switched ON color Green and Switched OFF color Red, Switched ON is highlighted and user might turn it off due to his attention to that button Switched ON with Green Color Switched OFF with Red Color

  2. If I keep Switched ON color grey and Switched OFF color Red, Switched ON state is not highlighted but user might feel that grey is a disabled state as per iOS or Microsoft convention and user might play around and switch it OFF. Switched ON with Grey Color

How do I handle this problem? I want to tell user that it is ON but don't want to highlight it much and also don't want user to feel that this is some disabled feature.

  • Have you tried blue or pale blue for the on state?
    – Bhupi
    Apr 25, 2018 at 11:34
  • Not yet tried. Blue came in mind while going through Owen’s comment. Will try that and see the impact. Thanks for suggesting this :-)
    – ChaitJD
    Apr 25, 2018 at 11:35
  • What you are trying to achieve is not something that is recommended but might work with the light blue/grey background. Let me know your findings!
    – Bhupi
    Apr 25, 2018 at 12:51
  • Hey bhupinder singh, Blue works really fine. Thanks :-)
    – ChaitJD
    Apr 26, 2018 at 5:34

3 Answers 3


If you are empowering the user to choose the state of settings, then it should be conveyed clearly. You can use labels inside the switch buttons as follows

enter image description here

It helps in understanding the current state of the setting.


Prioritise the structure and hierarchy of the content and UI.

Is this really what you want users seeing first? Can you prioritise the information that you actually want them to look at first and make the switch less prominent in the hierarchy of content and UI?

A few things to look at:

  1. Make the switch on by default as you say, but perhaps look at making it less prominent where it sits so they are less likely to either see it or interact with it.
  2. Go with option 1 in your question in terms of UI, as the grey state is a convention across UI for being disabled and you will have users accidentally switching it off.
  3. Consider the interaction. If this bar suddenly appears it may capture the attention of the user as something suddenly changes. Maybe look at having it as part of the initial instead of appearing on click. (Providing this is technically possible of course)

User testing may also give you a better understanding of how users will react to this too. It maybe that its fine with what happens now or it may need addressing.


If you want to allow users to turn it off, but don't actually want them to do it, then hide that command. Maybe in a preferences or settings pane. One of those gear icons can be placed on the right end of your bar and they can open a thingy with all the settings in it, including "Turn Off."

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.