Page MenuHomePhabricator

Community-defined Translation Collections: Single selection mode UI
Closed, ResolvedPublic

Assigned To
Authored By
PWaigi-WMF
Jun 28 2024, 11:59 AM
Referenced Files
F57731461: List - Basic selection mode.png
Fri, Nov 22, 11:10 AM
F57721798: cast.webm
Tue, Nov 19, 4:37 PM
F57718499: 2024-11-18_10-28-14.png
Mon, Nov 18, 7:06 PM
F57718491: 2024-11-18_10-24-25.png
Mon, Nov 18, 7:06 PM
F57718471: 2024-11-18_10-18-15.mp4.gif
Mon, Nov 18, 7:06 PM
F57718455: 2024-11-18_10-09-35.mp4.gif
Mon, Nov 18, 7:06 PM
F57718445: 2024-11-18_10-05-42.png
Mon, Nov 18, 7:06 PM
F57648729: List - Event specific.png
Oct 27 2024, 7:15 AM

Description

Background

This task explores the UI/UX elements of selecting and discovering translation collections curated by editors on the mobile translation workflow. This work is closely related to T368713, T369268 & T368422.

User story

Discovering Collections
As an editor who is interested in translating articles,
I want to access different sources of collections,
So that I can have a variety of options to choose from based on my interests.

Selecting a single collection
As an editor who is selecting 1 option under Collections,
I want to view the available translation suggestions under the said collection,
So that I can have a targeted focus to translate what interests me.

Design details

This work builds upon the existing custom translation suggestions framework, specifically extending the Basic topic selection (T368422) functionality. The goal is to seamlessly integrate Collections into the existing suggestion system, enhancing the user's ability to discover and engage with curated content from campaigns, events, and wikiprojects.

Basic collection selection mode:

List - Basic selection mode.png (1×2 px, 442 KB)
  • The Collections option appears as a filter chip in the "Automatic" section, alongside "For you" and "Popular topics".
  • Selecting Collections replaces the currently active filter, just like selecting any other topic.
  • Users can switch between Collections and other topics with a single tap, maintaining the simplicity of the single-selection mode.
  • Users can select a Collection just like any other topic.
  • When selected, Collection suggestions appear on the Suggestions screen.
NOTE: Tapping the Collection chip to view details about the collection has been extracted to T379273: Community-defined Translation Collections: Collection View

List-based suggestions

  • Maintain current suggestion card style.
  • Introduce a small, visual element to indicate the list.
Acceptance Criteria
  • Successful states:
  • being able to view different chips under the Collections section sourced from Campaigns, Wiki projects, Events, or Vital Lists.
  • being able to select a single chip at a time from any of the options under Collections.

QA Results - Test Mobile ContentTranslation

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Change #1077751 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] Unified dashboard: Add UI for community lists

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

@ngkountas I have updated the mockups in this task with "Collections" and "All collections" terminology.

Change #1084155 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[research/recommendation-api@master] Add endpoint to fetch all page collections with their metadata

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

Change #1084155 merged by jenkins-bot:

[research/recommendation-api@master] Add endpoint to fetch all page collections with their metadata

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

Change #1084205 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] Add api method to fetch page collections

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

Change #1084781 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[research/recommendation-api@master] support page collection recommendations only for specific collection

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

Change #1084781 merged by jenkins-bot:

[research/recommendation-api@master] support page collection recommendations only for specific collection

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

Change #1084205 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] Add api method to fetch page collections

Reason:

squashed into Ie0e7c54cde4ce0d76b28831393a994ecc1968149

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

PWaigi-WMF renamed this task from Custom translation suggestions: Community-defined lists to Custom translation suggestions: Community-defined Collections.Thu, Oct 31, 2:47 PM
PWaigi-WMF renamed this task from Custom translation suggestions: Community-defined Collections UI (basic selection mode) to Community-defined Translation Collections: Single selection mode UI.Tue, Nov 5, 11:43 AM

Change #1088276 had a related patch set uploaded (by KartikMistry; author: KartikMistry):

[operations/deployment-charts@master] Update recommendation-api to 2024-11-06-190017-production

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

SBisson updated the task description. (Show Details)

Change #1088276 merged by jenkins-bot:

[operations/deployment-charts@master] Update recommendation-api to 2024-11-08-142328-production

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

Change #1077751 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Unified dashboard: Add UI for page collection recommendations

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

Change #1090944 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241113

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

Change #1090944 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] CX3 Build 0.2.0+20241113

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

Change #1091007 had a related patch set uploaded (by KartikMistry; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] CX3 Build 0.2.0+20241113

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

Change #1091007 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] CX3 Build 0.2.0+20241113

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

