Tasks

Sprint #1 - July 22 - August 2, Create Minimum Testable Version (MTV)

• T370221: [S] Add feature flag and toggle into Developer settings for alt text experiment
• T370224: [S] Bypass edit count logic in existing explore feed card logic for target wikis
• T370228: [M] Update ABTestsController, Assign groups for alt text experiment
• T370229: [S] Trigger Alt-Text task from Image Recommendations (flow B) and create Modal
• T370231: [L] Adapt article view for the Alt Text task - Flow B
• T370232: [S] Create modal sheet, next button and text field for Alt text MTV - flow B
• T370236: [M] Publish Wikitext for Alt Text experiment - Flow B
• T371412: [S] Add ability to send analytics events to wmflabs

Sprint #2 - August 5 - August 16

• T371428: [M] Add instrumentation for Sprint 1 tasks
• Add translations for sprint 1 tasks T370725
• T370305: [M] Trigger Alt-Text task from Edit (flow C)
• T372098: [S] Add developer setting to always show Alt Text Modal

• T370359: [L] Add Review step for Alt text experiment and update publish
• T370327: [L] Modal sheet: Add image and link button, bottom copy/warning and counter, guidance button
• T371983: [S] [BUG] App does not deep link to article from terminated state
• T372008: [XS] Add caption to action data (Edit to sprint 1 instrumentation)

Sprint #3 -August 19 - August 30

• T370315: [S] Create Onboarding for Alt text experiment
• T370330: [S] Add guidance (adapted onboarding) for Alt text experiment
• T370332: [S] Open commons web page for Alt text experiment
• T370338: [S] Open image in gallery view (from modal sheet)
• T370360: [S] Display feedback survey alerts (Yes/No, satisfaction survey) for Alt text experiment
• T370308: [M] Create Survey for "Do not add" option, posting the answer to Metrics
• T371908: QA tasks for flow C
• T370362: [S] Remove feature flag in developer settings (Launch experiment) (Launch Experiment)

Nice-to-have

• Check over instrumentation for flow B and flow C: T369876: [XL] Create Measurement Plan and Instrument Alt Text Experiment iOS
• Check over translations for flow B and flow C: T370725: [XL] Add interface translations - Alt text experiment
• T370364: [S] Tooltips for Alt text experiment
• T370367: [S] Add overflow menu and actions for alt text experiment

Uncategorized

• T372439: Pull full wikitext for section edits (flow C)

Background

This task is for the designs of our alt-text scaled experiment on iOS.

Design Tasks

• @OTichonova Create a Figma file
• Alex update designs based on user testing recommendations and get final sign off from Product before adding screens
• HN update task with screens that show what happens when users interact with actions that align with the requirements below.
• Engineer - review screens and add any questions or possible constraints to consider on the task
• RS create translations request for interface to be translated into es, pt, zh (simplified and traditional), and fr

Requirements

Must haves

• Entry point will vary based on experiment group (see below)
• If a user answers "no" to "Add alt text" prompt, gain reason for why
• Prominent guidance for writing good alt-text (onboarding)
• Users ability to get context about the image from the article
• Users ability to access relevant metadata (can take user to Web)
• Detection of which images do not have alt-text
• Ability to publish alt-text
• Alt-text edit should count as a separate edit ONLY when submitted separately
• Alt text is published with automatic edit summary
• Users should be prompted provide feedback about the feature
• Instrumentation that allows us to evaluate the alt-text submitted
• Input field for alt-text in context of image, preview of alt-text in context of our existing editor
• Warning when alt-text exceeds 125 characters
• Entry field should not allow users to add line breaks

Nice to have

• Prefilled email option from overflow menu "Problem with Feature"
• Tooltip tutorial guidance for alt text interface
• Allow users to pinch and zoom on the image thumbnail (in half sheet)
• Do not allow users to copy and paste in image caption

Experiment B Must Haves

Experiment Group B (50% of Image Recs Suggested Edits user): Dedicated flow for Captions and Alt Text AFTER Image Recs

• Updates to Image recs
  • 50+ edit requirement is removed for target languages only, for duration of experiment
  • Additional instrumentation is added to collect alt text & context
