I am redesigning a set of toggles where some of them can be activated and deactivated by using a standard pattern. However, some of them are activated by default due to admin permissions but can't be deactivated by the user. The current display shows these toggles with a lighter green color but as I said, they aren't clickable. This made me feel confused when analyzing the behavior and I assume users might feel the same way. Do you think there's any way we can display these toggles so the user knows they're activated but their state can't be changed? The app is responsive and can be displayed through multiple devices. Thanks in advance!
Material Design Shows the Locked State by a greyed-out version like this:
But the problem here is the accessibility. Users with vision-related disabilities won't be able to differentiate these two.
What you can do instead is add a lock symbol inside the toggle along with a less opacity color and If the user tries to interact with it, provide a tooltip that says 'locked by admin' / "Enabled by admin" or something.
While having a "faded" style for disabled controls is quite standard, the problem here is that the difference is too subtle for the user to clearly see.
You could change the colour from green to grey (for example), however that might risk losing the clarity that it actually means "enabled" (which is the whole purpose of the green colour in the first place).
With that in mind, my suggestion would be to avoid using a control at all for this purpose. Instead you can use text to show the enabled/disable state without having the confusion of using a control to do it. For example:
Alternatively, as suggested by jcaron, you could also explicitly state that the settings have been set by the administrator. This helps to clarify to the user that they are unable to change them. Something like this:
First you have to be clear, wether your switch should be readonly or disabled.
Here is a good article about that: https://vaadin.com/docs/v8/framework/articles/ReadOnlyVsDisabledFields.html
In my last project, I used these styles to differ the states of a toggle switch.
The switches are "active and selected", "active", "disabled" and "readonly".