Problem

When desktop editors (people who visit Wikipedia with a laptop or a computer with a large external display) open their user preferences, they can see and access all settings at once. Specifically, settings that provide multiple options (eg. "Gender used in messages") are immediately available taking advantage of the larger real estate. This is not the case on mobile and smaller devices, where displaying multiple settings all together can lead to settings pages longer than necessary, making it hard to scan and navigate the content.

Jobs to be done

When I open my user preferences on a mobile or small device I want to be provided with the least amount of information necessary so I can scan the high-level content and options, and find the specific setting that I want to edit or change.

Proposed solution

We believe that prioritizing discoverability over optionality can be an effective measure in the context of mobile user preferences. We assume that mobile editors change their settings rarely. We would like to test if providing less information upfront, but requiring more steps to change a setting, will enable editors to effectively find what they need. And, if the navigation of user preferences on mobile devices will benefit from this change.

State of the art

1. Open https://en.wikipedia.org/wiki/Special:Preferences on your mobile device
2. Scroll the page while carefully reading the content (this is where we think we can improve the experience)
3. Find the setting that you need
4. Change or edit the option

Proposed solution

1. Open https://en.wikipedia.org/wiki/Special:Preferences on your mobile device
2. Scan the macro categories (this is how we think we will improve the experience)
3. Find the setting that you need
4. Tap to open the option in a separate modal
5. Change or edit the option

Specs

"Gender used in messages", the .oo-ui-labelElement-label becomes the modal title. For the modal redlines please refer to "Toolbar" section in this task https://phabricator.wikimedia.org/T310897.

Edge case #1
If .oo-ui-labelElement-label is too long, it will be truncated with ellipses. Ideally we would edit those titles once they're used in the modal toolbar.

Edge case #2
If the settings option has no label, use the main section title. In this example the option "Vector 2022" has no label, but only a section title "Skin", therefore "Skin" will be used as a title for the modal toolbar.

Options and helper texts move to the modal content.

The selected option in the modal content becomes a link (that opens the modal) under .oo-ui-labelElement-label.

If the content of the modal is scrollable the modal toolbar is set sticky to the top.

Other examples

Language options, originally displayed as a dropdown, move into a modal. And the dropdown becomes a link to the modal, with the link text being the selected option in the modal.

Signature, originally displayed in-page, move into a modal. And the signature itself becomes a link to the modal.

Email options, originally displayed as a button, turns into a link. And the link opens the original page where you can change or remove your email.