Page MenuHomePhabricator

[L] Section Image suggestions notification UI
Closed, ResolvedPublic

Description

Background and context

This ticket describes the UI for the section-level image suggestion notifications. Refer to the epic for more context and background T318017. This ticket also builds up on the previous article-level image suggestion notification UI in T292147

Goal

Notify experienced users of images that are a good fit for articles in their watchlist so they may choose to add them.

Proposed design

  • The section level image suggestion should appear as a notice similar to image level notification
  • Replace the word “media” to “image” in the current article-level notification copy
  • Replace the “Review media” button to “Review image” in the current article-level notification
  • The notification contains the name of the unillustrated article that the image is matched to
  • Clicking on the general single notification space takes users to the file page of the suggested file in commons.
  • Clicking on “Review image” button in all scenarios below takes the user to the file page of the suggested images in commons
  • Clicking on “View article” button in all scenarios below takes the user to the article for which image is suggested
  • Clicking on the “View section” button in all scenarios below takes the user to the article section for which image is suggested
  • Clicking on the “Help” button in all scenarios below takes the user to the respective help page in that language wiki. Some of those links are available in T292310 and the rest in T331036

Scenario 1 (Single article-level)
If the article only has an image-level suggestion

  • Show the article level image suggestion notification

Notification pop up (1).png (208×511 px, 16 KB)

Scenario 2 (Single section-level)
If the article only has a single section-level image suggestion

  • Show the notification with copy and CTA matching the mage below

Notification pop up (2).png (208×511 px, 17 KB)

Scenario 3 (Grouped)
If the article has article-level and section-level image suggestions or any combination of multiple suggestions for the same article.

  • Show them in a grouped notification as shown in the image

Collapsed:

Notification - collapsed.png (206×511 px, 15 KB)

Expanded:
Notification - expanded.png (451×511 px, 28 KB)

Opening and closing grouped notifications

  • Clicking on the general notification space or “View X suggestions” button expands the notification
  • Show the number of sub-notifications in the “View X suggestion” copy.
  • When the group is opened change the CTA to “Collapse”

Sub notifications

  • Clicking on the sub notification space takes users to the file page of the suggested file in commons
  • Clicking on the three dots in sub notifications show the “View article” or “View section” button depending on what the suggestion is for.
  • The help button also appears under the above CTA for all sub notifications.
  • If the suggestion is article level copy should say “View image suggestion for the Article name
  • If the suggestion is for section copy should say “View image suggestion for the section Section name
  • The article level suggestion appears first in the sub notifications as shown in the image above
  • All the section level suggestions appear in the order in which the sections appear as shown in the image above.

Mobile notification UI can be found here in Figma

NOTE: The frequency and number of notifications the users get will be covered in T330934

Event Timeline

CBogen renamed this task from Section Image suggestions notification UI to [XL] Section Image suggestions notification UI.Mar 22 2023, 4:36 PM
CBogen updated the task description. (Show Details)
CBogen renamed this task from [XL] Section Image suggestions notification UI to [L] Section Image suggestions notification UI.Mar 22 2023, 4:42 PM

Blocked the first version of the SLIS pipeline.

Change 928584 had a related patch set uploaded (by Cparle; author: Cparle):

[mediawiki/extensions/ImageSuggestions@master] Add section-level image suggestions

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

Some questions for @Sneha

  • I can't find a way to modify the text you click on to expand a bundle of suggestions, so I think we'll have to go with "expand" (rather than "view 3 suggestions")
  • "All the section level suggestions appear in the order in which the sections appear " ... does this mean in the order in which the sections appear on the article page? Currently I have them sorted by confidence but can change that

Also note that if a user is getting email notifications they'll get individual notifications for each notification that gets bundled in the web UI - so if they're watching 2 articles that have ALIS and SLIS they could get up to 12 emails. Email notifications are off by default, so perhaps it's not a problem?

Also, as far as I can tell, if we have 2 icons ("view article/section" and "review image") when we have a single notification then we need to have 2 icons when you click on the 3 dots in a bundled notification (the same code is used to generate each)

