Universal Language Selector/Alternative Designs

From mediawiki.org

In addition, to the current design design, two additional designs have been considered:

  • Minimal contextual selector. A selector that is almost invisible, but offers help where it is needed. By taking advantage of contextual information, it provides the most likely options.
  • The original proposal by Arun Ganesh. The result of the first exploration of the problem at the 2011 Mumbai Hackathon.

Minimal Contextual Selector[edit]

The contextual design is based on two elements: the trigger and the language status indicator.

The trigger[edit]

For the contextual design, the trigger initially consists in the current language indicator. When the user clicks on it, it turns into a search box with a list of suggestions. Users can either type to look for a language or select one from the list.

  • Initially the list will include likely languages based on the same criteria used for the "Helpful Exploration" design variant.
  • Common languages for which the content is not available will be shown as disabled in the list.
  • Search will be performed for language names (in any language), countries and regions where languages are spoken and ISO codes.
  • A link to settings will be shown at the bottom of the list to adjust input and display settings.

Status indicator[edit]

To allow users to easily jump between languages and provide direct access to some settings where they are needed, notification-like messages are shown when:

  • Language is changed. The user is notified that the language has been changed and he is provided a link to return to the previous language.
  • User accesses for the first time a version of the site that is not in his likely languages. Since the user may not understand the content, a message suggesting the user to change the language to one of the likely ones is shown.
  • Font download is disabled and the user may have font display problems. When there is a chance of content not being properly displayed, a link to font settings is provided.

In addition, the status indicator provides access to previous languages set. So it acts as a direct access to the most common languages used.

Arun Ganesh's Original design[edit]

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.


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[edit]

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[edit]

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.

Specification Callouts[edit]

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.