Mentioned in SAL (#wikimedia-operations) [2024-11-14T08:56:05Z] <kartik@deploy2002> Started scap sync-world: Backport for [[gerrit:1091007|CX3 Build 0.2.0+20241113 (T368718 T374567)]]

Mentioned in SAL (#wikimedia-operations) [2024-11-14T09:00:09Z] <kartik@deploy2002> kartik: Backport for [[gerrit:1091007|CX3 Build 0.2.0+20241113 (T368718 T374567)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-11-14T09:25:45Z] <kartik@deploy2002> Finished scap sync-world: Backport for [[gerrit:1091007|CX3 Build 0.2.0+20241113 (T368718 T374567)]] (duration: 29m 40s)

Change #1092259 had a related patch set uploaded (by Sbisson; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] Unified dashboard: Add UI for page collection recommendations

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

Change #1092259 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@wmf/1.44.0-wmf.3] Unified dashboard: Add UI for page collection recommendations

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

Mentioned in SAL (#wikimedia-operations) [2024-11-18T15:30:59Z] <lucaswerkmeister-wmde@deploy2002> Started scap sync-world: Backport for [[gerrit:1092259|Unified dashboard: Add UI for page collection recommendations (T368718)]]

Mentioned in SAL (#wikimedia-operations) [2024-11-18T15:45:37Z] <lucaswerkmeister-wmde@deploy2002> sbisson, lucaswerkmeister-wmde: Backport for [[gerrit:1092259|Unified dashboard: Add UI for page collection recommendations (T368718)]] synced to the testservers (https://wikitech.wikimedia.org/wiki/Mwdebug)

Mentioned in SAL (#wikimedia-operations) [2024-11-18T15:58:16Z] <lucaswerkmeister-wmde@deploy2002> Finished scap sync-world: Backport for [[gerrit:1092259|Unified dashboard: Add UI for page collection recommendations (T368718)]] (duration: 27m 17s)

@ngkountas Please review my findings below. If you have any questions, please let me know. Thanks!

Test Result - Test Mobile ContentTranslation

Status: ❓Need More Info / ❌ FAIL
Environment: Test Mobile ContentTranslation
OS: macOS Sonoma 15.0
Browser: Chrome 130
Device: MBA
Emulated Device: iPhone 14 Pro Max

Test Artifact(s):

https://test.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&from=en&to=el&filter-type=automatic&filter-id=previous-edits
https://test.m.wikipedia.org/w/index.php?title=Special:ContentTranslation&active-list=suggestions&from=en&to=es&filter-type=topic&filter-id=sports

Test Steps

Test Case 1: Ensure "Collections" chip is displayed in the "Adjust suggestions" view

  1. Navigate to the mobile translation workflow.
  2. Open the "Adjust suggestions" view.
  3. AC1: Confirm that the "Collections" chip is displayed alongside "For you" and "Popular topics" in the Automatic section.

Does not have "Popular topics" but just "Popular"

2024-11-18_10-05-42.png (1×698 px, 125 KB)

Test Case 2: View sources under "Collections"

  1. Tap the "Collections" chip in the "Adjust suggestions" view.

2.❓ AC2: Verify that sources like Campaigns, Wiki projects, Events, and Vital Lists are displayed as selectable chips.

Is this what it's supposed to look like in the gif below? This is based on the 1st Acceptance Criteria. How do you verify that sources like Campaigns, Wiki projects, Events, and Vital Lists are displayed as selectable chip since all I'm seeing is Vital articles?

2024-11-18_10-09-35.mp4.gif (1×638 px, 2 MB)

Test Case 3: Select a single chip under "Collections"

  1. Tap any chip under "Collections" (e.g., "Art+Feminism").
  2. AC3: Confirm that the selected chip becomes active.

The only thing under Collections is "Vital articles". Are there supposed to be more chips under "Collection" like the screenshots in the description?

2024-11-18_10-18-15.mp4.gif (1×698 px, 2 MB)

  1. AC4: Verify that suggestions specific to the selected collection are displayed on the Suggestions screen.

See AC3 gif. It seems to get part of it. I'm not sure how Vertebrae, Bank of Italy, and gecko have to do anything with Art.

See AC3

Test Case 4: View metadata for articles under a selected collection

  1. While viewing article suggestions for a selected collection, check the metadata displayed under each article.
  2. AC5: Confirm that the metadata is accurate and specific to the selected collection.

Is this what you want to see?

2024-11-18_10-24-25.png (1×1 px, 251 KB)

Test Case 5: Handle "No collections available" state

  1. Navigate to the "Collections" section when no collections are available.
  2. AC6: Verify that an appropriate message like "No collections available" is displayed.

For the last acceptance criteria of being able to view an appropriate state when there are no collections available. How do you test this?

2024-11-18_10-28-14.png (1×733 px, 122 KB)

GMikesell-WMF updated the task description. (Show Details)
GMikesell-WMF moved this task from Needs QA to In-progress on the LPL Hypothesis board.

Based on the above screencasts @GMikesell-WMF provided, I believe we can move forward and close this task as done. More specifically,

  1. AC1 looks good, the "All collections" chip is there, as part of the "Automatic" filters group, next to "Popular".
  2. AC2 also looks good. "Vital articles" is listed under "Collections" group. There is no other filter there, because there is still no other page collection to list, as of now.
  3. AC3 is done, as demonstrated in the following screencasts (see below). When user clicks on "Vital articles" filter, the chip becomes active, and the filter is applied once the user clicks on the "Done" button.
  4. AC4 can also be considered done. When user selects and applies the "Vital articles" filter, only suggestions from this collection are displayed in the page/section suggestion lists (see screencast below).
  5. AC5 cannot really verified as part of this work. The API request (link here) does indeed return the page collection metadata properly, for each recommendation, but the task is about the UI and displaying the collection metadata is out of scope for this task. @PWaigi-WMF do you think it's ok to remove this criterion from the acceptance criteria list: being able to view the correct meta-data under each article selected.?
  6. @PWaigi-WMF there is no design for the case when no collections are available. Moreover, this may never be the case, as we have "Vital articles" collection available in all cases. Do you think we should just remove the related acceptance criterion (view an appropriate state when there are no collections available.), or we should create a design for this case and implement it in the UI? If we go for the latter option, I believe we should capture it in a new task and unblock the current one.

Screencast:

Based on the above screencasts @GMikesell-WMF provided, I believe we can move forward and close this task as done. More specifically,

  1. AC1 looks good, the "All collections" chip is there, as part of the "Automatic" filters group, next to "Popular".
  2. AC2 also looks good. "Vital articles" is listed under "Collections" group. There is no other filter there, because there is still no other page collection to list, as of now.
  3. AC3 is done, as demonstrated in the following screencasts (see below). When user clicks on "Vital articles" filter, the chip becomes active, and the filter is applied once the user clicks on the "Done" button.
  4. AC4 can also be considered done. When user selects and applies the "Vital articles" filter, only suggestions from this collection are displayed in the page/section suggestion lists (see screencast below).
  5. AC5 cannot really verified as part of this work. The API request (link here) does indeed return the page collection metadata properly, for each recommendation, but the task is about the UI and displaying the collection metadata is out of scope for this task. @PWaigi-WMF do you think it's ok to remove this criterion from the acceptance criteria list: being able to view the correct meta-data under each article selected.?
  6. @PWaigi-WMF there is no design for the case when no collections are available. Moreover, this may never be the case, as we have "Vital articles" collection available in all cases. Do you think we should just remove the related acceptance criterion (view an appropriate state when there are no collections available.), or we should create a design for this case and implement it in the UI? If we go for the latter option, I believe we should capture it in a new task and unblock the current one.

Screencast:

@ngkountas Sorry if some of these were ok. I was just basing it on the acceptance criteria and the screenshots in the description. Please see below, thanks!

  1. AC1- I failed it only because it showed "Popular" compared to the screenshot in the description which has "Popular topics". I was just basing it on the screenshots in the description. Are the screenshots in the description the latest?
  2. AC2- ✅sounds good
  3. AC3- I failed this because of the acceptance criteria in the description of being able to select a single chip at a time from any of the options under Collections. The only thing under Collections is "Vital articles" which my gif matches your video above. Since the criteria in the description said to select a chip under "Collections" and in the screenshots this multiple chips to choose from, I wasn't sure if I was supposed to see something similar since I only have that one option to choose from compared to the few that are in the screenshot.
  4. AC4- ✅ sounds good
  5. AC5 - Ok I can put ⬜  for now and wait for the response if it should be removed from the criteria.
  6. AC6- I will do the same as AC5, pending on the response.

@GMikesell-WMF

  • I will extract the AC3 & AC5 to T379273; and change the wording.
  • We can skip testing AC6 entirely since Vital Articles will always be a default collection. Let me tweak the task accordingly.
  • For AC2, since we are currently recruiting organizers to add their campaign pages, we may not be able to test this IRL until then. We can pause this specific test scenario until we get organizers to add markers to their pages; how does that sound?

@ngkountas

  • AC1 is about the differences in the copy on the chip; according to the design, the 1st-page shows Popular but on the 2nd page Popular Topics

Change #1093329 had a related patch set uploaded (by Nik Gkountas; author: Nik Gkountas):

[mediawiki/extensions/ContentTranslation@master] Fix label for popular filter, inside filters summary

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

[...]

  • AC1 is about the differences in the copy on the chip; according to the design, the 1st-page shows Popular but on the 2nd page Popular Topics

@SGautam_WMF @Pginer-WMF is it intentional to have two different labels for the "popular" suggestion filter?

[...]

  • AC1 is about the differences in the copy on the chip; according to the design, the 1st-page shows Popular but on the 2nd page Popular Topics

@SGautam_WMF @Pginer-WMF is it intentional to have two different labels for the "popular" suggestion filter?

Ohh that looks by mistake to me. I think we can proceed with just the "Popular". I can update the mockup.

Change #1093329 abandoned by Nik Gkountas:

[mediawiki/extensions/ContentTranslation@master] Fix label for popular filter, inside filters summary

Reason:

no need for a new label based on this comment: https://phabricator.wikimedia.org/T368718#10347654

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

@PWaigi-WMF based on the above comments, I believe we can close this task as done.