Page MenuHomePhabricator

Minerva Night Mode launch notifications
Open, HighPublic5 Estimated Story Points

Description

Background

  • We need to notify users when night mode becomes available on Minerva. We also know from Usability testing that readers have no problem finding the appearance settings in Minerva once they know they exist.

User story

  • As a reader with a device in dark mode, I want to know that night mode has been launched, so that I can change my dark mode settings if I wish.
  • As a reader whose device is not in dark mode, I want to hear about night mode launching so that I can try it out if I want.

Requirements

  • System feedback notification shown as soon as possible to logged and logged out readers who enrol in night mode "automatically"
  • Promotional notification shown on second page load in a session to logged in and logged out readers who have day mode devices
  • Notification only appears once, and is not shown again after it has been dismissed, regardless of the logged in or out status of the reader.
  • Notification uses Codex Dialog component and follows its mobile behaviour.

Design

Youtube video design rationale
Figma file

image.png (1×1 px, 662 KB)

image.png (1×586 px, 132 KB)

Event Timeline

Added designs and a video walkthrough to the description above.

@DTorsani-WMF would you mind giving me feedback on the component and palette application I've chosen here?
@ovasileva I would love your feedback on the component choice, requirements, use cases, and the copy.

In addition to Olga I'd love someone on the dev team's @Jdlrobson or @bwang input on the requirements about only showing it once, deep linking into settings, seeing what mode the device is in to serve the right notification, and using the Codex Dialog component for this.

Putting in incoming and un-assigning myself so that we can estimate this next chance we get.

from @Catrope in Slack:

It looks like it's not used by Minerva itself, but there are other extensions that use it, and you can presumably view those pages using the Minerva skin (the Growth team's newcomer homepage for example)

For this task I'd be curious to hear from @dst-designers what they think about using the Dialog as a notification in this way, or if they think a different component should be used (whatever that would be probably isn't implemented yet though)

Relatedly, there's no explicit technical documentation for how to open a dialog without user interaction. But that shouldn't be too difficult to figure out, and we can help with that if needed.

ovasileva renamed this task from [Design] Minerva Night Mode launch notifications to Minerva Night Mode launch notifications.Wed, Mar 27, 2:21 PM

@JScherer-WMF The Dialog is a great component for this purpose. Regarding colors, we are currently working through the decision tokens for night mode, but what you have is essentially what we're thinking. The one difference would be that the Primary Progressive Button should be the same style/colors as it is in day mode.

Rendering Codex Dialog's requires pulling down additional JavaScript and CSS that isn't loaded on page load so this has some performance implications to think through. With this in mind I'd suggest limiting the audience somewhat and delaying the display.

Would any of the following options work for this?:

  • Display the dialog on 2nd or 3rd page view (at this point most JavaScript and CSS should be in cache
  • Delay the overlay display until a certain time has passed e.g. after 5 seconds
  • Show the dialog only on the main page
  • Show the dialog after the user has scrolled down the page a certain amount
  • Show the dialog on a % of page views. For example 1 in 100 page views has a chance of displaying the dialog.
  • Limiting the dialog to logged in users.

If it's not a significant change in scope, I'd like to propose using the onboarding dialog variant with the illustration/image.

Rendering Codex Dialog's requires pulling down additional JavaScript and CSS that isn't loaded on page load so this has some performance implications to think through. With this in mind I'd suggest limiting the audience somewhat and delaying the display.

Would any of the following options work for this?:

  • Display the dialog on 2nd or 3rd page view (at this point most JavaScript and CSS should be in cache
  • Delay the overlay display until a certain time has passed e.g. after 5 seconds
  • Show the dialog only on the main page
  • Show the dialog after the user has scrolled down the page a certain amount
  • Show the dialog on a % of page views. For example 1 in 100 page views has a chance of displaying the dialog.
  • Limiting the dialog to logged in users.

The scroll option could work. If it's a very small amount of scrolling, so that it's almost instant for most people.

SToyofuku-WMF set the point value for this task to 5.Thu, Apr 4, 5:37 PM
SToyofuku-WMF subscribed.

Medium confidence estimate as there are still some unanswered questions - @SToyofuku-WMF to return and document what was confusing to us in the hopes that it can get cleared up before we move to ready for development

Notes from estimation meeting:

  1. It would be great if we could split up this ticket as it feels like a number of different steps
  2. We still need to finalize the circumstances under which we will lazy load the resources
  3. Ideally we would use the dialog with the image as it looks better and helps with comprehension
  4. For users whose system is in night mode already, we really need to show them the dialog as soon as possible
  5. We should agree on how to store that the user has seen and dismissed the dialog

Decision: will leave this until sprint 2. For now, we will be scaling night mode with default of "day" first. Once this ticket is complete, we can switch the default to "automatic"

Rendering Codex Dialog's requires pulling down additional JavaScript and CSS that isn't loaded on page load so this has some performance implications to think through. With this in mind I'd suggest limiting the audience somewhat and delaying the display.

Would any of the following options work for this?:

  • Display the dialog on 2nd or 3rd page view (at this point most JavaScript and CSS should be in cache
  • Delay the overlay display until a certain time has passed e.g. after 5 seconds
  • Show the dialog only on the main page
  • Show the dialog after the user has scrolled down the page a certain amount
  • Show the dialog on a % of page views. For example 1 in 100 page views has a chance of displaying the dialog.
  • Limiting the dialog to logged in users.

When the reader has enrolled in night mode automatically and didn't turn it on themselves, we need to show the dialogue as soon as possible. I'll leave it to the devs to determine which of the above scenarios gets us the dialog fastest without negative loadtime impact.

When the reader has a day mode device and we want to promote the feature to them, showing the dialogue on the second page load in a session is alright.