For the purpose of this task we’re going to focus on //Special:Preferences/User Profile// but those specs also apply to the remaining settings. The suggested changes follow after the completion of {T310897}.
# State of the art
1 - Open https://en.wikipedia.org/wiki/Special:Preferences on a mobile device or emulator
{F35271158}
# Desired design
We are moving away from tabs, in favor of modals. For more details, or to better understand what happens when settings move into a modal please refer to {T310272}.
**Full image (PDF) detailing changes and specifications https://commons.wikimedia.org/wiki/File:Desing-specs-mobile-web-preferences.pdf. **
Summary of changes:
A - Section titles get a border bottom for stronger separation
B - Labels loose the colon “:” at the end
C - Buttons become links
D - Links stay as links
E - Information (non-interactive) texts are set to grey
F - Helper texts move into the modal
G - Options are separated by a grey line
H - Sections are more distant from each other
I - Descriptions move into the modal
J - Dropdown options move into the modal and the selected option is displayed as a link
K - In-page options move into a modal
L - Single checkboxes turn into toggle switch
M - Input fields content become a link and inputs move into the modal
## Detailed suggestions
### A - Section titles get a border bottom for stronger separation
In order to enable editors to easily scan the content of a page a solid black border will signify the beginning of each settings section.
{F35271192}
### B - Labels loose the colon “:” at the end
The colon is needed as a separator when the content is displayed on the same line. In this instance, we're going to rely on the line break to create a clear distinction between the label and the call to action (or text) below.
{F35271193}
### C - Buttons become links
In order to simplify the visual design of the page, all call to actions will share the same visual style. If we would use buttons for some instance, and links for some other, the instances set as buttons will be visually prioritized. While with this approach all instances share the same priority.
{F35271198}
### D - Links stay as links
As above.
{F35271199}
### E - Information (non-internactive) texts are set to grey
For content and is non-interactive, and only informational, we can de-prioritize it by setting the text color to grey.
{F35271194}
### F - Helper texts move into the modal
In order to reduce the amount of content (and noise) on the page we will move helper texts into the specific settings modal. In this way we will display at first only the necessary information to enable editors to make a decision ("Is this the setting that am I looking for?") and only then we will display additional information (in this case the helper text) in order to enable them to make a conscious and informed decision. Moreover by reducing the amount of content displayed upfront we will reduce the height of the page, hence reducing the scroll necessary to scan the content of the page.
{F35271204}
### G - Options are separated by a grey line
To emphasize the distinction between an option and another we will add a grey separator line. These separators, together with the section separators, will give a stronger structure to the content of the page, hence improving the scannability of the content.
{F35271215}
### H - Sections are more distant from each other
To improve the scannability, and to enable editors to quickly scroll the page, and find the section that they need, we will increase the space between each main section.
{F35271220}
### I - Descriptions move into the modal
Same rationale as helper texts, point F above.
{F35271227}
### J - Dropdown options move into the modal and the selected option is displayed as a link
Same rationale as point C and F.
{F35271236}
### K - In-page options move into a modal
Same reason as above, see point F,
{F35271238}
### L - Single checkboxes turn into toggle switch
For ON/OFF (or binary) options we will opt for a commonly used mobile component, the toggle switch. This will also support the suggested (auto) saving mechanism proposed in {T310344}.
{F35271252}
### M - Input fields content become a link and inputs move into the modal
Same rationale as point C and F.
{F35271241}