Page MenuHomePhabricator

Refine typography settings interface on mobile
Closed, ResolvedPublic

Description

Background

Settings for mobile

Acceptance criteria

  • Design a configuration interface for reading theme preferences for the mobile website
  • Ensure there is a technical task regarding code reusability between this UI in Vector and Minerva

Sign off step

  • Create task for implementing the mobile design

Event Timeline

Annotated mockups are in this Figma file.

@ovasileva @Jdlrobson if you could put eyes on this this week, I should be able to have any necessary revisions done by the end of the sprint. Also happy to do a walkthrough video if the notes aren't enough context. But the Minerva approach is to put the new settings in the existing settings menu.

Logged in

New settings logged in.png (1×360 px, 63 KB)

Logged out

New settings logged out.png (742×360 px, 37 KB)

Notes:

  • There’s only one settings menu when you’re logged out on Minerva and it already only has theme settings in it, so no need to rename it. We just put the new settings in the old menu
  • Expand all sections is a nice content setting as well.
  • Decided on the radios for density over the dropdown we were using before because the tap targets are roughly the same size and it removes one click
  • Night mode is a toggle because we don’t have toggles in Vector
  • More usable and consistent with the skin and less consistent between skins
  • Bumped up the label font size
  • Same treatment for logged-in settings because there really isn’t much more in there.
  • New theme settings just go above the advanced mode and user preferences sections.
  • Separate usability issue: having separate, tappable CTAs inside the settings rows isn’t ideal, especially if the rows themselves are tappable.

Annotated mockups are in this Figma file.

@ovasileva @Jdlrobson if you could put eyes on this this week, I should be able to have any necessary revisions done by the end of the sprint. Also happy to do a walkthrough video if the notes aren't enough context. But the Minerva approach is to put the new settings in the existing settings menu.

Logged in

New settings logged in.png (1×360 px, 63 KB)

Logged out

New settings logged out.png (742×360 px, 37 KB)

Notes:

  • There’s only one settings menu when you’re logged out on Minerva and it already only has theme settings in it, so no need to rename it. We just put the new settings in the old menu
  • Expand all sections is a nice content setting as well.
  • Decided on the radios for density over the dropdown we were using before because the tap targets are roughly the same size and it removes one click
  • Night mode is a toggle because we don’t have toggles in Vector
  • More usable and consistent with the skin and less consistent between skins
  • Bumped up the label font size
  • Same treatment for logged-in settings because there really isn’t much more in there.
  • New theme settings just go above the advanced mode and user preferences sections.
  • Separate usability issue: having separate, tappable CTAs inside the settings rows isn’t ideal, especially if the rows themselves are tappable.

This looks good to me @JScherer-WMF! My only concern with this approach is discoverability. We can probably get around that with some sort of tutorial/notification. Do you think it makes sense to explore that in this ticket or should we set up something additional?

I've created T349938 to take a closer look at the two designs.

@JScherer-WMF I'm curious - if the page didn't exist, would this still be the design you landed on, or has your design been heavily influenced by what we currently have? This page is written in OOUI and that doesn't allow us to inject Codex components, so we're going to need to rewrite all of this from scratch if we build out your existing design (which might be more work?).

Knowing this will be helpful in the notes I'm making on T349938 but I suspect the two of us will need to get in a room together next week to discuss in more detail.

I reviewed this with Justin. Ideally we would render identical HTML from the desktop preferences into the settings page to start with. One problem with the proposed design is the fact that the mobile settings page uses the toggle component. We discussed several options to make things consistent:

  1. Using different components based on viewport size on Vector 2022.
  2. Replacing the existing toggles with radios
  3. Being okay with mixin toggles and radio buttons

I wrote a POC here: https://patchdemo.wmflabs.org/wikis/001b32d0b7/w/index.php?title=Special:MobileOptions&returnto=Main+Page&mobileaction=toggle_view_mobile
And here is how it would currently look:

Screenshot 2023-10-31 at 9.21.59 AM.png (567×913 px, 56 KB)

Note for @ovasileva In preparation for this task we'll need to update the existing section collapsing setting to client preferences T350170

@JScherer-WMF I've captured this question in T350418 as it's not of upmost importance to decide it now. Feel free to close out the ticket if that makes sense.

@JScherer-WMF I've captured this question in T350418 as it's not of upmost importance to decide it now. Feel free to close out the ticket if that makes sense.

Thanks! I've closed now.