Page MenuHomePhabricator

Easier language switching from Main page
Open, MediumPublic

Description

Description

Earlier in the desktop improvements project we moved the language switcher from the sidebar to the top of the page (next to the article title), so that it is more discoverable (T260738). This presented a problem for Main pages because they do not have a page title element, so there was no clear place to put the language switcher. In T276140 we put it at the bottom of the Main page so it would at least be somewhere, and we started to explore ideas for how to find a better location for it on the Main page. This task is for continuing that conversation, and finding a better solution to make it easier to switch languages from the Main page.

Ideas

Add title to Main page (which includes the language switcher)

One idea to try is adding a title to the Main page, which includes the language switcher beside it. The main benefit to this solution is that the language switcher will be consistent between the Main page and all article pages. Currently the Main page doesn't have a title, so it would take some time and discussion to figure out what an appropriate title for the page could be. And a good option for one project might not work for others.

Logged-outLogged-in
image.png (1×2 px, 1 MB)
image.png (1×2 px, 1 MB)
Create language switcher templates for main page

Another idea is to create some template (or templates) for the Main page that communities can choose to add as they like. Some communities already have language templates on their Main pages, so for them it could be about moving those templates closer to the top. For other projects they would have to add them entirely. Here are some examples:

image.png (480×1 px, 206 KB)
image.png (458×1 px, 177 KB)
image.png (527×1 px, 121 KB)

for reference, here are some of the existing language templates on Main pages:

Acceptance Criteria

  • Add a feature flag that allows us to put the language button at the top in the main page and that allows editors to change the page title message.
  • Default configuration for title:
  • Logged-out: "Welcome to [project name]"
  • Logged-in: "Welcome [user name]"
  • Ensure feature flag is visible via a query string parameter like our other feature flags
  • Create new task for follow-up (steps outlined below)

Follow-up for euwiki

  1. Restrict eu.wikipedia.org styles on the main page to pages without the feature flag.
  2. Test on https://eu.wikipedia.org/w/index.php?title=Azala&oldid=8746129&languageinmainpageheader=1
  3. Enable the config flag and apply the revision.

Developer Notes

  • @Jdlrobson wrote a POC patch for customizing the main page title. This data can be made available in core and output to the base mustache template for all skins to access.
  • For internationalization and logged in/out users, we'll need 2 message keys: mainpage-title-logged-in and mainpage-title-logged-out - both of which can be customized by editors at will.
  • The feature flag that renders the custom/default main page title AND places the language button at the top of the main page is presumably scoped to Vector and should be straightforward to add with a query parameter as well using the OverridableConfigRequirement class.
  • The relevant templates can check for the feature flag to display the main page title + language button accordingly.

QA Steps

Please perform the following steps for both logged in and anonymous users. Note, when testing on the beta cluster we are looking for the presence of this button:

Screen Shot 2022-01-05 at 1.35.49 PM.png (118×364 px, 7 KB)

Please ignore this button:

Screen Shot 2022-01-05 at 1.36.08 PM.png (140×930 px, 9 KB)

When at default

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page
  2. Verify that the language list is absent in the sidebar and the new language button is at the TOP of the content.
  3. Verify the new language button is not at the bottom of the content.

When languageinheader is disabled and languageinmainpageheader is enabled

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?languageinheader=0&languageinmainpageheader=1
  2. Verify that the language list is present in the sidebar and the new language button is not at the bottom of the content and not at the top of the content

When languageinheader is enabled and languageinmainpageheader is at its default (enabled)

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?languageinheader=1
  2. Verify that the language list is absent in the sidebar and the new language button is at the top of the content.
  3. Verify the new language button is NOT at the bottom of the content

When languageinheader is enabled and languageinmainpageheader is enabled

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?languageinheader=1&languageinmainpageheader=1
  2. Verify that the language list is absent in the sidebar and the new language button is at the top of the content.
  3. Verify the new language button is not at the bottom of the content

When languageinheader is enabled and languageinmainpageheader is disabled and visiting content

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?languageinheader=1&languageinmainpageheader=0
  2. Verify that the language list is absent in the sidebar and the new language button is at the top of the content.
  3. Verify the new language button is not at the bottom of the content

