16

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! enter image description here

3 Answers 3

45

Material Design Shows the Locked State by a greyed-out version like this:

enter image description here

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.

enter image description here

1
  • 1
    Thank you very much! You nailed it! Commented Aug 21, 2020 at 7:49
20

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:

enter image description here


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:

enter image description here

4
  • Completely agree with this answer, a variation would be to use ticks and cross icons to indicate states for more ambiguous meanings
    – Martyn
    Commented Aug 20, 2020 at 23:46
  • Thank you very much! This makes sense and I will look into it exhaustively! Commented Aug 21, 2020 at 7:50
  • 4
    It takes more space, but "Enabled by admin" or something similar may be more obvious. If I see just "Enabled", I may wonder where/how I can disable it.
    – jcaron
    Commented Aug 21, 2020 at 16:37
  • @jcaron: Good idea, I have updated my answer to reflect your suggestion.
    – musefan
    Commented Sep 11, 2020 at 8:11
6

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".

Switch States

1
  • Thank you very much! This is very interesting! And the link provides interesting insights. Commented Aug 21, 2020 at 7:55

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.