Universal Language Selector/Specification

Integration in the page
The ULS can be placed at different locations depending on the context. See the adaptations section for more details.

Settings view
The settings view is composed by three regions:
 * A header. This indicates that we are at the settings dialog.
 * Settings sections menu.
 * Settings configuration.

Display settings

 * UI language change should preview immediately. When the user changes display settings, the UI language should change immediately keeping the selector open for confirmation or cancellation (if the user cancels, the changes are reverted). The rationale for this is that in a foreign environment a user could identify his language and just by clicking it, he is presented with a familiar environment. If the user applies the changes, the dialog is closed and everything remains in the selected language. If the user cancels, ULS is closed and UI language is reverted to Greek.

Language list

 * The language list is hidden when an element is selected from the list. In the case of multi-language selection this behavior is different.
 * The user is returned to the previous context (the original page or the settings view depending on the origin).
 * Once the language list is shown, a link will be provided to the user to go back.
 * The escape key will be used for the same purpose.

List layout

 * Languages are organized in 5 columns with 10-items per column and two rows of items initially visible (to invite for scrolling if needed).
 * Languages are grouped in clusters in a way that communicate the ordering of scanning to follow alphabetical order.
 * The width for each language should be enough for the language not to span several lines.


 * A category is defined for each geographic sub-region (e.g.: Europe, Africa...).
 * The first region to be placed on top depends on the user current location.
 * The rest of the regions will be consistent with the three regions in which the map is divided.


 * Any language that is likely to be selected by the user will be highlighted in the list.
 * Highlighting will consist on using bold text and setting the background of this text to a different color.


 * Languages with the same type of script will be displayed together. This allows the user to focus on the region of the list where more familiar text appears (see the image above).
 * Scripts with the greater number of languages will be placed first.
 * Script regions should avoid fragmentation and have a clear starting point.
 * Two scripts cannot be in the same cluster if they span more than one cluster.
 * If a set of languages spans multiple rows it should start at the first column.

Search box
Search is triggered as the user types the first character. Only languages that match the search criteria are kept in the list. Languages are re-arranged to avoid big gaps and region labels which do not contain any language are removed to avoid languages to become hidden below the fold.
 * When the language list becomes visible, the search box should receive the input focus.
 * For tablet devices it is preferred not to gain focus automatically since the virtual keyboard can hide the language list.
 * When the search term is not empty, an 'X' icon will appear o the right of the form. This will allow the user to clear the search term.
 * Search should be flexible in order to match:
 * Languages in their own name
 * ISO codes
 * Alternative names in different languages.
 * Languages using a relaxed version of the script. For scripts that provide variants for some letters (e.g., capital letters or accent marks), the search should be capable of matching the equivalent variants (e.g., "maori" should match "Māori").

Keyboard support
When searching, the first of the results will be strongly highlighted to indicate that can be selected by hitting the enter key. This allows users to complete keyboard-only language selection.

World map

 * The world map is divided in three regions.
 * By default the filter is activated to show only the languages spoken in the current region the user is located.
 * The highlighted region is consistent to the languages the user observes in the list.
 * The world map is synchronized with the scrolling action. When the user scrolls down the list to a different region, the map changes the highlighted region.
 * When searching the full map gets highlighted to indicate that the search considers all regions.

Duplicated languages
Since the languages are arranged by region and script. The same language will appear several times in the list when:
 * The language is widely spoken in several regions.
 * The language is written in multiple scripts.

Constructed Languages
Constructed languages are normally conceived to be universal. It is still unclear how to deal with them:
 * Repeat them for each region since they have a global scope.
 * Repeat them for the regions where there is a significant number of speakers for the language.
 * Create a miscellany region (e.g., "worldwide") where constructed languages and world languages appear.

Right to Left languages
The following considerations should be taken into account:
 * Alignment of UI elements is reversed with respect to the Left-to-Right version of the UI. For example, the world map is placed at the left and menus are placed at the right.
 * Each language group (by script) preserves its own ordering direction which is not altered by the general UI direction.
 * The labels in the language list are left or right-aligned depending on the language direction.

Content selection
For contexts where the content language can be changed, the current language indicator will trigger the language list to appear. In this case, the language list will include links to the display and input settings.

Multi-language selection
For contexts where the outcome is a list of languages (e.g., such a s translators being subscribed to their languages of choice). The ULS is presented with these elements:
 * The list of current selected elements. Each language is represented with a label and am "X" icon to remove elements from the list.
 * An add button represented by an ellipsis that allows new languages to be added to the list. The button makes the language list appear.
 * A language list.
 * The language list is located below the list of current selected elements without hiding it.
 * When a language is chosen from the list, the list is not hidden. The list remains open so multiple elements can be added sequentially.
 * The language list includes a "close" button at the bottom to make it easy to complete the process of adding new languages.
 * Selected languages in the list are presented as extruded. These languages can be removed by clicking on them from the list.