Moderator Tools/Content moderation on mobile web/Preferences



As of June 2022, users of the MinervaNeue (mobile web) skin cannot access Special:Preferences from the user interface. The only way to reach this page is to directly navigate to it via the search bar or switch to desktop view. Since Preferences contains critical user account features such as changing passwords, updating email addresses, configuring notifications, and accessing anti-harassment features, we are planning to work on bringing this page to mobile.

To do this we need to make some changes to how Preferences is displayed at mobile screen sizes. For the desktop view it uses a tab system which becomes scrollable on narrow mobile devices, which makes it unclear to users. The responsive resizing of fields and explanatory text leaves many settings squashed or with large amounts of text near them. Additionally, many preferences have no effect for mobile-only users. The mobile skin also has a separate mobile settings option, which is additionally available to logged-out users. We need to decide if and how we can present these settings alongside user preferences in a way which is understandable.

Design
Design work on this feature is ongoing. Below you can find some explorations and options for the ways we can present this interface for mobile users. Please share your thoughts on the talk page about which options you prefer and why.

Main menu
[PHAB TICKET]

The scrollable tabs in Preferences are unclear to users and not a common design pattern for menus with this many items. When we reviewed other mobile websites and apps we found that it was much more common for this kind of browsing to occur via a vertical menu of options. We designed a few different options for Special:Preferences:

[IMAGES]

Which option do you prefer, and why?

We added explanatory text under the menu headings in some variations - what do you think about this wording?

Modals
[PHAB TICKET]

Preferences currently includes some items, like 'gender', which take up a lot of screen space with multiple options. We could move these to sub-menus that only display once clicked:

[IMAGES]

What do you think about the modal system for submenus?

Saving
[PHAB TICKET]

The Save button takes up a substantial amount of screen space - we wanted to explore how preferences are saved to see if there were better options. One option is to have changes save automatically, as is currently the case in Special:MobileOptions.

[IMAGES]

MobileOptions and Preferences
[PHAB TICKET]

MinervaNeue already has a 'Settings' option in the main menu, which takes users to Special:MobileOptions. This menu is the logical place for us to add a link to Special:Preferences, but having both a 'Settings' and 'Preferences' option in this menu is likely to be confusing.

As a first step, we could disambiguate these links to 'Mobile settings' and 'User preferences', with corresponding icons:

[IMAGES]

How clear do you think these links are? Would this disambiguation make sense in your language too?

General questions
We want to learn more about how editors use Special:Preferences overall so that we can better understand how to proceed with our design and UX directions.
 * Which preferences do you find yourself needing to access often?
 * Are there preferences which you need access on mobile more often than desktop?


 * Are there settings which only change desktop behaviour which you need to change from your mobile device?

June 2022
We have posted design explorations for the various elements of this project which we are aiming to tackle in the section above, along with the open questions we still have. Input is welcomed on the talk page.

Alongside this, our engineers are investigating the technical feasibility of this project and constraining our design options.

6 May 2022
We have started by making an inventory of all user preferences and determining which have an effect in the mobile skin and which don't. From this we discovered that while the 'User profile' and 'Notifications' tabs are 100% effective for mobile-only users, most other tabs are a mix of settings which do and don't have any effect.

We are considering starting this work by making the 'User profile' and 'Notifications' tabs available on mobile, so that we have an expandable design, but don't need to concern ourselves with making technical and design decisions about splitting the tabs which have a mix of applicable and non-applicable options. At the same time, we don't want to hide these settings entirely, as some users may want to adjust desktop preferences from mobile.

In addition, we are beginning design explorations for a mobile-first user interface.