Page MenuHomePhabricator

[Task] Create form for alt-text suggestion for iOS suggested edits
Closed, ResolvedPublic

Assigned To
Authored By
Seddon
Oct 17 2023, 3:48 PM
Referenced Files
F41196953: IMG_E39F93841B9E-1.jpeg
Oct 30 2023, 11:27 AM
F41196945: IMG_0A5FE5DE0055-1.jpeg
Oct 30 2023, 11:27 AM
F40487533: IMG_76539301C47B-1 copy.jpeg
Oct 27 2023, 1:14 PM
F40487014: IMG_3FC2C5EDA795-1 copy.jpeg
Oct 27 2023, 1:14 PM
F40489485: IMG_76539301C47B-1 copy 3.jpeg
Oct 27 2023, 1:14 PM
F40487841: IMG_3FC2C5EDA795-1 copy 2.jpeg
Oct 27 2023, 1:14 PM
F40492277: image.png
Oct 27 2023, 1:14 PM
F40491655: IMG_92A99D8F52BB-1.jpeg
Oct 27 2023, 1:14 PM

Description

Goal:
After selecting a new form for alt-text suggested edit, the user is presented with a form for them to provide the copy for the alt-text for the associated image in a full screen modal.

Requirements:

  • Displays the image the text is being suggested for
  • Provides guidance text to the end user
  • Input field where the user can enter alt-text. Should wrap to multiple lines if possible.
  • Close button dismisses modal
  • Disable Next button if textfield has no data.
  • Link to examples (kick out to Safari app of the FAQ page on MediaWiki )
  • Next button takes user to T349150
  • Update onboarding copy
  • Update form guidance copy

Design (Figma)

image.png (1×786 px, 155 KB)
image.png (1×786 px, 222 KB)

Event Timeline

Dmantena updated the task description. (Show Details)
Dmantena updated the task description. (Show Details)

Thanks, @Dmantena – this looks great so far! 👏

I’m reviewing the entire feature in this task for efficiency; I hope that is fine.


Notes for @Dmantena:

1) Reduce height of this UI element to 44dp, see designs.

IMG_8F1908E065D6-1.jpeg (2×1 px, 401 KB)

2) The button size seems too big compared to e.g. the onboarding screens. Even though we’ll be working on buttons, could you align its height for now? (likely 44dp)

IMG_581E71DB211D-1.jpeg (2×1 px, 419 KB)
IMG_3FC2C5EDA795-1 copy 2.jpeg (2×1 px, 590 KB)

3) Update with the latest copy from designs

IMG_EBC7C2DF2986-1.jpeg (2×1 px, 429 KB)

Please help us refine the “Suggested Edits” feature!

We're excited to introduce our new "Suggested Edits" feature. We'd love to hear from you as it's still in the testing phase. Your insights and suggestions will be invaluable in helping us refine and enhance this feature. Thanks!

4) Can the learn more link retrigger the onboarding modal? I think that’d be better.

IMG_98B71EDBE113-1 copy.jpeg (2×1 px, 401 KB)
image.png (1×786 px, 115 KB)

5) Can we increase the tap target size for the Read full article → link to at least 44dp?

Settings.jpeg (2×1 px, 342 KB)

6) Can we make this item tappable and also link to the Commons File page?

IMG_76539301C47B-1 copy 2.jpeg (2×1 px, 231 KB)
IMG_57D31DEE4C82-1.jpeg (2×1 px, 1 MB)

7) Alignment of labels seems off currently. Especially the "Describe this image" placeholder is too far away from the input line. For comparison, left (from Image Upload) and right (from Suggested edits):

Group 1.png (972×786 px, 133 KB)

8) Line height of the disclaimer text seems off; please update according to designs (SF Pro Regular, font-size: 13, line-height: 18).

IMG_92A99D8F52BB-1.jpeg (2×1 px, 480 KB)
image.png (1×786 px, 350 KB)
ImplementationvsDesign

Todos

Necessary steps to finalize the work on the Suggested edits prototype:

  • @JTannerWMF Update onboarding screen copy per external input:

IMG_3FC2C5EDA795-1 copy 2.jpeg (2×1 px, 276 KB)

  • @JTannerWMF Update this summarized copy based on onboarding screen changes:

IMG_76539301C47B-1 copy 3.jpeg (2×1 px, 230 KB)

