Page MenuHomePhabricator

Section Translation Editor: Quick tutorial
Open, MediumPublic

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

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.

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

Event Timeline

Pginer-WMF triaged this task as Medium priority.Apr 22 2020, 9:59 AM
Pginer-WMF created this task.
Pginer-WMF updated the task description. (Show Details)Apr 22 2020, 10:02 AM
Pginer-WMF updated the task description. (Show Details)May 14 2020, 10:32 AM

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

Pginer-WMF updated the task description. (Show Details)Jul 13 2020, 6:44 AM

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

Pginer-WMF added a comment.EditedThu, Sep 24, 8:34 AM

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.