Special:Preferences uses a tabbed design for its sections. Tabs are not a common or intuitive system for browsing multiple menus of items at mobile phone screen widths. Additionally, users are provided with no explanation for what kinds of settings can be found in each tab, so they must spend additional time exploring each tab to find a particular setting.
We would like to move from this system to a vertical menu of options on mobile, each containing a brief description of the settings which can be found in that menu.
The AMC (Advanced Mobile Contributions) requirement is temporary - we ultimately plan to remove it in favour of all users seeing this change.
Design
When editors navigate to Special:Preferences, a new full screen modal will be displayed. Inside this modal, editors will see the new user preferences menu, with the categories displayed as a list (those categories are currently displayed as tabs under Special:Preferences).
For each one of this category (or menu items) we will add an icon to reinforce their meaning, and a text description that previews the content behind the menu item.
Before | After |
---|---|
Modal components
- Toolbar
- Menu item
- Menu list
Toolbar
The toolbar includes a Previous button and a "Preferences" title.
Mock-up | Spacing | Dimensions | Colors |
---|---|---|---|
Copy and icons
- Title: Preferences
- Icon: previous
Menu item
The menu item includes an icon, a title, a description, and a separator. The title is the same as the label used in the current tabs.
Mock-up | Spacing | Dimensions | Colors |
---|---|---|---|
Copy and icons
Icon | Title | Description |
---|---|---|
userAvatar | User profile | Control how you appear, connect and communicate. |
See T311514 | Appearance | Configure skin, size, and reading options. |
edit | Editing | Customize how you make, track, and review edits. |
recentChanges | Recent changes | Customise the recent changes feed. |
watchlist | Watchlist | Manage and personalize the list of pages you track. |
search | Search | Choose how autocomplete and results work. |
feedback | Banners | Manage the types of announcements you see. |
labFlask | Beta features | Try out the latest in-progress features and give feedback. |
bell | Notifications | Select which alerts you get and how to receive them. |
puzzle | Gadgets | Enable additional features for your account. |
Wikimedia Commons
logoCC | Upload Wizard | Set your author name and the default license. |
WikiVoyage
N/A | Misc | Customize the table of contents. |
Wiktionary, Wikinews, and MediaWiki
speechBubbles | Threaded discussions | Decide how to display replies. |
Wikitech
key | OpenStack | Add or review a public SSH key. |
Edge cases
If the category title or the text description is too long it will flow on two lines.
If the icon is missing the category title will be aligned with the other titles or if the text description is missing only the category title will be displayed.
Menu list
Mock-up | Spacing | Dimensions |
---|---|---|
Edge case
If a menu item is the last item in the menu list the grey separator line is not displayed.
Acceptance criteria
- Navigating to Special:Preferences on mobile should display the UX detailed above for users with Advanced Mobile Contributions enabled.
- The design of Special:Preferences for mobile users without AMC enabled should not change.
- The design of Special:Preferences in the desktop Vector skin should not change.
- Clicking any individual menu item should take users to a page only containing the content which was previously found under that tab.