Interface for a translation module

Question

We have an application in which we create tests. These tests are created in a certain language (can be anything). In a phase of the test's process, it has to be translated so all languages we offer are covered (going from french-german to more exotic things like Chinese-Swedish --- we're a European office).

We've come up with a few ideas of ourselves, but no idea seems to solve the issues we keep having. These thoughts are the base for our design:

• at all time, we need to see the source test (the test we translate from) and the destination language (the test we're creating).
• We'd like to contain the amount of "pop-up" screens to a minimum, as that creates extra clicking and it draws the user from it's current view.
• The test interface should not rearranged (a part of the test is a screen that consists of a table, so x-columns and x-rows, this is the widest part of the test). The reason is that the user must see the original arrangement because it's important in the translation process.

A few designs we came up with:

• Split our screen in half, with the source test to the left, and our destination test to be translated on the right. We provide some sort of preview (alot of the data has to be processed before the actual test can be seen) is then provided in a pop-up so it can be dragged onto a secundary screen. The problem here is that 2 tests on 1 screen might be an issue as not all data can be seen (the cells auto-scale and become too small to see the content).
• Break the flow of the cells in our test and put them all vertically (so top-bottom). We'd rather not do this as that makes it hard for our users to see which cell goes where in the original table (I put it here anyway to indicate we covered this idea too).
• Use 1 main content area, and put A1 and A1 (source and destination) next to eachother, but use different colors to indicate their source (fe the source test gets green and the destination test gets yellow) so say we have 5 columns, then we'd have 5 green-yellow pairs next to eachother on 1 line. Compared to solution 1, this saves a lot of margin spacings and gridsplitter space. Disadvantage is that we merge both tests into 1 big screen.
• Use 1 screen for the input and put the source test on a pop-up so the user can put that onto a second screen. We provide some sort of togglebutton, so the user can switch between source test and preview mode on their pop-up, to save them from having multiple pop-ups open.

As far as user profile goes, this tool is intended for internal use only so we know the user has access to an external monitor, so we should actually make use of that one. Also, our users are non IT, so the solution should be Ux-proof, we don't want a learning curve.

Any thought on this matter are greatly appreciated, whether it is criticism on our proposed solutions or a proposol on how it might be done better.

Answer 1

Completely off base perhaps, but why not use an "overlay" style. I don't mean an overlay as in light box modals, but an overlay style where the original is served as the background image for the translation.

You could put transparency to good use to show which parts already have a translation and which parts don't. And could allow some form of ctrl-click or shift-click to show the original for something that has already been translated in case the translator wants to check the translation or wants to see whether the original phrase is similar to the one (s)he's working on now.

Update (in response to comment):

Simultaneous display of original and translation could be achieved with on hover hints. But perhaps more interestingly and more useful would be to implement two modes. The overlay mode for a quick sense of the translation as well as how much still needs to be translated. The other mode being a "split screen" or rather "split row" mode. In this mode the display of both original "background" and translation "form" would double their row height. The original would display at the top of each row while the translation form would display its text at the bottom of each row.

Answer 2

I think arranging parallel is the way to go - source and target alongside:

Affords great context - the translator can see both source and target texts at the same time. This also means issues like run-on texts, situations where sentences are merged, page breaks, formatting, and so on and be viewed for accuracy easily. A word or character count built into this kind of visual display means where there are length constraints for a UI translation or whatever, well then an edit is a little easier.

Arranging side by side in a browser means that you can take care of things like bidirectional text edition (Arabic, Hebrew, Urdu, etc) relativelty easily.

As a final tip: Do tell the user what language they are translation to/from. Avoid use of flags (http://www.globalbydesign.com/tag/flags/) in this regard. Better to use localized names of countries and regions or language identifiers such as en-UK for British English etc.