QA Results - Beta

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
ovasileva triaged this task as Medium priority.Oct 18 2021, 7:56 PM

I have tested the idea "Add title to Main page (which includes the language switcher)" at euwiki, in order to see if this feels better.
https://eu.wikipedia.org/w/index.php?title=Azala&oldid=8746129

There are a couple of problems for this implementation:

  • The most notorious one is that changing the title of the page from "Main page" to "Welcome X" is not possible.
  • Adding another title with the content you want and hiding the "Main page" via css would give the same troubles we have now.
  • The language switcher is not added if the Main page title is there, it still must be moved via CSS from the bottom.

@Theklan thanks so much for trying this out and discovering these various problems. I think this is progress.

I apologize for more phabricator gymnastics, but maybe we can drop T290480 and consolidate the conversation here going forward? I see @Jdlrobson replied with some ideas on the other task so I'm just going to paste that below, and then we can leave the other task alone.

We can update the code to allow more control over customizing the main page heading. I think that makes a lot of sense based on what editors do for the main page.

Test URL: https://patchdemo.wmflabs.org/wikis/50a2dd581d/wiki/Main_Page
Title source: https://patchdemo.wmflabs.org/wikis/50a2dd581d/w/index.php?title=MediaWiki:Mainpage-title&action=edit
Patch: https://gerrit.wikimedia.org/r/c/mediawiki/core/+/734420
You can login with Patch Demo / patchdemo1 to try it out.
This might also address the use case of T255682 too.

@Theklan @ovasileva what do you see as next steps here? If we are able to get a satisfactory version of the main page w/ title + language switcher up on eu Wikipedia, maybe we can monitor the language switching data and then show other pilot wikis to see if they are interested in this solution?

I don't think this is progress, because this is volunteers solving design errors created by staff members. Progress would be having a solution that is not dependant on the css-html knowledge of volunteers, something you won't find in most of the communities.

This said, the logical step would be designing a front page. I can help with that, but someone would need to implement it, because there are some things that are obviously impossible for plain users.

I can help with that, but someone would need to implement it,

The main page is a bit of a unique case in our ecosystem as it's mostly editor maintained and does require knowledge of CSS and HTML. These are usually working around the limitations of the existing system which is that the main page is like any other page. In that sense, I think this would be great progress, as the changes we are suggesting here, would reduce the amount of CSS and templating needed by editors.

I have admin edit rights so I am happy to help here with any implementation. We have experience of doing this before, for example as part of T254287.

@Theklan @ovasileva what do you see as next steps here?

If I may suggest,..

  • 1) Web team will add a feature flag that allows us to put the language button at the top in the main page and that allows editors to change the message. It will be visible via a query string parameter like our other feature flags
  • 2) I'll make some changes to restrict eu.wikipedia.org styles on the main page to pages without the feature flag.
  • 3) We'll share a URL with Theklan for testing e.g. https://eu.wikipedia.org/w/index.php?title=Azala&oldid=8746129&languageinmainpageheader=1
  • 4) When Theklan approves, web team would enable the config flag and apply the revision.

Sound good?

ovasileva updated the task description. (Show Details)
ovasileva updated the task description. (Show Details)
cjming updated the task description. (Show Details)
cjming added a subscriber: cjming.

Change 734420 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] Allow editors to customize the main page title

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

this is going to need a user notice if we agree to make this change, since some communities show the title on the main page, and it will change without any action (which should be fine in most cases).

Two cents: this basically makes existing main page designs worse for reasons that were entirely crafted by Desktop Improvements team (hiding the sidebar thing, followed by language switcher thing). Proposed designs with the main page title are extremely bad, and this does not consider that communities can have an <h1> on the page because the existing convention is to hide the main page title with display: none. I would advocate against new Vector becoming a default skin if this becomes a thing, tbh. Suggested solution: just always show the sidebar on the main page with its old interwiki list, and remove the width requirement while we are at it (since most main pages are multi-column).

It must be at the same place as on usual pages. Not just for consistency, but especially because main pages are important and popular, and people may find the main page and want to move to an edition in another language.

