Added page about the switch component
Needs RevisionPublic

Authored by fabianr on Jun 7 2018, 12:38 PM.

Details

Reviewers
colomar
ngraham
Group Reviewers
Kirigami
Summary

Describe how and when switches should be used.

Diff Detail

Repository
R985 KDE Human Interface Guidelines
Branch
switch
Lint
No Linters Available
Unit
No Unit Test Coverage
fabianr requested review of this revision.Jun 7 2018, 12:38 PM
fabianr created this revision.
mart added a subscriber: mart.Jun 7 2018, 12:53 PM

On desktop they are tricky as since qwidgets doesn't have them, to style them with qqc2-desktop-style i do a tiny slider, which works but is kind of lol... the only alternative is to draw something custom which will not be styled in any other desktop theme

Another option, i could try to make a raisedframe inside a sunken frame, would look very square, but at least kindof stylable by qstyle.
in general, any control which is not present as QWidgets will be kindof hard to make a qml version which looks integrated with qwidget apps, you can do at most make it look coherent with breeze, but potentially clashing if the user chosen something which is not breeze

@mart

Not to derail a HIG thread with code specifics, but I have a pure QWidget switch I used for a non-KDE project where a switch was wanted.

https://github.com/ds9-extras/kcm-plasma-services/blob/master/src/plasmaserviceskcm.cpp see the top class.

On Breeze it looks like this

and Oxygen
whilst loosely matching the Plasma switch of the time.

ngraham added a subscriber: ngraham.Jun 7 2018, 4:47 PM

How well do those integrated text labels localize?

ngraham requested changes to this revision.Jun 7 2018, 8:58 PM

I feel like this subject needs a lot more internal discussion in VDG before we make a HIG page about it.

For a developer, the central question is, "Should I use a checkbox or a switch"? This page only gives an answer to that question for one context: "use checkboxes for selection in lists." What about on settings pages? The text here seems to indicate that switches are preferred for settings, yet no KDE software that I'm aware of uses them instead of checkboxes.

IMHO, it would be beneficial to first make a decision about standardizing on either checkboxes or switches for on/off settings. Because in terms of functionality, they are identical, and there's rarely a good reason to have two controls that do the exact same thing but look different.

Switches, which typically have their label to the left, fit well into modern Settings UIs where other controls have their labels to the left (which we are trying to encourage in D12961). GNOME and ElementaryOS use switches instead of checkboxes on their settings pages for this reason. Checkboxes are somewhat awkward in this new paradigm that we are trying to adopt. I gave it a go for Dolphin in D12571, and wound up with some less-than-elegant results like Expandable folders: [x] Enable and Confirm: [x] Moving files or folders to the trash. This is also harder to properly localize.

But switches don't fit as well in menus, where it would be a significant departure to have the control be on the right side of the menu (not to mention this would require some code changes to Breeze). I guess we could make that change, but that would take a lot of discussion first.

Also, the actual switch control we have appears to just be a two-position slider that shows its state in a somewhat ambiguous manner. If we're going to endorse the use of switches anywhere, I'd like to first see some work on improving the control's appearance and clarity of state. David's version is nice, assuming it can handle languages where "on" and "off" are very long.

This revision now requires changes to proceed.Jun 7 2018, 8:58 PM
fabianr updated this revision to Diff 35840.Jun 8 2018, 2:15 PM
  • Added rule to not use switches in menus
fabianr updated this revision to Diff 35845.Jun 8 2018, 3:47 PM
  • Added rule about instant apply for switches

There is an interesting article about that on uxplanet https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8

ngraham requested changes to this revision.Sep 12 2018, 9:16 PM

The gist of that article seems to be, "Use a switch for instant-apply settings, and a checkbox for everything else." Fair enough.

So we shouldn't use switches in our settings UIs because we don't use the instant-apply paradigm there. Where should we use them, then? Here are the places where we do currently use instant-apply for checkboxes, which would be candidates for turning into switches:

  • In a some plasmoids, e.g. airplane mode in plasma-nm and mute state in plasma-pa
  • For toggle actions in menus

If we say "Don't use switches in menus", we're creating a fairly broad exception that cripples the general rule, because menus are where the vast majority of our instant-apply checkboxes live.

If we do say, "Do use switches in menus because they're instant-apply settings", then we need to do some code work in Breeze (or even upstream in Qt?) first or else all of our apps become in violation of the new HIG rule. And we need an actual switch control for both QWidgets and QQC-based interfaces that we can put in the menus (QQC apps can have menus).

In fact, we need to create the switch control and make it available first anyway, or else developers will have to kludge together their own thing which isn't great.

So I still think we need to have those discussions, come to a conclusion, and do the work before we document the result in this HIG page. :)

This revision now requires changes to proceed.Sep 12 2018, 9:16 PM
ndavis added a subscriber: ndavis.Aug 25 2019, 1:29 AM

One way to avoid the localization problem would be to use the standard symbols for On/Off, 1/0. The only problem with that is a significant portion of the results for "on off symbols" on search engines are questions about which one is which. I also remember wondering why 0 was off as a kid when it made sense in my head that 0 should mean On because it looks like an O.

One way to avoid the localization problem would be to use the standard symbols for On/Off, 1/0. The only problem with that is a significant portion of the results for "on off symbols" on search engines are questions about which one is which. I also remember wondering why 0 was off as a kid when it made sense in my head that 0 should mean On because it looks like an O.

Yup. That's exactly why it's not really a solution. :)

One idea I've seen since this original discussion was to make the switch control have a little light on it that comes on when the switch is in the "On" state. That would be a universal visual signal so we wouldn't need to worry about localizing the shortest possible versions of the strings "on" and "off".