15

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

44

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

| improve this answer | |
  • 1
    Thank you very much! You nailed it! – Óscar Mangas Aug 21 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

| improve this answer | |
  • Completely agree with this answer, a variation would be to use ticks and cross icons to indicate states for more ambiguous meanings – Martyn Aug 20 at 23:46
  • Thank you very much! This makes sense and I will look into it exhaustively! – Óscar Mangas Aug 21 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 Aug 21 at 16:37
  • @jcaron: Good idea, I have updated my answer to reflect your suggestion. – musefan Sep 11 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

| improve this answer | |
  • Thank you very much! This is very interesting! And the link provides interesting insights. – Óscar Mangas Aug 21 at 7:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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