Main pages’ purpose is to present the content of the site to the user, not to drive them instantly away. Sure, making language switching as easy as possible is important, but not the number 1 goal. Placing language switching below the fold is a good compromise IMO—but ideally incorporated into the main page design, i.e. the “template” solution (which won’t necessarily be a template technically, but rather a magic word).

Suggested solution: just always show the sidebar on the main page with its old interwiki list

Sorry, but that’s unfortunately probably one of the worst solutions. While I agree that the main page doesn’t need to be 100% consistent with articles, presenting a totally different UI (multi-column dropdown vs one-column static list) is too much of a difference.

It must be at the same place as on usual pages. Not just for consistency, but especially because main pages are important and popular, and people may find the main page and want to move to an edition in another language.

Main pages’ purpose is to present the content of the site to the user, not to drive them instantly away.

The information most people look for is usually not on the main page, so actually, leaving the main page as soon as possible is very often exactly what is needed.

Sure, making language switching as easy as possible is important, but not the number 1 goal.

If is the number 1 goal of the people who need information in another language. People who design main pages of Wikipedias usually read information in the language of that wiki, but many readers of these pages need information in another language. This is especially true for English, but also for some other languages.

Placing language switching below the fold is a good compromise IMO

A compromise between what options?

We can be discussing here forever about what the best solution for the Main pages should be. But it's responsability of the design team to make a proposal. They haven't done it. They're not doing it. And, as I have been adviced not to comment in Phabricator because my position toward this lack of proposal is not welcome, it seems that our opinion is irrelevant. There's no solution here, I don't expect it.

The goal of this change is to give more flexibility to different solutions. When we're done, it will be possible to have the language button at the top, bottom or inside the content of the main page. As we've discussed main pages are community maintained, so we will present options with recommendations, but community will ultimately decide how this page looks.

This task has fallen back in priority, given the holiday season and other more important priorities, but a solution is coming.

Is there any mockup yet with a proposal?

Main pages’ purpose is to present the content of the site to the user, not to drive them instantly away.

The information most people look for is usually not on the main page, so actually, leaving the main page as soon as possible is very often exactly what is needed.

Leaving the page and leaving the site are two very different things. I wasn’t explicit in the second clause, but I meant “not to drive them instantly away from the site”.

[…] many readers of these pages need information in another language. This is especially true for English, but also for some other languages.

Good point, but (except for probably English) I find it unlikely for readers of a given main page to need information in an arbitrary other language—readers of the German Wikipedia may want to find information in Bavarian, Alemannic or Low Saxon, but almost definitely not in Chinese or Spanish; readers of the Russian Wikipedia may need information in one of the many minority languages in Russia like Tatar or Udmurt, but rarely in French. The stock language selector provided by MediaWiki is good to quickly find an arbitrary language, but hand-crafted short lists make it even faster to find languages that are present on the list.

Placing language switching below the fold is a good compromise IMO

A compromise between what options?

Between the top (good for people whose only goal is to switch to another wiki) and the very bottom (good for people who never want to switch to other wikis from the main page).


When we're done, it will be possible to have the language button at the top, bottom or inside the content of the main page.

That’s good news, but unfortunately I don’t see this in the acceptance criteria—they’re all about the first idea (show the <h1> and put the language switcher there), none about the second idea (template/magic word for communities to put it wherever they want).

Sorry, but that’s unfortunately probably one of the worst solutions. While I agree that the main page doesn’t need to be 100% consistent with articles, presenting a totally different UI (multi-column dropdown vs one-column static list) is too much of a difference.

If a community customises the list of interwiki links, it would be a list, if not, then older ULS behaviour that is pretty similar to ULS language switcher that is present in new Vector. We could also make it have ULS compact mode in both cases. Either way, this issue should have been thought through before even thinking of designing a language switcher button, so I am mostly opposed to suggestions to drastically change existing main page designs to accommodate new Vector, and not that fixated on my suggestion being the best option to proceed here.

(If I was the sole person deciding this, I would have dumped both language switcher and sidebar hiding entirely, yes. There is no evidence that this is at all a better design for desktop experience, other than some A/B tests that confirm a basic assumption that if you make something more readable, noticeable, and higher placed, it will be discovered more. Which are... not good A/B tests given how outdated even new Vector’s design is.)

