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.

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

Derived Requirement

Ensure that the Quick Tutorial step in the Content Translation (CX) mobile experience renders with correct spacing between all instructional elements, matching the specifications defined in the design task T250898. This step appears when force-quick-tutorial=true is appended to the URL before reaching the "Pick a sentence" stage.

---

Test Result - Beta|Prod

Status: ✅ PASS / ❓Need More Info / ❌ FAIL
Environment: prod/{targetwiki}
OS: macOS Sequoia 15.5
Browser: Chrome 137
Device: MBA
Emulated Device: iPhone 14 (Minerva skin)

Test Artifact(s):

Test Steps

Test Case 1: Ensure Proper Spacing in Quick Tutorial Step

1. Visit any Wikipedia where Content Translation is enabled (e.g., https://bn.wikipedia.org).
2. Navigate to: https://bn.wikipedia.org/wiki/Special:ContentTranslation?force-quick-tutorial=true
3. Select a source and target language (e.g., English to Bengali).
4. Select any article/section to translate and proceed to the Quick Tutorial step.
5. Observe the spacing between tutorial elements (title, instructions, illustrations, navigation button).
6. ✅❓❌⬜ AC1: The spacing in the Quick Tutorial step matches the dimensions and layout defined in design spec T250898.

Test Case 2: Ensure Quick Tutorial Step Is Triggered with URL Parameter

1. Navigate to any CX-enabled wiki and open Special:ContentTranslation?force-quick-tutorial=true.
2. Start a translation.
3. ✅❓❌⬜ AC2: The "Quick Tutorial" step appears before the "Pick a sentence" step.

Test Case 3: Ensure Quick Tutorial Step Does Not Appear Without Parameter

1. Navigate to the same Special:ContentTranslation page without force-quick-tutorial=true.
2. Start a new translation.
3. ✅❓❌⬜ AC3: The tutorial step is skipped unless previously unseen or triggered explicitly via the URL.