After the user selects "Yes" on the image inspector (T290045), they are taken to the caption step. This is a WYSIWYG "in context" experience.
==== Note: Final copy updated below - see relevant tab for corresponding QQQ in the copy spreadsheet: ====
- Animation on arrival
- While the image is loading, the user should see a gray placeholder for the image at the top of the article.
- The header should have a spinner and say, Loading image preview...
- Once loaded, the header text shown is Add a caption with a back arrow that returns to the image inspector step.
- Ideally, the gray placeholder should be the same size and shape of the incoming image, but we want to inherit whatever Visual Editor does by default if possible.
- At this time, the image inspector also animates down and away.
- The focus should be such that the caption box is about a third of the way down the screen. The user should be able to see the bottom of the image preview, the caption box, and the top of the article.
- We want this animation to take about a half second.
- Onboarding
- When the animation on arrival is complete, the onboarding dialog appears.
- See T292887: Add an image: captions onboarding dialog
- The device keyboard should not be open during onboarding.
- Caption adding experience
- Nice to have: after the user dismisses the onboarding (or if they don't get onboarding), the focus should be in the caption box with the device keyboard open.
- The article text should be shown at Base20 color here instead of black.
- The image preview should be at the top of the article.
- On the bottom of the image preview is a row of gray overlay, which on the righthand side says, View image details with an "i" icon. Tapping anywhere on this row opens the image details dialog. See T290782: Add an image: image details.
- Below the image preview is the caption box.
- It contains hint text: Write a short caption describing how this image is relevant to “$PageTitle”.. The actual name of the article should be substituted in. The hint text should be in the UI language, not the content language, but the article title will be in the content language.
- In the lower right, it contains a question mark icon, which brings up the onboarding dialog in T292887. There is an invisible label to Help with writing an image caption on this icon. When brought up from this interaction, the Don't show again checkbox should not be present in the caption help dialog.
- As the user writes their captions, the caption area grows dynamically if the user writes a lot of text (as opposed to being a scrollable area).
- Caption validation
- We will not include caption validation in the first iteration. It is tasked separately here: T292888: Add an image: caption validation (PLACEHOLDER)
- Until the user puts text in the caption box, the Publish button in the upper right is not active.
- Once they have some text, the button turns blue and they are able to tap it. It takes them to the edit summary screen: T290784: Add an image: edit summary and publish.
- If the user taps the back arrow in the header, they should return to the image inspector step without their selection chosen. In other words, it should look exactly as it did when they first arrived on the image inspector at the start of the task.
Mockup as of 2021-10-08:
Figma: https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=3043:10770
