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.

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

Translated 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

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

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

On a translated page

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

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.

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.