Page MenuHomePhabricator

Change "Night" to "Dark" in Appearance settings
Closed, ResolvedPublic1 Estimated Story Points

Description

Background

  • We have had several notes of feedback from community members and a round of usability testing that have shown that "Dark" mode makes more sense than "Night" mode for readers.

The usability study found that people expected "dark mode" even though they didn't have any problems at all with the usability of "day/night" mode. Given how much technical work switching would be, the cost benefit may not be worth it to make the change right now pending further data.

User story

  • As a Wikipedia reader, I want dark mode to have labels that match my expectations from other products.

Requirements

  • Copy should change to "Dark/Light" from "Night/Day"
  • Copy should be re-translated with this in mind (QA Note: This is not a testable deliverable of this task, it's more instructional for future translations)

BDD

Feature: Update Appearance Labeling to Dark/Light on Wikipedia

  Scenario: Labels are updated to Dark/Light
    Given the user accesses the Appearance settings on Wikipedia
    When the user views the Appearance toggle options
    Then the options should display as "Dark" and "Light"

Test Steps

Test Case 1: Verify Label Update to Dark/Light

  1. Navigate to the Appearance settings on Wikipedia.
  2. Observe the Appearance toggle options.
  3. AC1: Confirm that the options now display as "Dark" and "Light."

Design

image.png (946×488 px, 55 KB)
image.png (1×360 px, 66 KB)

Communication criteria - does this need an announcement or discussion?

  • This has been discussed in the A4R talk page a bunch. We should update the folks there.

QA Results - Beta

ACStatusDetails
1T361157#9760026

QA Results - PROD

ACStatusDetails
1T361157#9771229

Event Timeline

We talked about this during estimation but determined that this is not ready to estimate because it needs some more conversation. The labels in the menu are easy enough to change but the underlying technical naming would require an extensive refactor. We recently completed a task T359983 that changed the classes to the following:

.skin-theme-clientpref-night
.skin-theme-clientpref-day
.skin-theme-clientpref-os

Given the naming of the "skin" system, it would be problematic to refer to these options as "light" and "dark".

Changing the UI labels but leaving the classes as-is is also not ideal. These classes are public APIs used on-wiki by template editors, so it would be best to keep the technical naming and the UI consistent.

We have had several notes of feedback from community members and a round of usability testing that have shown that "Dark" mode makes more sense than "Night" mode for readers.

I would like to read through this but am unable to find a link. Could we please update the ticket to back link to all the research? For example, was the usability testing done for an English speaking audience or for multiple languages?

Changing the UI labels but leaving the classes as-is is also not ideal. These classes are public APIs used on-wiki by template editors, so it would be best to keep the technical naming and the UI consistent.

One possible solution would be to call the theme itself night, but present it in the UI as "Dark" and allow different languages to translate as needed.

The following questions can help gather more context and understand the requirements for the task involving changes in the Appearance settings:

  1. What are the technical challenges associated with changing the terminology from "Night" to "Dark" in the settings?
  2. Why is this change important to users and how does it align with user expectations from other products?
  3. Who will be responsible for implementing these changes, and who needs to be involved in the decision-making process?
  4. Where in the codebase do these changes need to be applied, and are there any dependencies?
  5. When is the proposed timeline for implementing these changes, considering the impact on users and potential need for re-translation?
  6. How will the change from "Night" to "Dark" be communicated to the community, and what steps will be taken to ensure consistency across languages?

@JScherer-WMF To add more data on last week's conclusions/discussions on syntax.

We chatted about this in Slack and agreed that for now the cost benefit of making this change is not worth it so moving to backlog.

Declining for now. Will reconsider if we get more feedback around the current copy.

Reopening after further investigation and additional feedback received

Is this only to update the message values?
Are we concerned about the confusion between key and value having different text in messages?
If we update the messages that move the confusion to the code as parts of the code will be calling in night mode and the message keys would be called dark, what is the ultimate take here?

I will add a patch just to update the message values for now. Let us discuss this more

Change #1023534 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/MinervaNeue@master] feature(Minerva): Standardize terminology to 'Dark Mode'

https://gerrit.wikimedia.org/r/1023534

Change #1023535 had a related patch set uploaded (by Mabualruz; author: Mabualruz):

[mediawiki/skins/Vector@master] feature(Vector): Standardises terminology to 'Dark Mode'

https://gerrit.wikimedia.org/r/1023535

Is this only to update the message values?
Are we concerned about the confusion between key and value having different text in messages?
If we update the messages that move the confusion to the code as parts of the code will be calling in night mode and the message keys would be called dark, what is the ultimate take here?

I will add a patch just to update the message values for now. Let us discuss this more

As discussed in our SHDT meeting we will only :
  • Change the message values for the UI to the new terminology dark/light/automatic.
  • Change the description and documentation to have them both present dark/night, light/day, and os/ automatic.
  • Code and message keys will keep the old terminology in use.

Change #1023535 merged by jenkins-bot:

[mediawiki/skins/Vector@master] feature(Vector): Standardises terminology to 'Dark Mode'

https://gerrit.wikimedia.org/r/1023535

Change #1023534 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] feature(Minerva): Standardises terminology to 'Dark Mode'

https://gerrit.wikimedia.org/r/1023534

Uhh... Totally missed this ticket. Several weeks ago I asked about night mode or dark mode, and now we have a feature called night mode internally and dark mode for the user... So the dark mode became a night mode in ~october-november and now we have a mix with a small rollback of terminology.

Edtadros subscribed.

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Label Update to Dark/Light

  1. Navigate to the Appearance settings on Wikipedia.
  2. Observe the Appearance toggle options.
  3. AC1: Confirm that the options now display as "Dark" and "Light."

screenshot 286.png (460×1 px, 129 KB)

Note to reviewer: The second bullet of the requirement "Copy should be re-translated with this in mind" was not tested, please see QA Note in task description

ovasileva claimed this task.

Test Result - PROD

Status: ✅ PASS
Environment: PROD
OS: macOS Sonoma 14.4.1
Browser: Chrome 124
Device: MBA
Emulated Device:NA

Test Artifact(s):

Test Steps

Test Case 1: Verify Label Update to Dark/Light

  1. Navigate to the Appearance settings on Wikipedia.
  2. Observe the Appearance toggle options.
  3. AC1: Confirm that the options now display as "Dark" and "Light."

Test Link: https://en.wikipedia.org/wiki/Polar_bear?vectornightmode=2

2024-05-04_08-53-31.png (617×2 px, 315 KB)

Note to reviewer: The second bullet of the requirement "Copy should be re-translated with this in mind" was not tested, please see QA Note in task description

Change #1032423 had a related patch set uploaded (by Majavah; author: Majavah):

[mediawiki/skins/Vector@master] Fix one more message using "day mode" instead of "light mode"

https://gerrit.wikimedia.org/r/1032423

Change #1032423 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix one more message using "day mode" instead of "light mode"

https://gerrit.wikimedia.org/r/1032423