If is the number 1 goal of the people who need information in another language. People who design main pages of Wikipedias usually read information in the language of that wiki, but many readers of these pages need information in another language. This is especially true for English, but also for some other languages.

Tbh, I am not sure how many people (read non-Wikimedians) would 1) constantly change between languages through the main page, 2) not learn eventually that language switcher is located in the footer for main page, and 3) continue to use new Vector when its design introduces more complexity to language switching process and virtually no benefits. I am sure there would be some, but I don’t think this concern is that major.

Is there any mockup yet with a proposal?

the mockups are in the task description. We will try the first method: adding a title + language switcher to the top of the page. Hopefully this works out and can be our recommended method. Secondly we will try putting a language switcher within the page.

Tbh, I am not sure how many people (read non-Wikimedians) would 1) constantly change between languages through the main page, 2) not learn eventually that language switcher is located in the footer for main page, and 3) continue to use new Vector when its design introduces more complexity to language switching process and virtually no benefits. I am sure there would be some, but I don’t think this concern is that major.

Non-Wikimedians (the bulk of the readers) constantly change between languages if their language is not one of the main languages in the world (because a "Wikipedia" search at Google will point to a dominant language), they will need a lot of time to learn that the switcher is there (many people has asked for this when it was buried in the Basque Wikipedia) and 3) they won't switch to another Vector because they are non-wikimedians and they can't do this.

the mockups are in the task description.

Understood. There are no mockups. And there won't be.

the mockups are in the task description.

Understood. There are no mockups. And there won't be.

Maybe you are asking about mockups for a redesigned Main page? This task is about making it easier to switch languages from the current Main page. Feel free to open a new task regarding redesigning the Main page if you would like. As we've already discussed that is not part of our team's project, but I (and probably other designers) would be happy to contribute ideas if you start a conversation. Thanks!

Change 734420 merged by jenkins-bot:

[mediawiki/core@master] Allow editors to customize the main page h1 heading text

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

There is one open here: T293405, and there is no one "happy to help with that". Just the opposite: I have been harassed for opening it. So yes, I understand that the design team is not interested in design.

Re: Tech News - What wording would you suggest as the content, and When should it be included? If I understand correctly from the merged patch, it should be in next week's edition, so it needs to be written today (or early tomorrow). Thanks!

@Quiddity thanks for asking nothing needed yet for this particular one but I'll create a user notice that can go out to explain the change as it's probably useful to certain communities...

Change 743513 had a related patch set uploaded (by Nray; author: Nray):

[mediawiki/skins/Vector@master] Feature flag language button in main page header

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

nray removed nray as the assignee of this task.Dec 3 2021, 11:45 PM
nray added a subscriber: nray.
nray removed nray as the assignee of this task.Dec 7 2021, 1:20 AM
nray removed nray as the assignee of this task.Dec 8 2021, 5:20 PM

Change 745335 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[operations/mediawiki-config@master] Enable VectorLanguageInMainPageHeader on main page

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

Change 743513 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Feature flag language button in main page header

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

Change 745335 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable VectorLanguageInMainPageHeader on main page

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

