Rethinking online translation editing

Note: read the actual information about Lingohub application in the new blog article

Logging in today, our users noticed a button in the translation interface notifying them of our new translation editor. We rolled out a new interface for the Lingohub localization application just recently to prepare for this move. This is not just a small feature release for Lingohub (and thus a huge boost for developers and translators working on these localization projects) but part of a broader technical approach to making online translation better. Let me explain why.

We rolled out a new translation editor, click here to switch to it and try it out. It is crazy awesome. Translators can skip No. 3.

1. From online interface to productivity application

It is one thing to have a browser interface (like a regular website), with functionality for translation. There have always been common elements mass actions, various text fields and interface aspects for managing a project. It is another thing to benefit from the look and feel of an actual application that puts usability front and center, harnessing the powers of modern web technologies. As a user, you stop browsing an interactive website, and you start using a full fledged application, with all the functionality and behavior you expect from software.

Similarly, organizational concepts change as well. On (semi) interactive websites, you are bound to the room that HTML trickery leaves you for usability. Once these boundaries are removed, you can organize functionality and information in more user-centric way. For translation editing, the main goal is to put original text and translation front and center, and make all functionality that is required for the translation process easily accessible.

An example calculation: If your application holds 200 phrases/translations, and it takes approximately 2.5 seconds to save and hit next to switch from translation to translation (effectively loading a new HTML page), then you are already wasting more than eight minutes just on clicking buttons. In reality, it is probably more time, accounting for the time new pages render in your browser, and probability of having to go back and forth.

Rethinking online translation editing means cutting the cruft, freeing professionals of unnecessary and bothersome aspects of work and increasing productivity. The editing interface we rolled out now increases the level of context-sensitive functionality (see only what you need at any given step of the process), removes most of the necessary clicking and puts all actions at your fingertips - there is a quick shortcut to do anything.

In practice: Flick through phrases hitting the TAB button, mark phrases, change status and more, all without your screen even refreshing. We have moved the way you interact with the translation of your project from interacting with a website to using an application that increases your productivity.

2. What changes in localization workflows

Does this change your project workflow? Absolutely. In addition to the interface overhaul, we tweaked the behavior you know from changing the translation status of a given phrase.

Lingohub no longer automatically changes all statuses of phrases according to set rules. As the editor is so much more powerful now, we leave most phrases as they are unless you explicitly change their status.

• We explain the workflow aspects in a separate blog post, a little more in detail including which automatic changes are made.

3. Under the hood: Highly flexible translation editing

Rethinking online translation editing for us meant taking a completely fresh approach to designing our application interface. We are going to employ similar technologies also for other functionality planned for LingoIO. Moving away from Ruby to more Java/AngularJS based foundations let us do a number of things that have greatly impacted the flexibility of the application.

First, we needed to have a very responsive User Interface. Page reloads are disrupting the workflow, so we decided that Lingohub (and LingoIO) will be a one page application - meaning that we only do partial updates of the page. We decided to go with AngularJS, and we never looked back. A lot of Lingohub is already migrated to a full AngularJS view and the editor was designed that way. The move to AngularJS also allowed us to easily switch the backend to Java.

But this was only one part of the UI, the other part is to make it look beautiful and flexible. Standard HTML components don't allow the customization we need, so we went all the way and created our own component.

The new editor was already fast, but we want more. We will completely rewrite our search, scaling Elasticsearch to the fullest. We haven't released the new implementation, but from internal tests we are pretty sure you will feel the difference. The search syntax also got an overhaul and is now even more clear and powerful.

Interaction: The new translation interface is a lot more responsive, loads quickly and puts sufficient contextual info into your workspace. A sidepane lets you control and view a lot of translation aspects, and the main bar gives project owners quick access to administration tools. We have outlined that in a previous blogpost.

4. Shortcuts galore

I mentioned shortcuts. Not everyone is a shortcut person, but again in sheer effort, each second you spend changing the position of your hands, switching interface devices or moving a cursor around, that costs time. These are just precious seconds, but it accumulates, and interrupts your workflow. In our main translation view, you can just flick through from translation to translation with the tab key. You can mark several phrases in a row by holding CTRL and change their status in bulk (e.g. once you are done with all translations in your current view). In any particular translation, a shortcut lets you save and also change its status.

Shortcuts:

UP/DOWN: In the main view, switch through phrases with the arrow keys. Press ENTER to focus on one phrase, press  x to select it. That way, you can select multiple phrases with your keyboard.

TAB: Save and go to the next phrase

SHIFT TAB: Save and go to the previous phrase

CTRL m: perform a machine translation on the selected phrase

CTRL j: Save the active phrase as draft

CTRL k: Save the active phrase as translated

CTRL l: Save the active phrase as reviewed

ESC: Cancel current operation

5. Conclusion: Happy Easter in localization land

This is certainly not the end of rethinking online translation editing. Much more can be done to improve usability and productivity of editing translations online. Some of the things we want to accomplish next (aside from small improvements): increasing responsiveness and compatibility across all devices (one of our main goals for LingoIO), rolling out WYSIWYT and adding some improved team collaboration features. Give the new editor a go, and let us know what you think!