Page MenuHomePhabricator

Add an image: captions onboarding tooltip (desktop)
Open, HighPublic

Description

Corresponding task from mobile: T292887: Add an image: captions onboarding dialog


On mobile, users see a dialog with onboarding content for the caption step. On desktop, we will use the same content and similar interactions, but instead of putting it in a dialog, it should be a GuidedTour tooltip.

As soon as is possible once the caption container is present, an onboarding tooltip should appear. This should appear even as the image preview loads and the image inspector animates away, if possible.

  • Tooltip should display once per session every time the user comes to this step until they select the Don't show again checkbox. If they arrive at the caption step, then go "back", and then return to the caption step, the dialog should not appear a second time that session. Ideally, the "don't show again" should also apply to this same onboarding on mobile and vice versa. But if that's not trivial because they are different components (dialog vs. GuidedTour), then it is okay for the user to the onboarding again when they first use the other platform.
  • Tooltip should be pointing to the edge of the caption field where the user will be typing.
  • Don't show again checkbox is at the bottom of the tooltip. After the user selects, they should not see this dialog when they arrive at the caption step in the future.
  • A single button at the bottom dismisses the tooltip. The button should have a blue checkmark.
  • The tooltip should also have an "X" to dismiss it in the corner.
  • This tooltip also appears when the user taps the "?" icon while doing the task. In this case, the "Don't show this again" checkbox is not present.

Mockup as of 2021-12-21:

image.png (1×2 px, 1 MB)

Figma: https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=4032%3A66044