Page MenuHomePhabricator

Section-level image - minor UI usability issues
Closed, ResolvedPublic

Description

(1) The number of pageviews is cut off to accommodate the name of the task "Add an image to an article section".

It's important to display the task title fully to differentiate it from "Add an image to an unillustrated article":

Screen Shot 2023-06-06 at 11.39.56 AM.png (616×1 px, 115 KB)

Mobile doesn't show pageviews.

Solution:
As detailed in the design specs, post-edit dialogs shouldn't be showing the pageview count due to space constraints (neither on mobile nor desktop).

Frame.png (766×1 px, 101 KB)

Acceptance Criteria:

Given I've completed an edit,
When I'm shown a "Edit another suggestion" post-edit dialog,
Then the pageview count is NOT displayed, and the task title is fully visible


These issues are fixed as part of other tasks:

(2) "Add an image..." dialog for add section level image has "Used in the same article in 0 other languages" - should this message be modified or removed?

NOTE: This should be fixed in T337803.

Screen Shot 2023-06-05 at 5.54.30 PM.png (1×728 px, 371 KB)

(3) The images in the add section level intro tour overlap pagination, and the contrast ratio is low:

Add Section level imageAdd image to unillustrated article
Screen Shot 2023-06-06 at 12.31.42 PM.png (1×1 px, 252 KB)
Screen Shot 2023-06-06 at 12.32.01 PM.png (1×1 px, 229 KB)
Screen Shot 2023-06-06 at 1.02.08 PM.png (1×1 px, 229 KB)
Screen Shot 2023-06-08 at 12.40.19 PM.png (1×1 px, 217 KB)

(4) A page with section level image suggestion doesn't scroll to the image placeholder.
Steps:

  • click on a section level image suggested article
  • if a suggested section level image is outside viewport (not on a screen), the page won't automatically scroll to the image placeholder, e.g.
a user sees a suggested image, but doesn't see where the img may be placeda user needs to scroll down to see the placeholder
Screen Shot 2023-06-08 at 12.27.43 PM.png (1×728 px, 688 KB)
Screen Shot 2023-06-08 at 12.54.24 PM.png (1×2 px, 679 KB)
Screen Shot 2023-06-08 at 12.28.00 PM.png (1×706 px, 264 KB)
Screen Shot 2023-06-08 at 12.54.39 PM.png (1×2 px, 1 MB)

Note:

  • users might not realize that they need to scroll down to see the section to which a suggested image belongs
  • it's not an issue when an article is short or when a suggested image belongs to one of the top sections

Screen Shot 2023-06-08 at 1.09.42 PM.png (1×2 px, 697 KB)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

(2) "Add an image..." dialog for add section level image has "Used in the same article in 0 other languages" - should this message be modified or removed?

This is probably part of T337803: Section-Level Images: details dialog copy for suggestion "kind" values.

(3) Due to scaling up, the images in the introduction tour overlap with pagination, and the contrast ratio is low:

By scaling up you mean changing the font size / zoom, right? I assume this isn't specific to section images.

Etonkovidova renamed this task from [QA task] Section-level image - Accessibility check to Section-level image - UI usability issues.Jun 7 2023, 10:26 PM
Etonkovidova updated the task description. (Show Details)
Etonkovidova renamed this task from Section-level image - UI usability issues to Section-level image - minor UI usability issues.Jun 8 2023, 1:15 AM

(3) Due to scaling up, the images in the introduction tour overlap with pagination, and the contrast ratio is low:

By scaling up you mean changing the font size / zoom, right? I assume this isn't specific to section images.

Thanks, @Tgr! Yes, I meant that the image for the section level image intro tour is bigger than on the add image intro ("zoomed in"). The issue is specific to the section level image intro. Sorry, in the issue description there was an incorrect image for the step 4; I've update the task with the correct image.

(1) The number of pageviews is cut off to accommodate the name of the task "Add an image to an article section". It's important to display the task title fully to differentiate it from "Add an image to an unillustrated article":

@JFernandez-WMF
I think the first issue might need your input before it's actionable. Should we consider placing the page count and task title on different lines?

(3) The images in the add section level intro tour overlap pagination, and the contrast ratio is low

I think we are addressing the overlap in a different task, and given the fact that we plan to replace this with the new Vue onboarding component in the future, perhaps the contrast issue is OK for now.
https://phabricator.wikimedia.org/T332925#8870881

(4) A page with section level image suggestion doesn't scroll to the image placeholder.

This is part of T337767: Section-level images: task submission, we haven't touched scrolling behavior yet.

Should we consider placing the page count and task title on different lines?

The earliest version of the task card pushed the count up to a separate line if it wouldn't fit otherwise. There was some discussion on that starting at T255825#6257833.
(We also have a standalone task for this: T333506: [minor] Post-edit card-pageviews doesn't display text fully)

(1) The number of pageviews is cut off to accommodate the name of the task "Add an image to an article section". It's important to display the task title fully to differentiate it from "Add an image to an unillustrated article":
(...)
Mobile doesn't show pageviews.

If mobile doesn't show pageviews (hence assuming this wouldn't be an issue on mobile), I'm wondering if we can show the pageviews count with a tooltip on hover for desktop?

If mobile doesn't show pageviews (hence assuming this wouldn't be an issue on mobile), I'm wondering if we can show the pageviews count with a tooltip on hover for desktop?

We can, but it's not very obvious there is something hoverable there. I assume it depends on screen size and such, but this is how it looks to me:

Screenshot Capture - 2023-06-13 - 09-39-13.png (273×494 px, 26 KB)

(You can test by starting a suggested edit task, exiting via Esc > Discard edits, and then running ge.suggestedEditSession.showPostEditDialog({}) in the browser's JS console.)

(4) A page with section level image suggestion doesn't scroll to the image placeholder.

This was part of T335209: Section-level images: suggestions mode (which is not finished, but this part is done). So should be fixed on beta since Monday evening.
The scrolling is a bit fragile and probably something to improve later (there is some kind of race condition that makes it not happen occasionally) but seems to work most of the time.

We can, but it's not very obvious there is something hoverable there. I assume it depends on screen size and such, but this is how it looks to me:

Screenshot Capture - 2023-06-13 - 09-39-13.png (273×494 px, 26 KB)

(You can test by starting a suggested edit task, exiting via Esc > Discard edits, and then running ge.suggestedEditSession.showPostEditDialog({}) in the browser's JS console.)

Thanks Gergő! That makes sense - and just tested and it also cuts off for me. I am open to having it on a separate line, but would like to hear Rita's thoughts since it looks like she has discussed this previously. @KStoller-WMF, do you think this is a release blocker, or can we hold until next week?

I think we should follow up with an improvement soon, but I don't see this as a release-blocking issue.

Chatted with Rita about this on Tue, and per the specs, post-edit dialogs shouldn't be showing the pageview count due to space constraints (neither on mobile nor desktop).

Frame.png (766×1 px, 101 KB)

I updated the task description to make it clear that all of these issues are fixed as part of other tasks, except for the first issue (about pageviews displaying in the post-edit dialog).

@KMorgan-WMF Just FYI, please let me know if you have any questions.

Filed as T340576: Remove pageviews from newcomer tasks desktop post-edit dialog so we have a more recognisable task name. We can close this as everything is tracked in a dedicated task now.