Page MenuHomePhabricator

[EPIC] Design specs for mobile web Special:Preferences content layout and visual design
Open, Needs TriagePublic

Description

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: [EPIC] Design specs for mobile web Special:Preferences menu.

State of the art

1 - Open https://en.wikipedia.org/wiki/Special:Preferences on a mobile device or emulator

en.m.wikipedia 17.jpg (1×750 px, 229 KB)

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: Move expanded in-page settings to a separated full-screen modal.

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.

Screen Shot 2022-06-24 at 11.31.19.png (214×1 px, 37 KB)

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.

Screen Shot 2022-06-24 at 11.32.50.png (132×1 px, 24 KB)

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.

Screen Shot 2022-06-24 at 11.35.31.png (176×1 px, 40 KB)

D - Links stay as links

As above.

Screen Shot 2022-06-24 at 11.36.56.png (216×1 px, 31 KB)

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.

Screen Shot 2022-06-24 at 11.33.28.png (150×1 px, 29 KB)

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.

Screen Shot 2022-06-24 at 11.39.13.png (270×1 px, 56 KB)

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.

Screen Shot 2022-06-24 at 11.42.03.png (360×1 px, 76 KB)

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.

Screen Shot 2022-06-24 at 11.42.50.png (272×1 px, 56 KB)

I - Descriptions move into the modal

Same rationale as helper texts, point F above.

Screen Shot 2022-06-24 at 11.44.08.png (376×1 px, 82 KB)

J - Dropdown options move into the modal and the selected option is displayed as a link

Same rationale as point C and F.

Screen Shot 2022-06-24 at 11.45.06.png (260×1 px, 48 KB)

K - In-page options move into a modal

Same reason as above, see point F,

Screen Shot 2022-06-24 at 11.46.04.png (684×1 px, 147 KB)

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: Introduce auto save for "simple" user preferences, and manual local save for "disruptive" changes.

Screen Shot 2022-06-24 at 11.49.50.png (334×1 px, 82 KB)

M - Input fields content become a link and inputs move into the modal

Same rationale as point C and F.

Screen Shot 2022-06-24 at 11.47.11.png (178×1 px, 31 KB)

Event Timeline

aminalhazwani renamed this task from (Draft) [EPIC] Design specs for mobile web Special:Preferences content layout and visual design to [EPIC] Design specs for mobile web Special:Preferences content layout and visual design.Fri, Jun 24, 10:29 AM
aminalhazwani updated the task description. (Show Details)