Universal Language Selector

'''This document is a work in progress. Comments are appreciated but this is not a final draft.'''

This document describes the design of a language selector widget. This document is intended to be a starting point for conversations about how to best handle language selection on Wikimedia sites.

IMPORTANT: This feature does not differentiate between selection of language at specific scales or contexts. That is, a user may choose to have Spanish as their "chrome" language, and then use the selector to view an article written in German, or maybe change their keyboard mapping to Russian, etc.

History
At the 2011 Mumbai Hackathon, a small team began discussions addressing a major problem facing Wikimedia sites: language selection. The team put their heads together and came up with several ideas. The basic workflow was captured by Arun Ganesh; he put together a pdf file.

Initial screenshots have been pulled from this; a more comprehensive set of designs is forthcoming.

Rationale

 * Wikimedia properties exist in hundreds of languages. Simple selectors do not scale beyond ten or twenty items.  Further, selection of a language requires that the language selector itself be language agnostic: it must be able to be understood by a user who is not familiar with the site's "chrome" language.

Identified language selection contexts include but are not limited to:
 * Site-wide language selection (e.g., user preferences) for the site "chrome"
 * Editing language selection, especially for input modification (e.g., Narayam)
 * Interwiki link selection
 * Portal page language selection (such as on the Wikipedia home page

Hypothesis

 * Making language selection easier and more intuitive will allow for greater penetration into all languages
 * Making language selection easier will enable the sites to be more culturally neutral
 * Making language selection easier will promote cross-wiki collaboration

Feature Requirements

 * The language selector should be built as a "widget" that can be called from multiple contexts (e.g., can be repurposed)
 * The language selector should attempt to aid the user as much as possible
 * The language selector should be language agnostic

User Experience
In most cases, the language selector must be "activated". Clicking on the activation link will (normally) cause the selector system to be loaded into a jQuery window. In cases where there is no "activator" (such as a portal page), the selector is displayed "in page".

Activation
The mechanism for activating the selector is something that requires much thought and care. Users who do not speak English, for example, may not understand that the glyphs "Select Language" mean exactly that. It must be assumed that the user is not familiar with the language used by the site chrome.

Iconography is thus required. Unfortunately, there is (at the time of this writing) no universal icon for "select language". Some sites utilize "flag" iconography but this not acceptable because:


 * Flags are not culturally neutral. There are more English speakers in India than there are in the United States, for instance.
 * Language is not "owned" by any one political organization. Is "English" best served by the flag of the United Kingdom, Canada, United States of America, Australia, or any one of other nations that recognize English as an official language?
 * Users typically have very low "flag literacy". Not all flags are known to all peoples.
 * Flags can be political hot-buttons. Not all nations are recognized by all nations.
 * Flags have potential "expiration dates". Nations do not exist in perpetuity; they rise and fall. They may also change their flag symbology and colors.
 * Flag systems require maintenance for accuracy.

At this point in time, the best developed icon for this type of function is a stylized, wireframe globe. The globe should not display any land mass areas for two main reasons: cultural neutrality (which country is on the front of the globe) and for resolution-at-scale issues (reading the icon at 16x16 pixels).

Process
Once the selector is shown, the user may go about selecting the language of choice.

Note that all languages are to be displayed in their native spelling and with native fonts. Additionally, ISO codes should be displayed next to them.

The selector should begin with two panes, one on top of each other.

Top Pane
The first pane shall include a flattened map of the world divided into basic "regions" (not nation borders). The system should auto-detect the region that the user is located in (either via geoip lookup or GPS coordinate lookup in the case of mobile phones) and have that region auto-selected (and displayed in the lower pane).

Additionally, there will be an ordered list of the world's most common languages displayed (for quick selection).

The map is hot - selecting any region will reload the bottom pane with that region's languages.

Bottom Pane
This pane includes a language search function as well as two disparate lists of languages, in sectioned columnar format.

The first section shall show between 5 and 10 of the most common languages in the selected region, ordered by number of speakers.

The second section will again list out languages used in the region. However, this list will include as many as can be included. This list is ordered (alphabetically? by iso code?). Simple pagination controls (next/previous) will allow the user to browse the full list if it does not display within the confines of the dialog.

Non-Javascript Browsers
TBD

Arun Ganesh's Design
Designer Arun Ganesh built out a design and supplied a pdf of it.

Specification Callouts
''This text is copied and pasted directly from the PDF file. Formatting has been wikified slightly.''

The widget has 4 parts: 1. Widget shortcut:
 * a. Permanent link displaying selected language alongwith icons to indicate it is language related.
 * b. Seperate icon to directly open keyboard input or on-screen keyboard widget

2. Primary selector:
 * a. Static world map with marker showing user’s location guessed from geolocation user timezone or system language options. Clicking map changes the data in the secondary selector (3)
 * b. Static list of primary gloabal languages or biggest wikipedia projects. This enables quickly selecting a major language which has a high probability of usage.

3. Secondary selector:
 * a. Text box allowing a user to search language or countries. Autocomplete list
 * b. Country flag icons based on the region selected in the primary selector map or guessed user location. User can select his country flag if he identifies it
 * c. Regional map of the user’s area of interest. No markers needed, but clicking can change the ordering of languages
 * d. One column listing primary languages of the region or country chosen
 * e. Two columns with a comprehensive listing of all the minor languages. 3 text sizes to indicate the number of speakers of the language in the region.

4. Keyboard Input:
 * a. Options for keyboard mapping. Selecting a language would automatically load the available options and switch to the recommended input method for that language. Disable option switches to system settings
 * b. Keyboard mapping reference and on-screen keyboard. Dockable widget which can be dragged and detached from the language widget
 * c. Dropdown font selector to switch webfonts
 * d. Link to typing help or reference material

The universal language selector will allow a user friendly method for a user to switch to his native language from a foreign language interface with the help of visual aids.

The language selector widget can be activated by a link placed as close to the top-left or top-right of the page as possible. This is usually the first place a person looks for customization options in a foreign interface. Once activated, the widget expands to display the language selection options.

Related bug reports

 * 33677 enable setting language preference without requiring login