@Cparle

  1. I wonder if the customization options are different for different type of notification. Like in the example below the alerts I got has more contextual copy.

{F37099993}

  1. "All the section level suggestions appear in the order in which the sections appear " - Yes this means the order in which sections appear in the article. So if there are suggestions for the intro section it would always appear first. (This is only applicable to the order in which we display sub notifications. Does not apply to how notifications are sent.)
  2. Good to know about emails being sent for each individual notification rather than a group. If they are turned off by default perhaps it is okay. However we have a limit to how many notifications we send at any given time right? Or are we sending all that we have found for the article?
  3. Re: icons in the three dot menu I have this prototype here where you can see what the three dot menu looks like. Q: Right now in the three dot menu for subsections I don't have "Review image" option because the notification itself is a CTA for it. But if you saying it is going to show there anyway that is fine by me.
  4. One thing I noticed here is that three dot menu for single notification (which contains help link) is missing. We already have that so I am assuming we will keep showing that.

I can't see the image you posted @Sneha, I just see {F37099993}. Can you re-post maybe?

Oh hang on, I can see this image in the email I got about your comment https://phabricator.wikimedia.org/F37099202 ... but this is just the same as the image in the ticket description above. Have you received an alert with this kind of thing in it? If so - can you tell me where it came from so I can dig into the code?

@Cparle Yes I uploaded the wrong one by mistake earlier but I had corrected it to the new one. Strange that it is not showing up on your side as I can see it here. Let me paste it here again here.

alerts_collapsed.png (476×1 px, 66 KB)

@Sneha looks like you're right about different kinds of notifications - cross-wiki notifications use different javascript code from regular Echo notifications, and have their own messages. I can't see a way to do this for our notifications without rewriting some of the Echo code so that it uses extension-specific messages, which seems like a lot of effort for a tiny change.

ah okay then I guess we can stick with expand and collapse or what the default is.

OK cool, this is ready for review then

Change 930786 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ImageSuggestions@master] Remove temporary workarounds for translation

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

Change 928584 merged by jenkins-bot:

[mediawiki/extensions/ImageSuggestions@master] Add section-level image suggestions

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

Change 930786 merged by jenkins-bot:

[mediawiki/extensions/ImageSuggestions@master] Remove temporary workarounds for translation

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

Change 933066 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ImageSuggestions@wmf/1.41.0-wmf.13] Section-level notifications

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

Change 933066 abandoned by Matthias Mullie:

[mediawiki/extensions/ImageSuggestions@wmf/1.41.0-wmf.13] Section-level notifications

Reason:

Not getting backported

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

FYI for testing, execute these commands to generate all expected types of notifications:

(you can swap out wiki, agent, title, media-url with whatever you want to test)

# individual page notification
mwscript extensions/ImageSuggestions/maintenance/SendTestNotification.php --wiki=ruwiki --agent "YOUR USER NAME HERE" --title "Изотопный анализ" --media-url "//commons.wikimedia.org/wiki/File:Thermal_ionization_mass_spectrometer.jpg"

# individual section notification
mwscript extensions/ImageSuggestions/maintenance/SendTestNotification.php --wiki=ruwiki --agent "YOUR USER NAME HERE" --title "Литва" --section-heading "Государственный_строй" --media-url "//commons.wikimedia.org/wiki/File:Gitanas_Nauseda_(cropped).png"

# bundled notification (page)
mwscript extensions/ImageSuggestions/maintenance/SendTestNotification.php --wiki=ruwiki --agent "YOUR USER NAME HERE" --title "Лингвистика" --section-heading "Предмет_лингвистики" --media-url "//commons.wikimedia.org/wiki/File:Speech_bubbles_clipart.png"

# bundled notification (section) - same title as above
mwscript extensions/ImageSuggestions/maintenance/SendTestNotification.php --wiki=ruwiki --agent "YOUR USER NAME HERE" --title "Лингвистика" --media-url "//commons.wikimedia.org/wiki/File:Indicatori.png"

Thx, @matthiasmullie! Checked the specs in ruwiki betalabs

Scenario 1 (Single article-level)

