As part of MinT for Wiki Readers MVP (T359072), this ticket provides support for exploring an overview of the contents available about a topic on the different languages in which it is available.
When a topic is selected at the "Confirm" step or at the "Translation view" using the translation options, users can change the source language. Instead of providing the standard language selector directly for the source language, an intermediary step to "Explore languages" is provided. This step surfaces the table of contents for the different languages in which the article is available. This allows the user to explore the content coverage and find relevant sections to read from other languages. an option to access the standard language selector is still available for those searching for a specific language.
Design details
This step includes the following elements:
- Header. The "Explore languages" label and an action using the ArrowPrevious icon to return to the previous context where the user came from, which in this case could be the Confirm (T359512) or the Translation view (T359801).
- Access to all languages. An input with the "All languages for this topic" directs users to the standard language selector with all languages in which the article is available. See the Search input codex component.
- Introduction. Two elements set the context:
- Information panel. With the title "Learn more from other languages" and the description "Editors in different languages covered this topic in different ways." provides a glimpse about the multilingual nature of the project to explain why the article on a given topic may have different contents on each language.
- The label "Languages with the most coverage for <topic>" communicate the list is ordered giving priority to those languages where the use can learn the most from.
- Information panel. With the title "Learn more from other languages" and the description "Editors in different languages covered this topic in different ways." provides a glimpse about the multilingual nature of the project to explain why the article on a given topic may have different contents on each language.
- List of contents per language. A list of items that users can select to change the source language. The selected item will be identified by the selected radio button and the light blue progressive-subtle background.
- Language name and radio button selector.
- Number of sections and other community-provided quality indicators such as "Featured" or "Good article". See the InfoChip Codex component
- Section titles. Only the top level sections are listed.
Criteria for the List of contents per language
We want to surface the languages that provide the most coverage for the topic in order to allow users to easily select them as source languages for the translation. This requires to find a balance between the articles with more information overall and those with more sections (covering a more diverse set of aspects for the topic). The proposed approach is as follows:
- The list will consider all languages that have one or more content sections (excluding "see also", "references" etc. from the count) ordered by the number of sections.
- The version with the largest article will be shown at the top of the list with a "Most detailed" indicator (see example below).
- Given the same number of sections, those with a quality indicator ("Featured", "Good article", etc.) will be shown first.
- If the source language was set to a language for which the article exists but failing the criteria to be shown on the list (e.g., a language with an article but no sections is set in the url) a selected item will be added at the bottom of the list.
Language selection behaviour
- Selecting an item from the "List of contents per language" will set the source language. The user just needs to go back to the previous context without additional confirmation.
- When accessing the full language selector though the "Access to all languages", selecting a language there will result into the language being directly selected and the user returning to the previous context (Confirm or the Translation view) with the new source language selected.
- When the user selects as source the current target language, the languages will swap (i.e., the old source language will become the target one to avoid both source and target having the same value).
Additional considerations
- The elements on top (comprising the "Header" and the "Access to all languages") are sticky. Scrolling will keep them visible on top.
- View in Figma
Derived Requirement
Ensure that when a user selects the "Explore languages" option in the "Confirm" or "Translation view" steps, they are able to view a language explorer interface displaying languages sorted by content coverage, select a new source language, and return seamlessly to the previous context with the updated source language.
BDD
gherkin Feature: Explore Languages Interface for MinT Wiki Readers MVP Scenario: Access the Explore Languages Interface Given the user is at the "Confirm" or "Translation view" step When the user selects "Explore languages" from the language options Then the "Explore languages" interface should display with languages ordered by content coverage Scenario: Navigate to Standard Language Selector Given the user is in the "Explore languages" interface When the user selects the "All languages for this topic" input Then the standard language selector should open displaying all available languages for the topic Scenario: Select a Language in the Explorer Interface Given the user is in the "Explore languages" interface with a list of languages sorted by content coverage When the user selects a language as the source Then the source language should update, and the user should return to the previous context Scenario: Swap Source and Target Languages Given the user has selected a language in "Explore languages" that matches the target language When the user confirms the language selection Then the source and target languages should swap Scenario: Sticky Header on Scroll Given the user scrolls down in the "Explore languages" interface Then the header and "Access to all languages" option should remain visible at the top
Test Result - Beta|Prod
Status: ✅ PASS / ❓Need More Info / ❌ FAIL
Environment: beta/xyzwiki
OS: macOS Sonoma 15.0
Browser: Chrome 130
Device: MBA
Emulated Device: NA
Test Artifact(s):
Test Steps
Test Case 1: Access the Explore Languages Interface
- Open the "Confirm" or "Translation view" step within the translation workflow.
- Select the "Explore languages" option.
- ✅❓❌⬜ AC1: Confirm that the language explorer interface displays, showing languages sorted by content coverage.
Test Case 2: Navigate to Standard Language Selector
- In the "Explore languages" interface, select the "All languages for this topic" input.
- ✅❓❌⬜ AC2: Confirm that the standard language selector displays with all available languages.
Test Case 3: Select a Language in the Explorer Interface
- From the "Explore languages" list, select a language as the source language.
- ✅❓❌⬜ AC3: Confirm that the selected source language updates and the user returns to the previous context.
Test Case 4: Swap Source and Target Languages
- In the "Explore languages" interface, select the current target language as the source language.
- ✅❓❌⬜ AC4: Confirm that the source and target languages swap.
Test Case 5: Sticky Header on Scroll
- Scroll down within the "Explore languages" interface.
- ✅❓❌⬜ AC5: Confirm that the header and "Access to all languages" input remain visible at the top while scrolling.
QA Results - PROD AutomaticTranslation
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T359863#10300926 |
| 2 | ✅ | T359863#10300926 |
| 3 | ❓ | T359863#10300926 |
| 4 | ❓ | T359863#10300926 |
| 5 | ❌ | T359863#10300926 |
