User:Kunalgrover05/Language bar UI design

I am working on redesigning the UI of the Translate extension with pages. It comprises of the language bar and the various messages shown by the translate extension on web pages.

This is the bug associated with the current UI- Bug 51533

Here is a detailed explanation of what is required. Redesign of interface on translatable pages and language bar

First design

Currently I am ready with a basic design and these are some important points to consider:

When the page is not marked for translation, the UI needs to be made for that. Otherwise, we can continue with the Mark For Translation link
Information such as percentage of completed translation/ source language are not very important for most of the users. Currently, I am using an info button in the language bar. But it is important to display a message if the translation is outdated. One of the ways to do that is having an info button in normal cases but in such cases display a warning icon.
Languages shown are priority languages/ or in other cases show the list of most used languages. But the list of languages for which can translated can get huge, so having something like universal language selector here will be good.
Translate button opens Special:Translate.
There is another button with a dropdown which allows the admins to do things such as Marking for translation, viewing logs etc.

Here is a simple design I created. https://github.com/kunalgrover05/MediaWiki-language-bar/tree/old-design

Suggestions and design by Pau Giner

Designs at: https://commons.wikimedia.org/wiki/File:Designs_for_translated_wiki_pages.pdf

Some important points to consider:

Language indicator: The icon that appears at the top-right of the page allows to hide/show the whole thing. Initially the language panel will be shown, but this allows monolingual speakers to hide it if they want to.
Source language: The source language is shown as the first one and the separation line form a triangle to communicate that the next items are translations based on it.; Language list: The language list includes the 4-5 languages more relevant for the user (following the same criteria as the Compact Language Links feature).
Actions: i added actions in a second row. Most of the time there will be only the "translate" action, but other elements such as "mark changes for translation", "view changes" or the completion percentage can be displayed when needed.
Language selector: The compact version of the ULS can be used when the user wants to access "more" languages.
Completion indicator in the language list: I used a small dot. We can make use of colour to communicate completion, but I have not thought about the specific scale.

Current progress

Here is the current implementation based on Pau Giner's design. http://kunalgrover05.github.io/MediaWiki-language-bar/

First implementation

First implementation patch is here

Version 1

Things done

First implementation with working links
Using available and priority languages for selection
Translation not started leads user to Special:Translate
Removed translation page header hooks

TODO

Add system messages for all links which are hardcoded
Select languages using Geo data/number of times a page is accessed
Change CSS class names according to MediaWiki standards
Better RTL support
When user doesn't have necessary permissions to translate and is on a translation page, the translation unit only has the translation percentage, maybe shift it to a dropdown

Design changes suggested by Pau

Language bar design on translatable pages (bug 51533) Current situation example:

Proposed designs Designs have been updated: https://commons.wikimedia.org/wiki/File:Designs_for_translated_wiki_pages.pdf Mainly to make main actions to be on the right, and remove the "view diff" action (Niklas mentioned that it didnt made sense).

The current designs don't seem to have got rid of the View Changes button, does it need to be removed?

Review of the existing implementation

Based on http://kunalgrover05.github.io/MediaWiki-language-bar/, some comments: Don't display the ISO codes, just language names. The triangle used to separate the source language from the rest can be improved: Make the angle less sharpy Support it using CSS: http://codepen.io/anon/pen/fBlkh

Thanks a lot, was looking for this

Reduce the number of names initially exposed (a total of 4 languages: source + 3 more seems enough). The goal is that the total width is approximately similar to those of infoboxes, so that it does not feel strange when infoboxes are present, or when they are lacking. A language indicator indicates the number of languages and allows to collapse/expand the language bar ("120 languages"). Icon is available at https://dl.dropboxusercontent.com/u/30377416/i18n/foreign_characters_lightgray.svg Options should be presented only when needed: The "..." option is only shown when there are more languages to the ones displayed initially in the language bar.

Currently, it does this as well, in case a language doesn't have translation started, go to Special:Translate on selecting it. Should we remove it?

The selected language should use different colours: Selected elements should have a gray background with a darker text (see CSS notes below). Completion status should be simple (I don't mind even if we removed completely): If the completion is less than 25% we can show a yellow (#ffb50d) dot below the language name (see Catalan in the designs) If the completion is less than 50% we can show a gray (#DDD) dot below the language name.

CSS update

I created an updated version of the example with SOME of the changes described above: http://pauginer.github.io/prototypes/lang-bar/lang-bar.html

Thanks a lot for this help, i am really slow at implementing designs. This gives a lot of help

The CSS I added is http://pauginer.github.io/prototypes/lang-bar/changes.css The CSS needs to be refactored with the existing one since I've been just overriding properties for the sake of speed.

New designs

Designs finished as per suggestions

Implemented

Version 2

Using available and priority languages for selection
Local storage to keep bar hidden across pages
RTL support
Added system messages
Checked design for smaller translate bar(when enough languages aren't available)
JS fallback
Fixed tooltips for all links

Notes from August 18

High priority

The language indicator should include "languages" next to the number: "5 languages" instead of just "5".
The language indicator background color should be #EEE
On hover it can be #DDD to convey interactivity.
The translate action colors:
- On hover, the "translate" label color should become #79a8ff
- The background should not change on hover.
- When the window becomes small, the layout breaks. Several options are possible:
- Reduce the number of options shown as the space reduces.
- Guarantee a minimum width
- The selected element needs a bottom-border. Currently the bottom border is lacking for the selected element

Medium priority

The percentage indicator should apear at the left of the translate action. Currently is on the right.
The percentage indicator should remain inactive on hover: text should be gray and the cursor should not be a hand.
The background of .mw-translate-langbar-row should be #fbfbfb instead of white.
The separation between translate and the percentage should be subtler.

Low priority (future improvements that depend on improvements to ULS)

Once the user access the extended list of languages:
Clicking on a language should open the translation of the current page. Currently it navigates to a different page.
Ideally, when the extended language list (ULS list) is shown the following should occur:
- the short list becomes hidden
- The extended list is shown connected to the language indicator (a triangle pointing up from the extended list)
- The extended list should provide a way to go back.