Translate extension language bar Part 1

As part of my GSoC project, one of the aims was to improve the interface for the Translate extension on webpages. Here is what it looks like currently.

Old interface
Old interface

Here is a close up on source and translated pages
Source pages:

Language bar on source pages
Language bar on source pages

Translated pages:

Language bar on source pages
Language bar on source pages

If you can see, the interface is cluttered, all the languages will be listed here, and as the number of translations increase, the language bar keeps getting bigger. Added to that, there is no way to search for the language you want to use.
There is an information on top of the language bar which tells whether the page is Translated/Percentage of translation complete etc. It also has links to Translate/Mark for translation.
All this functionality offered by the language bar is indispensable but mightn’t serve every single user. For instance, a user who reads only English would be bothered by the big language bar and the info bar since he only is interested to read a certain page in English. Also, mobile users will need to scroll down all the way to be able to start reading the page.

Proposed solution

One solution for this problem is using Interlanguage links as in Wikipedia. But there are a few problems to it:
* They are not meant for translations but as equivalent versions in different wikipedias. So, the content may differ a lot in this case while in Translate extension, we simply have the translated version of each page on the same website to support different language readers.
* Even that is bulky in case of a lot of languages. User needs to scroll down a lot to be able to get the language he wants. Even wikipedia is experimenting with compact-interlanguage links

Wikipedia interlanguage links-see on the left side
Wikipedia interlanguage links-see on the left side

First design

So, now with help of Pau Giner, designer for WMF, the first version of the Language bar was developed. This is what it looks like on pages

Language bar on a wiki page
Language bar on a wiki page

The idea was to show up the most used languages on the page and show the rest using Universal language selector. The extension was developed after a lot of work and has been successfully implemented on a lot of Wikis.
The language bar shows 4 languages by default with an indicator on the right showing the percentage of translation complete.
The info is integrated into this language bar. There is option for users to Translate/Mark for translation. It houses a down arrow beside itself which has additional options. Also, in case of translated pages, the language bar displays the percentage of translation completed.

Here is a quick look at the design implementation:
On a source page

Language bar
Language bar

On a translated page

Language bar on translated pages
Language bar on translated pages

The language bar can be minimized to a compact button for uni-lingual users

Minimal language bar
Minimal language bar

Clicking the … button fires up the ULS which has a search bar and getting the required language is a piece of cake. In case the translation for the language hasn’t been started yet, it leads to Special:Translate where the user can translate the page into that language.

Popup for language selection
Popup for language selection

The design solved most of the earlier issues but had a few flaws:
* The percentage indicator on pages is very distracting.
* The language bar wasn’t very appealing.
* The design was completely dependent on availability of JS as ULS depends on JS.

Well, these flaws need to be solved to be able to use the language bar design in production.
I will cover about the final design in the second part of this post. Stay tuned.

Advertisements

One thought on “Translate extension language bar Part 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s