Universal Language Selector/Specification

This page will contain a detail specificaion of the interaction with the Universal Language selector. At the moment it contains a set of statements that we want to make sure they are considered when the selector is developed. These statements are the response to some of the issues found during usability testing.

Integration in the page
The main entry point for accessing the language selector has not being decided yet. Different locations are currently being tested with users to see which work best in different scenarios.

Apart of the main location of the selector. The ULS can be placed at different locations depending on the context. The purpose is to provide direct access to specific functionality closer to the place where this is needed. See the adaptations section for more details on specific placement.

Settings view
When there is not a default purpose for the language selection on a specific context, the settings view is shown.

The settings view is composed by three regions:
 * A header. This indicates the user that he is at the settings dialog.
 * Settings sections menu. Currently two sections are defined: display settings and input settings.
 * Display settings is the selected option by default.
 * Settings configuration. The specific options for each category are shown.

Language selection for settings
Both setting sections require languages to be selected. For this purpose they include a list of likely languages and a button to select a different one:
 * The list of likely languages is based on:
 * Languages defined in browser settings.
 * Contributed and consumed languages by the user (if this information is available).
 * Language defined in the user settings (if this information is available).
 * Languages spoken in the current geographic area.
 * Previously selected languages.
 * English as a global default.
 * The "add" button is depicted with an ellipsis.



Notification on language change
When the user selects a different language, a notification is provided to inform of the consequences and allow the user to undo his action. The messages to display are:
 * For display settings: "Menus will be show in  now. Undo."
 * For input settings: "Now you can write in  (Undo). Indicate your preferred method for input below."

Messages are displayed using the UI language. In the case of UI language change, the original UI language is used for the message since one of the purposes of the message is to allow recovery.



Display settings
Regarding input settings, the user is able to select:
 * The language for the UI
 * Whether webfonts are enabled.

UI Language

 * 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.

Font settings

 * Download fonts automatically. A check box (enabled by default) will allow users to indicate whether fonts are automatically downloaded for scripts that require it.
 * When downloading is available and several fonts exist, a drop-down box will be presented to the user to customize the font used.


 * Preferred fonts customization. For each language in use that supports multiple fonts, a drop-down selector is shown to the user to customize the font used. The preferred fonts section is only shown when the check box is checked.
 * When different languages are used, text explaining whether the language was used for content, menus and/or input is shown.
 * The entry corresponding to input font provides a "Change input language" link to access the input settings.

Input settings
Regarding input settings, the user can select:
 * The language used for input.
 * The input method to be used for input for this language. For each language a set of input methods are provided grouped by types. For each type a brief description (and a help link) are provided. When several options are available, the appropriate control will be shown for selection. Conversely, when no options exist, widgets for selection must not be shown. For example, a language for which no methods are provided, will not show this section at all.
 * The preferred input method for a language is persistent. That is, when the user changes to a different language, the method to use would be the previous one used for this language.

Language list
The language list is presented to the user each time that a language needs to be selected.
 * The language list is closed 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.
 * The list is presented as a continuous long list the map filtering scrolls the view to the appropriate region but does not hide items from the list. In this way, items can be explored by scrolling.


 * 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").
 * 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.
 * The search should should include all regions to avoid results to be hidden by mistake (and this should be indicates graphically in the map by highlighting all zones).

World map
A World map divided vertically in three regions (with labels) is used to reduce the number of languages to the ones spoken in a specific region.


 * The world map is divided in three regions: America; Europe, Africa and Middle East; Asia and Oceania. An additional label-only region named "Worldwide languages" to include constructed languages and world languages.
 * 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.

No results found
When the search term does not match any results, a message is displayed to the user to indicate alternative ways to look for the language: "No results found for ''. You can search by language name or ISO code, or you can browse by region: America, Europe, Africa, Middle East, Asia or Oceania ." (Region names being links to each sub-region in the list).



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.

Editing
In order to allow an easy support for editing, the ULS may be placed closer to the editing context. By placing an indicator of the current input language close to a text box or text area, the user can use it to access input settings directly:


 * Change input method. The method for the current language can be changed or disabled. In addition, specific actions such as show/hide the virtual keyboard can be placed next to each option.
 * Select a different language. A short list of 3 languages is shown. The list is initially based on the same criteria than the previous short lists of languages, but once the user changes to different languages, previous choices are the ones in the list.
 * A "more" button depicted by an ellipsis is used to select a different language not included in the list. The language list is shown when the button is accessed.
 * A "More settings" link allow the user to access the language settings (with the input settings view open by default).

The current language indicator will be shown when the user starts typing in the text area. Other alternative possibilities for activation are:
 * Always visible.
 * When text area receives the input focus.
 * On first deletion of characters.



Multi-language selection
For contexts where the outcome is a list of languages (e.g., such as 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 an "X" icon to remove elements from the list.
 * If the list is empty it is indicated explicitly.
 * 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 tooltip is shown on hover to provide an explanation of the functionality.
 * The short list of languages. A short list of languages is integrated into the language selector to make it easy to select all the usual languages for a user.
 * The long list of languages. The list of languages with the usual aids (search bar, map, arrangement by script type).
 * 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 "done selection" button at the bottom to make it easy to complete the process of adding new languages.
 * Selected languages in the list are presented also with the "X" icon to allow them to be removed from the list. These languages can be removed by clicking on them from the list.



Reduced number of languages
For specific contexts where language selection is performed for a subset of languages, the selector can be adapted to avoid those languages to be sparsely distributed in the list:
 * If there are 15 languages or less, they can be shown in a single list.
 * If there are 50 languages or less, languages are not divided in sub-regions and the three global regions are used instead.