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.
[[ https://pauginer.github.io/prototypes/translation/sections/dash-mob/#EditSen1 | 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.
|Overview|Layout|
|---|---|
|{F31803659, size=full}|{F31803661, size=full}|
# Original panel
|{F31803663, size=full}|{F31803666, size=full}|
Messages:
> Original
Interactions:
{F31803337, size=full}
# Mobile editor integration
{F31803670, width=50%}
# Updating the translation
|{F31804658, size=full}|{F31804660, size=full}|
Messages:
> **Updating translation…**
> (and learning from your corrections)
> X% edited by you
Illustration:
{F31804674}
# Transitions
{F31804718, width=50%}
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**
{F31803325, size=full}
**Enter, Edit & Update**
{F31803362,size=full}