• Entry point:
  • After image recommendations edit is submitted; if alt-text = null:
  • Educate user on importance of alt-text and ask if they’d be willing to add alt-text to image
  • If user selects yes; launch alt-text adding flow for most recently added image
  • If users selects No, gain reason
• After task completion:
  • Show a survey when to ask users if it should be a separate task
    • Would you use a feature that provided a feed of images in need of alt text? (Y/N, if no allow for text reason)
  • Return users to next image recommendations suggestion

Experiment C Must Haves

Experiment Group C: 50% of all editors receive encouragement to add alt-text to an image when editing an article with an image

• Entry point:
  • After edit where:
    • An edit was made to any part of the article, and there is an image in the article that is lacking alt text
  • Show prompt that an image in the article is in need of alt-text and explain importance of adding alt-text and ask users if they’re willing to add alt-text
  • If users selects Yes, launch alt-text adding flow for one image in article in need of alt text
  • If users selects No, gain reason

• After task completion
  • Ask satisfaction
  • Ask if they are interested in similar in-time edit suggestions: Would you like to be notified about suggested edits on articles after you edit them? (Y/N, if no allow for text reason)
  • Bring user back to article they were reading

User stories
Primarily

• As a Spanish Wikipedia editor in LATAM using the Add an Image feature for the first time on the Wikipedia iOS app, I would like to build confidence to add alt-text while on the bus, so that I can add alt-text to future image related tasks without concern of making the state of alt-text worse on Wikipedia for low vision users.
• As a Portuguese Wikipedia editor in Brazil, I would like to become aware of opportunities to add alt-text to images in articles I care about, so that I can ensure all editors are able to gain the full context of those articles

Secondarily

• As a user with limited data, I want to read alt-text, so even if images are not loaded, I am aware of what is in the image
• As a user navigating articles with a screen reader, I want quality alt-text to be available , so that I have the same additional context about an article as users that are not using screen readers

Designs : Figma

Flow B

Existing Image Recs steps:

Alt text task: "Do not add"

Alt text task: "Add"

Flow C

Existing Editing steps:

Alt text task: "Do not add"

Alt text task: "Add"

1-6: Existing image recommendations screens for reference
7. Modal to add alt text

• Modal is shown if user has not added alt text in the previous image recommendation edit, and if user has been sorted into the experiment group C
• "Add" > user enters the task with screen 10
• "Do not add" > user sees Reason screen 8
• Close-X > user sees Reason screen 8
• User should remain in the experiment group C even if they close or select "Do not add"

8. Do not add reason

• People may select multiple options
• Submitting a reason is not required
• Tapping cancel brings you back to the next image recommendation (or article view for C) with no Alt text modal, and no toast.
• Trying to type a reason automatically selects this option. Deleting text unselects this field

9. Feedback submitted and next recommendation

• Shows if someone has submitted a reason thorough #8
• Shows after someone has submitted feedback through the survey #24

10. Onboarding

• Scrollbar should flash on first load if there is content off-screen
• "Continue" leads to the Alt Text half sheet screen 11
• "View Examples" links should lead to the language-appropriate version of the Media-wiki page
  • pt: https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_Suggested_edits/pt-br#Exemplos_de_texto_alternativo
  • es: https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_Suggested_edits/es#Ejemplos_de_texto_alternativo
  • zh: https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_Suggested_edits/zh#%E6%9B%BF%E4%BB%A3%E6%96%87%E6%9C%AC%E7%AF%84%E4%BE%8B
  • fr: https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_Suggested_edits/fr#Exemples_de_texte_alternatif
  • Copy:
    • How to write alt text for images
    • 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.
    • Type of image
      • Do not start with ‘This is an image of…’ but describe the medium or style, if relevant

11. Add alt text sheet

• The "Back" caret leads back to image recommendations, showing the next recommendation
• Behind the half sheet is article view
• On load, the article view is automatically scrolled to the image's location in the article, so the user can review the image in the context of the article and its caption
• Tapping on the image from the article view opens it in Media Viewer (19)
• Within the halfsheet, tapping on the image thumbnail opens it in Media Viewer (19)
• Tapping on the image filename opens the image's commons page (16)
• "Next" is not active until user has added input into "Describe the image"
• "Describe the image" input box has a fixed height and does not allow line breaks
• Character counter below the input box starts at 0/125 and automatically updates as user types text
• "Guidance for writing alt text" leads to a modified version of the onboarding screen, 17

