Page MenuHomePhabricator

Section Translation Editor: Edit a sentence
Open, MediumPublic

Assigned To
Authored By
May 5 2020, 5:19 PM
Referenced Files
F34559611: Edit a sentence - Updating.png
Jul 22 2021, 7:43 AM
F34559613: Edit a sentence - Dimensions.png
Jul 22 2021, 7:43 AM
F34559599: Edit a sentence - Updating.png
Jul 22 2021, 7:39 AM
F34559601: Edit a sentence - Dimensions.png
Jul 22 2021, 7:39 AM
F31804718: Edit a sentence - Transitions.png
May 6 2020, 9:57 AM
F31804658: Edit a sentence - Updating.png
May 6 2020, 9:27 AM
F31804674: happy-robot.svg
May 6 2020, 9:27 AM
F31804660: Edit a sentence - Dimensions.png
May 6 2020, 9:27 AM


As part of the Mobile editor for Section translation (T243495), users are presented with automatic translation proposals for each sentence they can edit. This step is about editing those translations, comparing it with the original sentence, and editing accordingly.

View this step in prototype for a general overview.

General concept

The editing needs are supported by reusing Mobile Visual Editor. This provides a familiar and consistent editing experience, and reduces technical costs of customizations. However, some customizations are still needed for this particular context:

  • Access to the original content. A panel shows the source content needed for the translator while editing, reviewing or writing a translation.
  • Transition helping to connect the dots. Both original and proposed translation contents are part of both the current and previous step (although presented in a different way). A transition helping users to connect the dots helps to reduce the reorientation efforts.
  • Saving is different. The main action for Visual Editor is to save an edit. Here the saved contents will update the translated contents of the section.
Edit a sentence - Overview.png (768×1 px, 91 KB)
Edit a sentence - Layout.png (768×1 px, 114 KB)

T259507 Original panel

Edit a sentence - Original.png (768×1 px, 161 KB)
Edit a sentence - Original Dimensions.png (768×1 px, 120 KB)




original-panel.gif (626×334 px, 3 MB)

Mobile editor integration

Edit a sentence - Editor.png (768×1 px, 111 KB)

T259511 Updating the translation

Edit a sentence - Updating.png (768×1 px, 193 KB)
Edit a sentence - Dimensions.png (768×1 px, 82 KB)


Learning from your corrections…
X% edited by you



Edit a sentence - Transitions.png (768×1 px, 163 KB)

The transitions are aimed to provide continuity to the elements to help users reorient. When editing the proposed translation, the card where it was displayed moves up and becomes the editor surface which contains the same content. In this way the transition helps the user to know that they are editing the piece of content that was displayed before. Similarly, the background fades into grey to communicate that the original text remains behind the panel.

These transitions are illustrated below:

Enter & Back

edit-proposal.gif (626×334 px, 3 MB)

Enter, Edit & Update

save-edit.gif (626×334 px, 3 MB)

Related Objects

Event Timeline