Page MenuHomePhabricator

[L] Adapt article view for the Alt Text task - Flow B
Closed, ResolvedPublic

Assigned To
None
Authored By
HNordeenWMF
Jul 16 2024, 11:13 PM
Referenced Files
Restricted File
Aug 6 2024, 12:15 PM
F57114745: IMG_7527.PNG
Aug 6 2024, 11:51 AM
F57114269: 13AF3309-3F56-4EA8-AE3A-68A4D78A34FE_1_102_o.jpeg
Aug 6 2024, 11:51 AM
F57113945: IMG_7526 2.PNG
Aug 6 2024, 11:51 AM
F56773979: Screenshot 2024-07-29 at 5.07.46 PM
Jul 29 2024, 10:11 PM
F56470117: image.png
Jul 16 2024, 11:13 PM
F56470127: image.png
Jul 16 2024, 11:13 PM

Description

Background

When writing alt text, it's important that the user can review the image in the context of the article and its caption. To allow this, we would like to show the user the article view automatically scrolled to the location of the relevant image.

Requirements
  • Article view should be scrolled to the image's location
  • Tapping on images from article view should open them in media viewer
  • The "Back" caret should allow user to navigate back to their previous screen before they entered the Alt Text task
    • For B: back to Add an image, showing the next recommendation
  • View should be locked to Portrait-mode

Nice to have: minimize distractions, and ways folks could navigate away from Alt Text task

  • Remove or disable the edit buttons on Article view
  • Disable links on Article view
  • Hide footer (About this article and Read more)
Design:

Figma

image.png (667×375 px, 177 KB)
image.png (667×375 px, 186 KB)
Engineering notes:

Event Timeline

Tsevener renamed this task from Adapt article view for the Alt Text task to [L] Adapt article view for the Alt Text task.Jul 18 2024, 5:33 PM

Part 1 ^

There will be more PRs to come for this one.

@HNordeenWMF it's pretty easy to hide the footer on article as well (About this article, Read more). Would you like me to do this, to limit paths away from the alt text context? Here's a screenshot of what I have so far:

Screenshot 2024-07-29 at 5.07.46 PM (2×1 px, 923 KB)

@Tsevener if it's not any additional work, then sure that would be great to hide the footer! I just updated the task with that as a nice-to-have

Note most of this work is done, but it won't be testable from Experiment C until https://phabricator.wikimedia.org/T370305 is done.

HNordeenWMF raised the priority of this task from Low to Medium.Aug 1 2024, 3:45 PM
Mazevedo renamed this task from [L] Adapt article view for the Alt Text task to [L] Adapt article view for the Alt Text task - Flow B.Aug 5 2024, 3:45 PM
Mazevedo updated the task description. (Show Details)
Mazevedo removed a subscriber: Jarrod_Baniqued.

Great work so far @Mazevedo 👏 Some notes:

1) Can the preview scroll to the image that has just been added?

https://share.icloud.com/photos/0c39vg8GJKAyBzmDzYnCJubmQ

2) Is it possible to expand this sheet on tap? Currently, only a "hold and drag up" gesture expands the panel

IMG_7526 2.PNG (2×1 px, 773 KB)

3) After adding alt text to this image:

13AF3309-3F56-4EA8-AE3A-68A4D78A34FE_1_102_o.jpeg (2×1 px, 416 KB)

I get this (see annotations in the screenshot):

IMG_7527.PNG (2×1 px, 246 KB)

The publishing might need some tweaks. Here’s a video as well:

https://share.icloud.com/photos/0868AeSbLVA2RgcCrFXMfAtiA

The empty sheet is also present when tapping back (to go to the Explore feed):

{F57119803}

4) If the header image is the same as the destination image, can we hide it? It’s a bit confusing to see the image first, then scroll to the same image further down in the article:

https://share.icloud.com/photos/04drM2fN-wX9u7XgfxqGhIfYQ

Thanks @scblr! #3 is a major bug that I'll work on now, that was a difference in physical device vs. simulator that I missed 😑. We won't work on the other ones (at least not right away) unless @HNordeenWMF disagrees. Can you create a separate task for them so that we don't lose track of them?

I agree with that prioritization @Tsevener!

#1 is an improvement the core image recommendations flow, which is outside of the scope of this work. It can be filed as an improvement for Image recs V2: T364157
#2 The ability to minimize is new, and not present in Image recs yet. The prototype used in user testing had hold & drag behavior: T360567. Only 1/10 minimized the half sheet and did not know to slide it back up to view the image again. Adding the tap seems like a nice-to-have improvement, @scblr could you please file a task for this & attach to T371333? We can reassess in Sprint 3 and see if we're able to incorporate this.
#4 We could discuss if it became a permanent task, I do think there is value in knowing that the image you added has become the header image in the App

Thanks @scblr! #3 is a major bug that I'll work on now, that was a difference in physical device vs. simulator that I missed 😑. We won't work on the other ones (at least not right away) unless @HNordeenWMF disagrees. Can you create a separate task for them so that we don't lose track of them?

Sounds good, thanks Toni! 👍

I agree with that prioritization @Tsevener!

#1 is an improvement the core image recommendations flow, which is outside of the scope of this work. It can be filed as an improvement for Image recs V2: T364157

Done: T372032

#2 The ability to minimize is new, and not present in Image recs yet. The prototype used in user testing had hold & drag behavior: T360567. Only 1/10 minimized the half sheet and did not know to slide it back up to view the image again. Adding the tap seems like a nice-to-have improvement, @scblr could you please file a task for this & attach to T371333?

Done: T372033

#4 We could discuss if it became a permanent task, I do think there is value in knowing that the image you added has become the header image in the App

Ok, I left a note in T364157

I noticed this in testing & it affects a few articles since a lot of times these are Stubs that come up for "Add an image"

  • Add an image to a stub article
  • Enter Add Alt text flow
  • Try to scroll down to view image

What happens:

Expected behavior

  • Scrolling to view entire image works initially

Update from sync: @HNordeenWMF will make https://phabricator.wikimedia.org/T370231#10053106 a separate bug task. I made some progress on it in branch T370231-3. It is reproducible when posting an edit to production (so when there is an actual image to scroll to). I think it is related to lazy loading of the image.