21

We are defining a language selector for 400 languages. Given the massive number of languages compared to other websites, we applied several mechanisms to reduce the complexity of the language list. The current design is shown below.

Design for the language selector

The mechanisms applied are the following: - Provide a short list to anticipate user needs. A list of six languages is provided based on the browser settings, the geographic area of the user, and previous selections. If the language is not in the list, the user can access a larger list of languages with the aids listed below.

  • Flexible search. The user can type the language he is looking for to reduce the list of possible languages. Search will be flexible so the user can type the language name in a different language.

  • A map for filtering. A world map divided in three regions is used to filter the language list (with the user region selected by default). The world has been divided in just three regions since defining more regions requires more precision in the selection and geography knowledge.

  • A list of languages arranged by script type and region. The list of languages has been divided in different geographic zones and languages are arranged by script type (to make it easy for the user to identify zones of interest in the big list). The list also highlights the languages which are likely the user is interested in.

More context information can be obtained from the project website.

Considering that language selection is a mechanism with a transient posture and it should not interfere the main flow of actions from the user. Is there any other mechanism (or combination of such) that can help to reduce a long language list with minimal distraction for the user?

Pau Giner
  • 2,771
  • 14
  • 18
  • 1
    You have already done the thing I would recommend... flexible text search. I can find no fault in your described implementation though there could be unmentioned details that are sub-par. – Myrddin Emrys May 22 '12 at 18:33
  • Quick question: do we know the language the viewer reads? In other words, must this interface be completely language agnostic? There are use cases either way (English user choosing a language vs unknown user selecting interface language) – Myrddin Emrys May 22 '12 at 21:19
  • 1
    I would generally expect that the language someone would want would be in their browser settings or location would get it - so your initial list of six would catch the vast majority of cases. The case where this is likely to break is when someone is not using their own computer, especially if they're travelling/living abroad. Are there other scenarios you're considering? The only thing I might add is an option to remember the language selected. For Wikimedia I can imagine it might also be quite handy to be able to multiply select a few languages for those blessed with more than one! – Peter Bagnall May 22 '12 at 21:29
  • 3
    You are definitely on the right track. For your six languages, I would recommend the follow order: 1) browser settings 2) geo location 3) regional location 4)xxxxxx 5)xxxxx 6) English.

    Always have English on the top six, since this can be fallback option. In my example 1) English, 2) Thai 3) Thai/Chinese 4) xxxxx 5)xxxxx 6) English.

     – Daniel May 23 '12 at 02:55
  • ...continuing. I live in Thailand, but I don't speak Thai. My native language is Portuguese, but I always use English. Sure, you don't want to repeat languages on your top six, so you need to figure out that too. – Daniel May 23 '12 at 03:03
  • If you're going to show the user that you'll want to make sure they're asking to change the language first...I can't imagine being expected to make sense of that every time I use a website for the first time. – Ben Brocka May 23 '12 at 04:49
  • I would agree that your solution seems pretty good. The only thing I would change would be to make the search bar look more like a search box than a header - at present the affordance for search is pretty low. Even after @MyrddinEmrys mentioned this was a feature and I knew it was there, it took me a few seconds to find it. – kastark May 23 '12 at 11:20
  • @MyrddinEmrys This UI will be used in several different contexts: select a language for content, change the UI language, set a different language for input. – Pau Giner May 23 '12 at 11:28
  • @BenBrocka agree, the user is presented a short list and the dialog is only shown after the user access to "more languages". – Pau Giner May 23 '12 at 11:32
  • @PauGiner How do you indicate to the user that there are other possibilities if the first 6 you offer aren't enough? You can't assume they know English to use the phrase 'More Choices'. – Myrddin Emrys May 23 '12 at 15:24
  • @PauGiner One more suggestion to expand on Daniel's point. You could specify the ordering (rank) of languages which aren't already sorted in your top 6 based on estimated/known number of actual speakers. Also I think a standard ellipsis (...) as or part of a link after your top choices is enough to denote there are more. – GotDibbs May 23 '12 at 20:56
  • Maybe its a bit offtopic, but I can't belive anything can be translated to 400 languages. Most popular pages on wiki has a bit more than 100 translations (http://en.wikipedia.org/wiki/Wikipedia). What kind of business task can requre this universal language selector? I see a clear picture of this selector in real life: Frame 1 "Choose language using 1 of 10 possible options", Frame 2: "Sorry, there is no content in selected language". Are you solving real life problem or something abstract? – ADOConnection May 23 '12 at 21:15
  • My answer is don't use jquery and images .just keep the languages in continent base and keep them drop down – Ballu Rocks May 27 '12 at 19:48
  • I didn't recognize the map as clickable. Looks like a decorative element to me. Maybe you should it make less "gray". It would also be helpful to alway show a selection, even if the user scrolls to the region in the textual area. – oefe Sep 30 '13 at 19:09
  • Maybe you should also accept ISO language codes in the search field. – oefe Sep 30 '13 at 19:10
  • @oefe We didn't wanted the map to intrude too much in the way. The animation when scrolling the list, and the hover state (which the mockup does not show) help in the discovery. Regarding ISO codes, they are supported. You can the selector live here: http://thottingal.in/projects/js/jquery.uls/examples/

    Note, that the demo lacks the server-side support required for advanced flexibility in search (search across all language combinations, and ignore typos).

     – Pau Giner Oct 01 '13 at 07:59
  • @PauGiner, I tried it on my iPad, so no hover for me. I'm not sure what you mean with animation. When I scroll down below worldwide, a tiny bar appears below the current content, but this is easily missed. Yeah, language codes work. I had tried country codes instead. I think it might sense to support these as well, as you have country-specific dialects in your list. Also, they might be more familiar than language codes (e.g. from domain names) – oefe Oct 01 '13 at 19:12

2 Answers2

4

It's not a complete answer to your questions, but you should at the very least default to the language specified in the Accept-Language request header. That header will give you the language(s) the user's browser is set up to use (in order of preference).

Kit Grose
  • 15,529
  • 2
  • 37
  • 73
  • I agree, using defaults usually is the quickest way help a user choose with minimal effort. – AsafBO Sep 30 '13 at 06:59
1

The flexible search sounds perfect... except that there's a chance the user can't read your instructions to search for a language, so a map is a great backup. The map should be able to zoom in to a country level, since continents have so many languages.

Cookie Monster
  • 181
  • 4
  • Not all languages are associated with individual countries. Some are associated with contiguous non-country areas. I'm not sure it makes sense to have a country level map. Since you'd then have to go an attribute each language to a country, and any mistakes on your part could easily violate the user's mental model. – Racheet Sep 30 '13 at 08:39
  • Associating a single language with a country might also get you into political trouble e.g Belgium, Canada, India... – oefe Sep 30 '13 at 19:11