IMG_3FC2C5EDA795-1 copy.jpeg (2×1 px, 255 KB)

IMG_76539301C47B-1 copy.jpeg (2×1 px, 226 KB)

Notes for @Dmantena:

1) Reduce height of this UI element to 44dp, see designs.
2) The button size seems too big compared to e.g. the onboarding screens. Even though we’ll be working on buttons, could you align its height for now? (likely 44dp)
3) Update with the latest copy from designs
4) Can the learn more link retrigger the onboarding modal? I think that’d be better.
5) Can we increase the tap target size for the Read full article → link to at least 44dp?
6) Can we make this item tappable and also link to the Commons File page?
7) Alignment of labels seems off currently. Especially the "Describe this image" placeholder is too far away from the input line. For comparison, left (from Image Upload) and right (from Suggested edits):
8) Line height of the disclaimer text seems off; please update according to designs (SF Pro Regular, font-size: 13, line-height: 18).

@scblr All of these are addressed in the forthcoming Experimental build!

The slight exception is #7 in the list. The text too far away from the divider comes from usage of the existing Textfield view we had (which was used in the Vanish view). I understand the design intention and I've hacked together something that gets the text closer to the line, but it's still not perfect. There's not a native multiline text input field in SwiftUI with a placeholder that supports what we precisely want. But take a look and see if it's better for you.

Thanks, @Dmantena – great updates! 🥰 A few minor comments:

1)

The slight exception is #7 in the list. The text too far away from the divider comes from usage of the existing Textfield view we had (which was used in the Vanish view). I understand the design intention and I've hacked together something that gets the text closer to the line, but it's still not perfect. There's not a native multiline text input field in SwiftUI with a placeholder that supports what we precisely want. But take a look and see if it's better for you.

It looks good to me; thx for the tweaks!

2) Can you make the entire top area tapable instead of just the file name? I picture users tapping the image itself again if they want to see it again.

IMG_0A5FE5DE0055-1.jpeg (2×1 px, 220 KB)

3) Add these links to the disclaimer copy:

IMG_E39F93841B9E-1.jpeg (2×1 px, 447 KB)

Testable beginning in the Wikipedia Experimental TestFlight version 7.4.3 (build 51).

Update onboarding screen copy per external input:

Copy:
Keep it short and clear
1-2 lines of plain text with no acronyms, abbreviations, or jargon

Describe what can be seen
Don’t add your own research, interpretation, or point of view

Focus on what is relevant to the article
But don’t repeat text that is already in the caption

Transcribe words and graphics
Write out any words, in quotation marks, and summarize the main idea of maps, diagrams, and charts

Take care with people
Only identify public figures and make sure any description is relevant, apparent, and verifiable

  • TODO: @scblr provide updated design for this screen

Update this summarized copy based on onboarding screen changes:

Guidance for writing alt text

  1. Keep it short and clear
  2. Only describe what can be seen in the image
  3. Focus on what is relevant to the article
  4. Include words and other information from the image
  5. Take care when identifying or describing people

Create a "Suggested edits" section on the iOS FAQ Page for this link:

https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_Suggested_edits

Create "View examples" section within "Suggested edits" on the iOS FAQ Page for this link:

https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_Suggested_edits#Alt_Text_Examples

New to do: get translation for Spanish and Portuguese

TODO: @scblr provide updated design for this screen

I updated the designs @Dmantena @JTannerWMF

New to do: get translation for Spanish and Portuguese

I kicked off getting translations for these two screens as well (Gsheet). I’ll update this task once received 👍

Dmantena added a subscriber: ABorbaWMF.

Updated links, updated onboarding items and translations, and updated form guidance text and translations are now wrapped. I believe I've addressed everything in this task now, but take a look!

@ABorbaWMF These updates should be visible and testable in the new Wikipedia Experimental version 7.4.3 (55) build in TestFlight! The per language string changes are located here: https://docs.google.com/spreadsheets/d/1imA-oYfskN2KkmmslHu_kbIPBMC3Fxjq5sJegi8YJgo/edit#gid=0

JTannerWMF raised the priority of this task from Medium to High.

The Learn more on the onboarding modal should point to https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_Suggested_edits

Apologies for the mix-up – this link should now be available from the modal starting with Wikipedia Experimental version 7.4.3 build 56.

JTannerWMF claimed this task.