12. Tooltip 1

• "Review" tooltip points to the image within the article
• Screen behind tooltips does not need to be interactive (similar to Image recs)

13. Tooltip 2

• "Inspect" tooltip points to Image's filename

14. Tooltip 3

• "Add description" tooltip points to input box for alt text
• "Done" closes tooltip

15. Overflow menu with three options

• "Learn more" leads to the Alt Text section of the Suggested Edits FAQ page: https://www.mediawiki.org/wiki/Wikimedia_Apps/iOS_Suggested_edits#Add_Alt_Text
• "Tutorial" relaunches the 3 tooltips
• "Problem with feature" will take editor to the support email and pre-populate with the information at the bottom of this task

16. Image information

• Same view of image's metadata on Commons as used in Image Recommendations
• "Back" leads back to the alt text half sheet, and any text that has already been entered is retained

17. Guidance for writing alt text

• Exactly the same as onboarding #10 except that the primary button is "Done".
• Choosing "Done" brings the user back to the state they were in before clicking "Guidance for writing alt text" and any text that has been already written is retained

18. Minimized sheet

• User can drag the halfsheet down, and interact with the article.
• If they open any links from the article, they should be able to navigate back to the Alt text task

19. Tapping on image from article or thumbnail

• Reuse standard image preview screen
• Supports pinch and zoom

20. Alt text input focused

• Clicking into the input box opens the keyboard with "Done" instead of "return", as we do not want to allow linebreaks.
• Input box has fixed height and does not expand in size as a user types. If the text exceeds the space, the user should be able to scroll within it

21. Warning message for exceeding 125 characters

• Show warning message in standard format if what the user has typed exceeds 125 characters.
• "Next" is still active, and users can still publish with over 125 characters

22. Review and Publish

• "Back" brings them back to the active input box, and text already typed is retained
• Alt text entered and image caption (if available) are shown for user to review
• CC License information is included at the bottom of the page (ok if user needs to scroll to view)
• "Publish" publishes the alt text with an automatic edit summary "Added alt text"

23. Edit confirmation toast

• Standard "Edit published' toast
• Next image recommendation

24. Flow B Survey

• Survey copy
  • We need your feedback
  • Would you use a feature that provided a feed of images in need of alt text?
  • Yes
  • No
• Feedback confirmation toast #9 is shown after submitting

25. Publish confirmation from article edit (existing screen)

• User has submitted an eligible edit, and is seeing their publish confirmation toast

26. Modal to add alt text

• Note: copy is different from modal from Flow B
• Modal is shown after user has completed an eligible edit, and if they are sorted into the experiment group C
  • "Add" > user enters the task with screen 10
  • "Do not add" > user sees Reason screen 8
  • Close-X > user sees Reason screen 8
  • User should remain in the experiment group C even if they close or select "Do not add"

27. Feedback submitted toast and article view

• Feedback submitted toast shown on article view if they have submitted a reason.

28. Add alt text sheet

• "Back" cared leads back to the article view
• Image shown in half sheet is the image in need of alt text from the article
• Article view behind half sheet is scrolled to the image in need of alt text within the context of the article

29. Flow C Survey 1

• Shown to all users after publishing an edit
• Copy:
  • Help improve the feature
  • Are you satisfied with this feature?
  • Satisfied
  • Neutral
  • Unsatisfied
• Submitting either reason leads to article view, with a feedback submitted toast (27), and then immediately Survey 2

30. Flow C Survey 2

• Shown to all users after survey 1, regardless of answer to survey 1
• Copy:
  • We need your feedback
  • Would you be interested in receiving similar notifications about suggested edits on articles after you edit them?
  • Yes
  • No
• Submitting either reason leads to article view, with a feedback submitted toast (27)

Copy & Translations

• Translations document:

---

"Problem with feature" support email copy
Subject: Issue Report - Alt Text Feature
Body:
I've encountered a problem with the Alt Text feature:

• [Describe specific problem]

The behavior I would like to see is:

• [Describe proposed solution]

[Screenshots or Links]

---