Mentioned in SAL (#wikimedia-operations) [2021-12-16T19:13:34Z] <catrope@deploy1002> Synchronized wmf-config: Config: [[gerrit:745335|Enable VectorLanguageInMainPageHeader on main page (T293470)]] (duration: 01m 06s)

Edtadros added a subscriber: Edtadros.

Test Result - Beta

Status: ❌ FAIL
Environment: beta
OS: macOS Monterey
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

Please perform the following steps for both logged-in and anonymous users.

✅ AC1: When at default

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page
  2. Verify that the language list is absent in the sidebar and the new language button is at the bottom of the content.
  3. Verify the new language button is not at the top of the content.
Logged InAnon
Screen Shot 2022-01-04 at 5.37.32 AM.png (2×1 px, 1 MB)
Screen Shot 2022-01-04 at 5.37.39 AM.png (1×972 px, 477 KB)

❌ AC2: When languageinheader is disabled and languageinmainpageheader is enabled

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?languageinheader=0&languageinmainpageheader=1
  2. Verify that the language list is present in the sidebar and the new language button is not at the bottom of the content and not at the top of the content

There is a change language button at the bottom, I am assuming that considered the "new language button"

Logged InAnon
Screen Shot 2022-01-04 at 5.30.16 AM.png (2×1 px, 1 MB)
Screen Shot 2022-01-04 at 5.39.08 AM.png (1×972 px, 530 KB)

❌ AC3: When languageinheader is enabled and languageinmainpageheader is at its default (disabled)

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?languageinheader=1
  2. Verify that the language list is absent in the sidebar and the new language button is not at the top of the content.
  3. Verify the new language button is at the bottom of the content

The language switcher is at the top of the content

Logged InAnon
Screen Shot 2022-01-04 at 5.29.24 AM.png (2×1 px, 1 MB)
Screen Shot 2022-01-04 at 5.35.01 AM.png (1×972 px, 531 KB)

❌ AC4: When languageinheader is enabled and languageinmainpageheader is enabled

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?languageinheader=1&languageinmainpageheader=1
  2. Verify that the language list is absent in the sidebar and the new language button is at the top of the content.
  3. Verify the new language button is not at the bottom of the content

The change language button is at the bottom of the page.

Logged InAnon
Screen Shot 2022-01-04 at 5.31.29 AM.png (2×1 px, 1 MB)
Screen Shot 2022-01-04 at 5.34.15 AM.png (1×972 px, 531 KB)

✅ AC5: When languageinheader is enabled and languageinmainpageheader is disabled and visiting content

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Dog?languageinheader=1&languageinmainpageheader=0
  2. Verify that the language list is absent in the sidebar and the new language button is at the top of the content.
  3. Verify the new language button is not at the bottom of the content
Logged InAnon
Screen Shot 2022-01-04 at 5.32.44 AM.png (2×1 px, 1 MB)
Screen Shot 2022-01-04 at 5.32.31 AM.png (2×1 px, 2 MB)
Screen Shot 2022-01-04 at 5.32.59 AM.png (1×972 px, 696 KB)
Screen Shot 2022-01-04 at 5.33.04 AM.png (1×972 px, 609 KB)
Jdlrobson updated the task description. (Show Details)
Jdlrobson removed the point value for this task.

@Edtadros I've amended the QA steps which was wrong.

AC2:

The URL used in the screenshot for the anon test is incorrect.

❌ AC2: When languageinheader is disabled and languageinmainpageheader is enabled
There is a change language button at the bottom, I am assuming that considered the "new language button"

I don’t think so, that button is user-generated content. On the below screenshot from https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?languageinheader=1&languageinmainpageheader=0 I put a cross on the wrong button and circled the right one with green; I also gave a gray background to the user-generated content area:

Screenshot 2022-01-05 at 20-24-42 Wikipedia, the free encyclopedia.png (213×653 px, 11 KB)

I don’t think so, that button is user-generated content. On the below screenshot from https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?languageinheader=1&languageinmainpageheader=0 I put a cross on the wrong button and circled the right one with green; I also gave a gray background to the user-generated content area:

Screenshot 2022-01-05 at 20-24-42 Wikipedia, the free encyclopedia.png (213×653 px, 11 KB)

I've clarified the description to avoid confusion. We are not testing the "change language" button.

❌ AC2: When languageinheader is disabled and languageinmainpageheader is enabled

  1. Visit https://en.wikipedia.beta.wmflabs.org/wiki/Main_Page?languageinheader=0&languageinmainpageheader=1
  2. Verify that the language list is present in the sidebar and the new language button is not at the bottom of the content and not at the top of the content

There is a change language button at the bottom, I am assuming that considered the "new language button"

Logged InAnon
Screen Shot 2022-01-04 at 5.30.16 AM.png (2×1 px, 1 MB)
Screen Shot 2022-01-04 at 5.39.08 AM.png (1×972 px, 530 KB)

The URL in the address bar of the 2nd screenshot is wrong. It doesn't match the first.