Page MenuHomePhabricator

Custom Translation Suggestions: Empty & Error states for Article and Section-level suggestions
Closed, ResolvedPublic

Assigned To
Authored By
PWaigi-WMF
Dec 19 2024, 9:40 AM
Referenced Files
F58618522: Screenshot 2025-03-06 at 13.43.27.png
Mar 6 2025, 10:44 AM
F58609209: cast.webm
Mar 5 2025, 10:37 AM
F58398551: Suggestion list empty placeholder on mobile
Feb 14 2025, 11:47 AM
F58398547: Suggestion list empty placeholder on desktop
Feb 14 2025, 11:47 AM
F58398543: old-cx-empty-placeholder.png
Feb 14 2025, 11:43 AM
F58029507: 2024-12-17_14-27-00.mp4.gif
Dec 19 2024, 9:52 AM
F58029517: Screenshot 2024-12-19 at 12.47.54.png
Dec 19 2024, 9:52 AM
F58029505: Screenshot 2024-12-19 at 12.37.59.png
Dec 19 2024, 9:52 AM

Description

Details

This task outlines scenarios where suggestions are not displayed for different reasons, and an appropriate UI/UX is needed to improve the current experience.

Scenarios:

-When there are no available article and/or section suggestions for a language pair after filtering by Topic, Collections, or any other filter chip.
-When the user discards all article or section suggestions after filtering by Topic, Collections, or any other filter chip.
-When the RecAPI service is unavailable/ not working after refreshing or selecting a Topic, Collections, or any other filter chip.

What currently happens:
Until now, when there are no suggestions in the page or section suggestions list, only the list header is displayed there, with no indication for the user that the suggestions are missing.

Example 1: Page suggestions missing

Screenshot 2024-12-19 at 12.37.59.png (717×1,549 px, 324 KB)

Example 2: Both page and section suggestions missing

Screenshot 2024-12-19 at 12.47.54.png (723×1,563 px, 129 KB)

Example 2: Screencast of empty page suggestions list by discarding suggestions

2024-12-17_14-27-00.mp4.gif (968×832 px, 932 KB)

Design

To improve the UX the following solution is proposed:

  • If one of the groups (lists) does not have suggestions, don't show that group, including its header.
  • If both groups don't have suggestions, show an empty state message without any group separation (i.e., no need for "Create new pages" or "Expand with new sections" headers).

The empty state message should be copied from the old CX dashboard -for now- (screenshot below):

old-cx-empty-placeholder.png (848×531 px, 46 KB)

Related Objects

View Standalone Graph
This task is connected to more than 200 other tasks. Only direct parents and subtasks are shown here. Use View Standalone Graph to show more of the graph.

Event Timeline

PWaigi-WMF renamed this task from Empty states for Article and Section-level suggestions to Custom Translation Suggestions: Empty states for Article and Section-level suggestions .Dec 19 2024, 9:41 AM
PWaigi-WMF renamed this task from Custom Translation Suggestions: Empty states for Article and Section-level suggestions to Custom Translation Suggestions: Empty & Error states for Article and Section-level suggestions .Dec 20 2024, 4:01 PM
PWaigi-WMF added a project: Design.
PWaigi-WMF updated the task description. (Show Details)
ngkountas moved this task from Backlog to Prioritized on the LPL Hypothesis board.

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

[mediawiki/extensions/ContentTranslation@master] SX: Make sure default seeds are fetched upon language pair updated

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

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

[mediawiki/extensions/ContentTranslation@master] Add empty placeholder for suggestion lists

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

@Pginer-WMF I took the initiative to borrow the designs from the old CX dashboard for the empty state placeholder and I adjusted the text a little bit.

Screenshot from old CX dashboard empty placeholder:

old-cx-empty-placeholder.png (848×531 px, 46 KB)

The result looks like this:

Screenshot after fix on desktop unified dashboard:

Suggestion list empty placeholder on desktop (726×698 px, 68 KB)

Screenshot after fix on mobile unified dashboard:

Suggestion list empty placeholder on mobile (400×856 px, 75 KB)

Please let me know, if you feel that we should adjust the design or the text, accordingly.

Please let me know, if you feel that we should adjust the design or the text, accordingly.

The text proposed looks good. My only consideration is that I'd avoid showing the empty state duplicated.

Suggestions are provided in two groups. I'd propose the following behaviour:

  • If one of the groups does not have suggestions, don't show that group.
  • If both groups don't have suggestions, show the empty state message without any group separation (i.e., no need for "Create new pages" or "Expand with new sections" headers).

Thank you a lot Pau! I updated the patch to reflect your proposal.

Change #1119686 merged by jenkins-bot:

[mediawiki/extensions/ContentTranslation@master] Add empty placeholder for suggestion lists

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

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

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

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

Change #1122111 merged by jenkins-bot:

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

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

The empty state has now been fixed and deployed in production as demonstrated in the screencast below:

  • The page suggestions list is successfully hidden when no suggestions exist
  • The empty state message is properly diplayed when both page and section suggestions lists are empty

Screencast from test wiki:

The empty states work as intended.
As we explore how to expose collections and topic areas in meaningful ways, we can consider how to make use of these empty states to make more actionable the suggestion to adjust the filters (e.g., surface relevant collections and topic areas users can directly select).

Works as expected in Production.

Screenshot 2025-03-06 at 13.43.27.png (2,309×1,071 px, 181 KB)