Circular toggle button status unclear?

[peteruithoven]

What Happened?

This is more of a UX issue than a technical issue, but I find the circular toggle buttons not very clear how they communicate their status.

For example in the screenshot below.

• USB Ethernet is clearly disabled because of the cross out line (all clear),
• Airplane mode, no idea, it's gray, but no line,
• Ethernet, opaque. My laptop has no Ethernet port, why is this even here?
  

In the following screenshot, from our recent blog post:

• I see 4 states?
  1. Airplane mode, gray, but still clickable
  2. USB Ethernet, opaque, no clickable
  3. Ethernet, Enabled, clickable
  4. Nord US/Nord Australia, A whole different kind of disabled?
     

Let's at least make Airplane mode not being enabled (thus disabled) clearer, ideally aligned with ethernet's disabled look?

I have no idea what the red crosses are about, please clarify.

Why even show these opaque, things, that maybe we don't know the status off, that are maybe not available? It's adds another possible state in the mix. Is it really important enough to show in the indicator?

Why do the Wi-Fi with a totally different UI?

Seems relevant:
https://uxmovement.medium.com/why-toggle-buttons-are-confusing-544e3e46ec1d

Steps to Reproduce

Expected Behavior

OS Version

7.x (Horus)

Software Version

Latest release (I have run all updates)

Log Output

No response

Hardware Info

No response

[danirabbit]

Airplane mode, no idea, it's gray, but no line

Proposed #338

Ethernet, opaque. My laptop has no Ethernet port, why is this even here?

Your laptop or network manager certainly thinks that it does have an ethernet port and it's reporting a status about it. Usually this status means that an ethernet cable is broken or not plugged in. It's disabled (more transparent than other buttons) because you can't change this status in software by enabling or disabling the toggle, you can only resolve the state in the real world by checking the ethernet cable

Why even show these opaque, things, that maybe we don't know the status off, that are maybe not available?

If we showed nothing at all, you would probably assume that there is a bug in the software or that your device isn't being detected by the system at all.

It's important to give information about states other than just "enabled" or "disabled" because you might have other error states or intermediate states like "connecting" etc. The goal is to provide glanceable information that you can use to see why your network isn't working as intended and resolve the issue. Of course you can get more information in System Settings if the status isn't immediately clear here.

I have no idea what the red crosses are about, please clarify.

Talking to some folks who use a VPN about how important it was to notify them of the disabled state, we decided to use a red slash instead of a regular text color to make it more obvious/stand out more. Most of the time being disconnected isn't an error state, but for folks who rely on a VPN for work etc not being connected to their VPN is considered an error state.

Why do the Wi-Fi with a totally different UI?

Proposed #337