If the article only has an image-level suggestion ruwiki betalabs
[] Show the article level image suggestion notification"Help" link is present
Notification pop up (1).png (208×511 px, 16 KB)
Screen Shot 2023-07-05 at 4.37.05 PM.png (360×1 px, 80 KB)

Scenario 2 (Single section-level)

If the article only has a single section-level image suggestionruwiki betalabs
[] Show the notification with copy and CTA matching the mage below"Help" link is present
Notification pop up (2).png (208×511 px, 17 KB)
Screen Shot 2023-07-05 at 4.44.40 PM.png (364×1 px, 84 KB)

Scenario 3 (Grouped)

If the article has article-level and section-level image suggestions or any combination of multiple suggestions for the same article.ruwiki betalabs
[] Show them in a grouped notification as shown in the image (1) the notification counter is not present (2) the arrow points up (3) the label is "Expand" not "View N images" This UI is consistent with other bundled notifications.
Collapsed:
Notification - collapsed.png (206×511 px, 15 KB)
Screen Shot 2023-07-05 at 5.08.05 PM.png (440×1 px, 70 KB)
Expanded:
Notification - expanded.png (451×511 px, 28 KB)
The mix of section level and article level notifications:
Screen Shot 2023-07-05 at 4.28.11 PM.png (1×1 px, 202 KB)
Only section level notifications
Screen Shot 2023-07-05 at 5.10.13 PM.png (778×1 px, 137 KB)
Summary
  • Checked only in betalabs
  • I've marked all specs as Done. The UI for image bundled notifications is consistent with existing UI for other bundled notiifcations although it doesn't follow exactly the specs in the task.

In the table in the above comment I added comments in red for bundled notifications UI. Here are my additional notes for @Sneha's review:

  • I compared UI for bundled notifications for article image and section-level image suggestions with the UI of other bundled notifications. The present UI is consistent with how other bundled notifications behave.
  • “View X suggestions” is present only for cross-wiki notifications and alerts:
Screen Shot 2023-07-05 at 5.25.59 PM.png (666×1 px, 103 KB)
Screen Shot 2023-07-05 at 5.24.27 PM.png (250×1 px, 30 KB)

Otherwise, the count of messages might be mentioned (not for all types on notifications) in the body of bundled messages:

Screen Shot 2023-07-05 at 5.24.19 PM.png (302×1 px, 42 KB)

  • the arrow for expanding (pointing down) and collapsing (pointing up) is also consistent with other the arrow for other notifications' expanding/collapsing.

Hi @Etonkovidova thanks for checking the copy and yes it is okay for it to say Expand. I had a chat with Cormac about it and we realized the option to customize the copy with exact number is not available in the type of notification we are sending. I could have added a note here for you when we discussed. Will remember to do so next time. So you can mark it as resolved.

And good catch about the arrow pointing up when it is not expanded. That seems like a bug?

@Sneha - sorry, I missed @Cormac's comment about keeping the same design as existing notifications.

And good catch about the arrow pointing up when it is not expanded. That seems like a bug?

Re the arrow pointing states - I think I described it rather confusingly. The arrow pointing down indicates a collapsed state, the arrow pointing up indicates an open state. That's how the arrows are presented now for any bundled notifications, including bundled image suggestion notification (and even some other features, e.g. search preview on mobile). Since only the mockups in this task display the arrows differently, I'm assuming that the current display is fine.

The mockup on this taskThe bundled notificationsMobile search UI
Collapsed:
Notification - collapsed.png (206×511 px, 15 KB)
Collapsed:
Screen Shot 2023-07-06 at 1.57.30 PM.png (238×1 px, 31 KB)
Collapsed:
Screen Shot 2023-07-06 at 2.00.12 PM.png (432×726 px, 67 KB)
Expanded:
Notification - expanded.png (451×511 px, 28 KB)
Expanded:
Screen Shot 2023-07-06 at 1.57.41 PM.png (574×1 px, 79 KB)
Expanded:
Screen Shot 2023-07-06 at 2.00.31 PM.png (772×724 px, 353 KB)

oh okay got it. I think the mock up has the wrong orientation of arrow by mistake. It looks good in production.