What's the problem


The editor for translating updates is currently pretty much useless right now for several usability reasons. When I say "useless", I mean to the point where most people don't actually use the diff provided in the translation editor, and instead manually compare the source and target texts.

Below is a screen shot of that editor.

Translation Editor Current Version

This editor shows a diff of changes that have happened in the French version of that page, with an edit area for the English page below. The goal is to reproduce the changes from the French page into the English page.

The problems with this editor are as follows.

Problem 1: Not full diff


The diff at the top of the screen only shows the lines that have changed in the French. They provide little context which would allow you to locate the exact location in the English where these changes need to be reproduced. This is especially difficult for long pages.

It would be much better if the diff was presented in full, inline mode. But that will make Problem 2 worse (see below).

Problem 2: Hard to see diff and edit form at the same time


As you can see on the screen shot, it's hard to see both the complete diff and the edit area at the same time, which also contributes to the problem of locating where in the English a French change must be reproduced. If the user can't see at the same time, the change in the diff, and the place in the edit form where he thinks the diff needs to go, you need to keep scrolling back and forth, and using your short term memory to remember what was on the other part of the screen.

It would be much better if the complete diff and complete edit form were displayed top to bottom, or even better, side-by-side (for some reason, humans seem much better at comparing things that are side by side than things that are top to bottom).

Possible solutions


I (Alain Désilets), have started working to improve the layout of the translation editor, but I need help to make the layout work well.

So far, what I have done is this:

  • Diff is a full inline diff.
  • The translation updating dialog is presented in full screen mode, in order to maximise available real-estate.
  • The diff and edit area are displayed side by side.


Below is a screen shot.

Image

Not exactly pretty. Below are the remaining problems I see with it. Can someone help me? I have been at this for about a day now.

Remaining problem 1: Page editor overflows to the right


The page editor seems to have a fixed width, so that there is a huge chunk of it that doesn't show at the right.

Remaining problem 2: Diff is not full length


The diff on the left does not have the same height as the editor. This may not seem mportant, but it is, because if the areas for editing for displaying the fulldiff have about the same height, then by positioning the two vertical scroll bars at about the same position, you will end up at approximately the same location in both the English and French side (unless there have been lots of changes in one or the other of the files).

Remaining problem 2: The blue background is annoying