Page MenuHomePhabricator

Should binary controls in user settings become toggles in mobile resolutions?
Closed, ResolvedPublic1 Estimated Story PointsSpike

Description

Following up from T349938, we are looking to share code between Minerva and Vector skin for rendering client preference controls. The current plan is to render the desktop interface inside the mobile settings page.

Demo of interface controls:

toggles.gif (366×337 px, 58 KB)

Existing mobile settings controls these would be mixed with:

Screenshot 2023-11-03 at 2.21.16 PM.png (1×992 px, 138 KB)

Questions to answer

Event Timeline

One thing to keep in mind, task description isn't clear yet here, ToggleSwitches are not only meant for touch interfaces they are also meant for a technical difference: They immediately enact the switch unlike Checkboxes.
So one shouldn't put a ToggleSwitch into a form with a submit button – it would break user expectations.

So one shouldn't put a ToggleSwitch into a form with a submit button – it would break user expectations.

Neither of these forms have submit buttons :) They act like toggle switches. Click the cog on https://en.wikipedia.org/wiki/Spain?vectorclientpreferences=1 to see the unstyled skeleton of the functionality.

Ok, thanks. Makes sense. Task description was not containing that link.

Hmm, that makes me think again: ToggleSwitches are not meant for groups of selections.
The first group one could argue about using a ToggleSwitch, although I find Full width - Limited width not a 100% clear on/off question from a labelling perspective not appropriate for such use either as a ToggleSwitch should only be an answer to a yes/no question, not be an answer between two different answers. So FullWidth? yes/no. And removing limited width or full width might be more hurtful for understanding the feature…
Second group doesn't work as ToggleSwitches at all as they can't and shouldn't be grouped. That would be a completely new (and confusing) UX pattern IMHO.

Two options:

  1. We could work together to clarify the wording in our documentation more (and add Radio Groups to the already linked Checkboxes)
  2. Another option for groups could be ToggleButtonGroups with single values. That's visually very emphasized though and I'd clarify if that's reasonable with other designers.
ovasileva raised the priority of this task from Medium to High.Jan 4 2024, 9:24 AM
Jdlrobson set the point value for this task to 1.Jan 4 2024, 6:03 PM

Change 991442 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Client preferences supports toggle switches

https://gerrit.wikimedia.org/r/991442

I'm talking to Justin about this tomorrow.

Would appreciate to have @JScherer-WMF and your summary here in context of my questions above.

I talked to Justin about this, here are the notes Volker:

  • For font-size on mobile we'd like to mirror the desktop control and show radio buttons instead of the current dropdown. Consistency is important between the font controls on desktop and mobile and we see no problem with using the radio buttons in this context - There will be 3 options and these will have big enough touch area on mobile.
  • Advanced mode and expand all sections by default - we will keep these as toggles. A toggle is the best interaction pattern for on/off switches which have an instance effect. There would be no case not to use them on desktop so these could be used in desktop in future. We note that in mobile there are a few issues with these since the effects cannot be seen until you visit another page, but this is out of scope for this particular ticket.
  • For night mode, we plan to make these radio buttons both on desktop and mobile. The reason being we are not turning one thing off. We're choosing between two equal things.

So in terms of next steps, we should make the existing code support toggle switches: https://gerrit.wikimedia.org/r/991442. I've added this information in T350418.

Change 991442 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Client preferences supports toggle switches

https://gerrit.wikimedia.org/r/991442

Next up: T350170. We'll revise the existing settings to be radio buttons and a toggle switch.

Restricted Application changed the subtype of this task from "Task" to "Spike". · View Herald TranscriptJan 30 2024, 10:24 PM