Page MenuHomePhabricator

Section Translation Editor: Quick tutorial
Open, MediumPublic

Assigned To
None
Authored By
Pginer-WMF
Apr 22 2020, 9:59 AM
Referenced Files
F31933261: Quick tutorial - Details.png
Jul 13 2020, 6:44 AM
F31776708: illustration-mt.svg
Apr 23 2020, 10:32 AM
F31776711: illustration-sections.svg
Apr 23 2020, 10:32 AM
F31771586: Quick tutorial - Navigation.png
Apr 22 2020, 9:59 AM
F31771592: Quick tutorial - Transitions.png
Apr 22 2020, 9:59 AM
F31771588: Quick tutorial - Details.png
Apr 22 2020, 9:59 AM
F31771609: Quick tutorial - Dimensions.png
Apr 22 2020, 9:59 AM
F31771584: Quick tutorial - Overview.png
Apr 22 2020, 9:59 AM

Description

As part of the Mobile editor for Section translation (T243495), a quick tutorial is shown the first time users access the mobile editor.

View this step in prototype for a general overview.

General concept

A two-step tutorial is shown the first time the user access the mobile editor. The purpose is to communicate two main concepts to the user about the process of translation: improving the initial MT and working section-by-section. Communicating each idea visually and with short and to-the-point messages.

OverviewNavigation
Quick tutorial - Overview.png (768×1 px, 69 KB)
Quick tutorial - Navigation.png (768×1 px, 95 KB)

Considerations:

  • The quick tutorial will be shown the first time the user access the translation editor. Once it is completed it won't be shown again. Global preferences may be used to make sure that the tutorial is not shown multiple times for users that translate to different wikis.
    • We may want to support a way to access the tutorial again for testing purposes (through url parameter, documenting the instructions to reset this property, or some other mechanism)

Tutorial step

Both steps of the quick tutorial have a similar structure.

Quick tutorial - Details.png (768×1 px, 163 KB)
Quick tutorial - Dimensions.png (768×1 px, 92 KB)

Step one

Messages:

Translating a new section is easy, quick and fun!

For each sentence, you’ll get a initial automatic translation for you to review and improve.

Illustration:

Step two

Messages:

Expand the knowledge one section at a time.

Publish when you are ready. Your translation will be added to the page, and you can pick another section next!

[ Start translating ]

Illustration:

Transitions

Quick tutorial - Transitions.png (768×1 px, 132 KB)

Event Timeline

Change 611292 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] Vue SX Quick Tutorial: Create component

https://gerrit.wikimedia.org/r/611292

Change 611292 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] Vue SX Quick Tutorial: Create component

https://gerrit.wikimedia.org/r/611292

Change 616574 had a related patch set uploaded (by Nik Gkountas; owner: Nik Gkountas):
[mediawiki/extensions/ContentTranslation@master] SX Quick Tutorial: Go to sentence selector upon completion

https://gerrit.wikimedia.org/r/616574

Change 616574 merged by jenkins-bot:
[mediawiki/extensions/ContentTranslation@master] SX Quick Tutorial: Go to sentence selector upon completion

https://gerrit.wikimedia.org/r/616574

Some aspects I noticed:

  • Buttons are shown on the left side in the implementation. They are on the right side in the specification.
  • Buttons should be anchored to the bottom of the viewport, generating a scrollable page in cases where they need to be pushed down (e.g., above text becoming too large for the device screen). Currently, when making the window smaller, elements seem to just disappear with no way to access them.
  • Once the user reaches the editor, the option to go back, leads them to the tutorial again. Making the navigation back to the list of sections to be impossible.
  • The tutorials should be shown only once. For testing purposes it would be convenient to document how to reset this so that we can demo it.

The tutorial is not the most important step of the workflow, but some of the above may prevent the users to access further steps.

ngkountas subscribed.