Opened 6 years ago

Closed 6 years ago

#1748 closed improve feature (fixed)

Creating a more user-friendly language chooser

Reported by: abyssin Owned by: shevek
Priority: major Milestone: 1.6
Component: BW Layout Keywords: languages
Cc: leeuwerck@…

Description (last modified by sitatara)

A user reports to the support team: "Well, I think that language chooser is very annoying. I almost cludn't find my own language, not speaking about other"

The way languages are displayed looks nice but indeed some ergonomy might be missing. What about a drop-down list with alphabetic order to decluster things a little bit? This might be part of the general redesign that was talked about somewhere on the forum.


Related ticket: #1852

Attachments (2)

language chooser bug portugues.png (121.3 KB) - added by abyssin 6 years ago.
Portuguese language is displayed multiple times. (The drop-down triangle looks strange on the picture but it’s because of tweaks I did on my browser, nothing to do with ROX.)
frontpagelanguage.png (109.7 KB) - added by dima42 6 years ago.
@shevek: go to alpha.bewelcome.org, switch language to russian. now english is hard to find.

Download all attachments as: .zip

Change History (83)

comment:1 Changed 6 years ago by abyssin

One more user asks for alphabetic listing of languages.

comment:2 Changed 6 years ago by pablobd

  • Priority changed from minor to major
  • Type changed from improve feature to bug

Language list should at least be ordered alphabetically, currently it shows the languages in the order they were added, wich is completely ilogical and useless, this is a plain bug

comment:3 Changed 6 years ago by shevek

The languages are displayed in their own script. So sorting alphabetically is a bit difficult.

So we could sort for the iso 639 language code which probably leads to new problems (like Basque being sorted after English).

If we sort after the English name for that language I'm pretty sure that will fail to help as well.

We should probably reduce the space used at the bottom with more language coming in.

So to have a drop down is a good idea.

Choose your preferred language: [English ▼] If you cannot find it then you can help us translate

comment:4 Changed 6 years ago by pablobd

@shevek: the real language code for basque is "eu" the currently used code is just a made up code, not an ISO one, I dont'n know if there is a bug ticket for this, I will check Edit: there is actually a ticket for it http://trac.bewelcome.org/ticket/1809 :D We should fix that one first and then this one

Last edited 6 years ago by pablobd (previous) (diff)

comment:5 Changed 6 years ago by shevek

#1809 was the reason why I know that Basque would be sorted after English in case we use the iso639 codes :-)

Additionally the non Latin letter languages currently in the database are stored as ܊ etc. Sorting therefore fails complete on the language name.

comment:6 Changed 6 years ago by shevek

Wikipedia sorts the list of languages in the menu on the left side according to the short code. But I support to give alphabetical sorting a try (Euskara (for Basque) sorts just fine. All non roman languages will probably end up at the end of the list.

The dropdown itself is pretty simple as there is already one replacing the quick search bar on the front page.

Only problem I see with the dropdown is that it will only work with Javascript enabled. I just don't like Javascript :)

Last edited 6 years ago by shevek (previous) (diff)

comment:7 Changed 6 years ago by pablobd

+1 for drop down menu, can it be copied from the one in the front page?

comment:8 Changed 6 years ago by shevek

The content is exactly the same as the one from the front page (if not logged in). The code needs a bit of a refactoring to be able to use the dropdown at a different location as well, but that's no problem.

comment:9 Changed 6 years ago by beatnickgr

comment:10 Changed 6 years ago by shevek

Thanks for the link. At least we know now where the current order came from.

comment:11 Changed 6 years ago by beatnickgr

I like the dropdown on the frontpage (before loging in), why dont we do the same on the whole site?

And we could delete the languages from the bottom (it looks ...dirty)

comment:12 Changed 6 years ago by crumbking

  • Type changed from bug to improve feature

comment:13 Changed 6 years ago by sitatara

Yet another member requested an alphabetical sort order. His suggestion:

"In the add language box (which ought to be an autocomplete instead of select box) languages should be displayed in user language (i.e. english) and perhaps the local one in parenthesis. The way it is now it's practically impossible to find a language unless you spend too much effort because they can not be properly sorted and for non latin alphabets, not all users have the ability to write them on their computer, although they can speak it.

IMO the list for user selected profile language as english selection should look like:

  • Czech (čeština) <capitalized č but can't get it now :-)
  • English
  • German (Deutch)
  • Greek (Ελληνικά)

If the user has greek selected:

  • Τσέχικα (čeština)
  • Αγγλικά (English)
  • Γερμανικά (Deutch)
  • Ελληνικά

If the user has Czech selected:

  • čeština
  • Angličtina (English)
  • Německý (Deutch)
  • Řecký (Ελληνικά)"

comment:14 Changed 6 years ago by shevek

via #1809: It was pointed out at the forum that some people might not be able to read in the language they speak, thus language list dropdown should have language name also in English.

comment:15 Changed 6 years ago by mikael

There's one good quality script to help with very long dropdowns. Doesn't require very much work to add it.

Additionally for non-JS users it's possible to add submit button next to dropdown and just hide it with JS.

comment:16 Changed 6 years ago by crumbking

I like the language drop down on mega.co.nz/ while I was reading news about that page. They write in the native language and also in a toolbox in English.

I really like that drop down ;-)

Off topic: Also like the idea with the hidden buttons on that page. Means many links are getting button styles first after hovering over the text links (keeps the page cleaner)

comment:17 Changed 6 years ago by mikael

@crumbking I like that too! It's done with Bootstrap and Twitter has something very similar. We can try to think of something like that for Welen. For ROX it's too much work I guess?

comment:18 Changed 6 years ago by sitatara

Another e-mail about this to the support team: "... to tidy up the list of languages, put them in in alphabetical order, and capitalise their names or not, as appropriate. E.g. It is correct that "italiano" should not be capitalised, but writing "Polski" is incorrect, as it should not be capitalised either, and "polski" is the correct form. Otherwise, all the language names could be listed in the language of the user's interface and collectively capitalised or not depending on the rule of that language. I think this point might be important form the point of view of respecting and valuing other cultures and their languages along with their grammar rules."

comment:19 Changed 6 years ago by sitatara

Once again a user had troubles with our language list (when selecting "spoken languages"). He couldn't find the languages Telugu and Hindi since they are 1. in their original script and 2. there is no alphaetical order.

Why can't we just offer an alphabetically sorted list with language names in the language the user has set as preferred language? This information is already available - when you browse profiles the language names in the list of "spoken languages" shows up in the language you use. Why can't we use the same for the drop-down?

Since this is a recurring issue I really think it's major and should be taken care of soon.

comment:20 Changed 6 years ago by sitatara

  • Description modified (diff)

comment:21 Changed 6 years ago by shevek

Cool, thanks for the info with the translated language names, didn't know that. Should be simple to update the list in the profile editor then.

comment:22 Changed 6 years ago by shevek

  • Milestone changed from unassigned to 1.6-proposed

Adding to release 1.6

comment:23 Changed 6 years ago by shevek

  • Owner set to shevek
  • Status changed from new to assigned

comment:24 follow-up: Changed 6 years ago by shevek

I checked various options and came up with a rather strange solution :-)

The list in the dropdown is now sorted according to the name of the language in the current language (if translated already) but the entries are still shown in their native script. As this wouldn't really help anyone I added tooltips to the languages.

Would be easy to do that the other way round. So the commit shows both options in the footer.

The size of the select was adapted to the size of the rest of the footer.

https://gitorious.org/bewelcome/rox/commit/af60f5be296919e5165b3367680febdff3e8981f

comment:25 Changed 6 years ago by shevek

  • Status changed from assigned to local_testing

comment:26 in reply to: ↑ 24 Changed 6 years ago by crumbking

Replying to shevek:

I checked various options and came up with a rather strange solution :-)

Whatever you try to archive here I don't get it ;-)

The list in the dropdown is now sorted according to the name of the language in the current language (if translated already) but the entries are still shown in their native script. As this wouldn't really help anyone I added tooltips to the languages.

Would be easy to do that the other way round. So the commit shows both options in the footer.

The size of the select was adapted to the size of the rest of the footer.

https://gitorious.org/bewelcome/rox/commit/af60f5be296919e5165b3367680febdff3e8981f

Second dropdown to Russian: Russian is on top and than it starts with a. Why that? Should we not show the word in the native language and than in English in the tooltip?

All language names translated in all languages seems to me not very usual. (Could you show me a page who do it in this way?)

comment:27 Changed 6 years ago by shevek

@crumbking: Well, as I don't try to archive anything that's fine ;-)

Several people (on the forum and in support tickets) suggested to show the native name and the translation and sort by the translated name.

If we do that the drop down gets pretty big and breaks the header for sure.

That Russian is on the top is due to the language table. The content there looks like this "&#2100...". That is something to be fixed with #1809.

Obviously there is a need to do a translation of all languages into other languages as there is a whole working group about this: http://cldr.unicode.org/translation/language-names

comment:28 Changed 6 years ago by shevek

So we have at least 6 different language selections.

  • The dropdown in the top which is only visible on the public startpage.
  • The list at the bottom of all pages.
  • The list of languages in preferences to select your preferred language.
  • The list used to add new profile translations.
  • The drop down to select your spoken (and signed) languages on edit profile.
  • For a forum post there is a list to decide which language the post is in.

The dropdown on the public startpage can't get wider so we should keep the native names but show a tooltip in the current language so that it is easier to figure which language it is (if you speak the current one). Sorting there could still be by number of speakers (needs to be updated).

The list at the bottom and the one in preferences should show the same content. To set a preferred language for the UI which isn't yet translated isn't necessary. I'd prefer to move the list on the bottom into a dropdown.

New profile translation can be done in any language except for sign languages. So this list should show all languages.

On edit profile the spoken and signed languages should be the complete list of languages.

Finally the forum post languages should be the same as the one in the footer and the preferences as the site will switch to that language if you click on the language code in the post.

Which leaves the question how to organize the dropdowns to make it easy to find your language.

The code currently on develop shows three different ways to do it:

The two different dropdowns in the footer and the dropdown on /mypreferences.

Which one is the best?

comment:29 Changed 6 years ago by crumbking

Okay could we add a layoutbit to re-use it. I would like to show a js modal to show in the footer and the top menu. As a non-js version we should show the simple drop-downs as shown in the preferences.

comment:30 Changed 6 years ago by shevek

What's js modal? If it is what I believe I don't like it :)

Regarding layoutbits: I'd rather not change old code too much...

comment:31 Changed 6 years ago by midsch

I like the dropdown on /mypreferences most (I've used it while testing #1852)

comment:32 Changed 6 years ago by shevek

I go for the "TranslatedName? (NativeName?)" version then.

Commit: https://gitorious.org/bewelcome/rox/commit/6b131a0337606054654736ce668183b180b67a2a

Please make sure to run the SQL attached to #1809 as this will fail otherwise.

comment:33 Changed 6 years ago by shevek

Now all language dropdown show "TranslatedName (NativeName)" if appropiate (no native name for the sign languages of course).

Updated the layout of the profile translation section a bit.

The forum edit drop down now has opt groups to show the default language, the UI language (if not the default) the current language (if not any of the former) and all languages.

Commit: https://gitorious.org/bewelcome/rox/commit/14dc8499f939b57ac34dda3465c1441e83eb7fdb

comment:34 Changed 6 years ago by shevek

Updated to be able to handle languages that are only spoken but not written (Cantonese, Mandarin): https://gitorious.org/bewelcome/rox/commit/1263fba6c65b4305ab07904e62cf03dd40a792e8

Please make sure to update DB from scratch with the SQL attached to #1809.

comment:35 Changed 6 years ago by crumbking

  • Footer: Works, just would give some space between the dropdown and the translation links for translators (Would change them to buttons anyway as you have a hard time on touch screens to get those links ;-) Also help us translate should be a link to the translator group.
  • opt groups should be translatable. Nobody will understand what is a UI language geeky ;-)

in general works quite well...

comment:36 follow-up: Changed 6 years ago by shevek

@footer: Fell free to move stuff around and add fancy buttons :-)

My idea was to use the texts that we already have above the languages list. So that would mean 'Help us translate' would point to the Wiki as it does now.

@opt groups: I forgot to add a flushBuffer(). Now they are translatable (and fixed a bug that broke the forum at the same time).

Commit: https://gitorious.org/bewelcome/rox/commit/af8172b817451a5e891fddc07548c96192c7eded

Last edited 6 years ago by shevek (previous) (diff)

comment:37 Changed 6 years ago by shevek

Added a language drop down on adminword.php. So that you can only choose from your assigned languages list (avoiding confusion with short codes).

Commit: https://gitorious.org/bewelcome/rox/commit/015699dc418135ba9d8c20fd47faa69a9d1ca03d

comment:38 in reply to: ↑ 36 Changed 6 years ago by crumbking

Replying to shevek:

@footer: Fell free to move stuff around and add fancy buttons :-)

My idea was to use the texts that we already have above the languages list. So that would mean 'Help us translate' would point to the Wiki as it does now.

+ 1

You could use the translation of the main menu language chooser so we don't need to translate that in the footer again.

comment:39 follow-up: Changed 6 years ago by shevek

Which main menu language chooser do you mean? The one on the public startpage? That would show 'Languages:'. Unfortunately we can't simply reuse the translated text as it needs to be split, so that's something only the translators can do.

comment:40 in reply to: ↑ 39 ; follow-up: Changed 6 years ago by crumbking

Replying to shevek:

Which main menu language chooser do you mean? The one on the public startpage?

Yes

That would show 'Languages:'. Unfortunately we can't simply reuse the translated text as it needs to be >split, so that's something only the translators can do.

I'm not sure I understand what you mean. I mean the label before the dropdown. So reusing the word code "Language".

comment:41 Changed 6 years ago by shevek

Found another language selector (in the moderator edit): https://gitorious.org/bewelcome/rox/commit/64b33e3cc0356ef890176bfc10039099eca4e809

Added an empty value to the admin words language drop down to keep the old workflow: https://gitorious.org/bewelcome/rox/commit/a1d2d33beb446cd0af2f8342b820e03bbcc686b1

comment:42 in reply to: ↑ 40 Changed 6 years ago by shevek

Replying to crumbking:

I'm not sure I understand what you mean. I mean the label before the dropdown. So reusing the word code "Language".

Now you lost me. First you said that you want to have a link to the translation wiki (as of now) and now you want to reuse the 'Language' word code. Could you maybe just post an image?

comment:43 Changed 6 years ago by shevek

I updated the footer pushing the language drop down to the right.

Looks like this

Languages: [English (English) `´] Help us translate!

Commit: https://gitorious.org/bewelcome/rox/commit/e50760aebad1f54eeb9657c7f97530adacc2b972

comment:44 Changed 6 years ago by crumbking

Yeah good idea. But only floating will break the layout in some languages (check Russian, Dutch)

Gimme a second and I provide a fix.

comment:45 Changed 6 years ago by crumbking

BTW: There is some output after adding a translation in admin words with Finnish rights:

Your scope is for: Finnish (fi) Array ( [code] => FooterHelpUsTranslate? [donottranslate] => no [TranslationPriority?] => 5 [Sentence] => %sHelp us to translate in Finnish!%s [lang] => fi [DOACTION] => Submit ) FooterHelpUsTranslate? added successfully (IdWord?=#59767)

Would expect something like "Your scope is for Finnish (fi): Successfully added the translation for FooterHelpUsTranslate?."

comment:47 follow-up: Changed 6 years ago by shevek

Actually I was always wondering why we kept the footer there. So please go ahead after fixing the right hand side of the footer :-)

Both rows should be in columns I'd say as 'Help us translate' isn't as far right as 'running on...'.

comment:48 in reply to: ↑ 47 Changed 6 years ago by crumbking

Replying to shevek:

Actually I was always wondering why we kept the footer there. So please go ahead after fixing the right hand side of the footer :-)

Both rows should be in columns I'd say as 'Help us translate' isn't as far right as 'running on...'.

Fixed

Okay I tried the hackish way but don't work as all links will get a bw/admin/about and won't work.

We really need to port the tool to /admin/ but that's another ticket. Leave adminwords in peace ;-)

comment:49 Changed 6 years ago by crumbking

  • Status changed from local_testing to to_alpha

comment:50 Changed 6 years ago by shevek

  • Status changed from to_alpha to testing

Changed 6 years ago by abyssin

Portuguese language is displayed multiple times. (The drop-down triangle looks strange on the picture but it’s because of tweaks I did on my browser, nothing to do with ROX.)

comment:51 Changed 6 years ago by abyssin

There seems to be a bug with Portuguese language. It is displayed multiple times, both in French and Swedish (I didn’t test other languages). I attached a picture.

(The drop-down triangle looks strange on the picture but it’s because of tweaks I did on my browser, nothing to do with ROX.)

Portuguese language is displayed multiple times.  (The drop-down triangle looks strange on the picture but it’s because of tweaks I did on my browser, nothing to do with ROX.)

comment:52 Changed 6 years ago by shevek

Traditional Chinese is doubled as well. The selected language code is the same for the duplicates so I guess it should be an easy fix. Thanks for reporting.

comment:53 Changed 6 years ago by crumbking

The startpage is broken in IE8 on alpha. There must be an issue in the languages dropdowns.

Check also: http://validator.w3.org/check?verbose=1&uri=http%3a%2f%2falpha.bewelcome.org%2f

comment:54 Changed 6 years ago by shevek

There are spurious " at the end of each option. The problem is here: https://gitorious.org/bewelcome/rox/blobs/develop/build/rox/templates/_languageselector.helper.php#line60

Could you just remove the " and push it? (That fixes both drop downs.)

Last edited 6 years ago by shevek (previous) (diff)

comment:55 Changed 6 years ago by crumbking

Nope I'm on at work, sorry :-)

comment:56 Changed 6 years ago by shevek

Me, too :-)

comment:58 Changed 6 years ago by shevek

Fixing the dropdown on adminword when the languages are separated by ';' and not by ',': https://www.gitorious.org/bewelcome/rox/commit/eb5f4aec879bef6d29d3028a707595bd441fcb05

comment:60 follow-up: Changed 6 years ago by dima42

if i switch the language in "my preferences" from english to russian, the next time i load the page the languages are out of order (english has taken the place of russian)

comment:61 follow-up: Changed 6 years ago by dima42

also, on alpha.bewelcome.org, if the browser is not wide enough the language dropdown goes on the second row, not sure if you want that or not.

comment:62 Changed 6 years ago by abyssin

there’s a space in excess between some translated languages and the second parenthesis, like Croatian that gives “(Hrvatski )”: “(Hrvatski_)” instead of “(Hrvatski)”. also the case for Hindi, Breton, Irish, Icelandic, Urdu, Slovak, Persian and Swahili.

comment:64 Changed 6 years ago by shevek

Deployed on alpha please check again.

comment:65 Changed 6 years ago by abyssin

Brazilian Portuguese is still displayed two times in French. One is “Portugais brésilien (brezhoneg)” and the other is “Portugais(br) (português (br))”.

comment:66 Changed 6 years ago by shevek

Well, I should have expected that :-) Just translate it to the right name for Breton in French.

comment:67 follow-up: Changed 6 years ago by crumbking

  • No html for translators please. They are not geeks like we are ;-) So "Help us translate" ->Add 2 paramters for the link to the wordcode. Check Dutch - translators don't expect to write html and simply ignore it.

comment:68 in reply to: ↑ 61 ; follow-up: Changed 6 years ago by crumbking

Replying to dima42:

also, on alpha.bewelcome.org, if the browser is not wide enough the language dropdown goes on the second row, not sure if you want that or not.

@dim42: Which dropdown? Footer or header? Which language? I can't reproduce that.

comment:69 Changed 6 years ago by crumbking

Well I'm not sure I fully understand the usability.

I surf in Dutch. Than I wan't to see the page in German. I see in the language list: Duits (Deutsch). Would be the pair "Language (Dutch) Translation (English translation)" more useful?

On the other hand why would I switch to German if I don't understand the word "Deutsch" ?

comment:70 Changed 6 years ago by shevek

Dima likely means the dropdown on preferences which gets too big for the 1st column.

Regarding usability. The aim of the change is to have a sorted list that is accessible to everyone; the only way to get that was to use 'Translation (Native Language)'. If you happen to stumble on a Dutch BW site (like in an internet cafe with a Dutch OS or browser) you would still be able to find your language even if you don't understand Dutch.

On the other hand, if you speak a language but don't write it, you likely know the name of the language in at least one language you write so you can still select it from.

comment:71 in reply to: ↑ 60 ; follow-up: Changed 6 years ago by shevek

if i switch the language in "my preferences" from english to russian, the next time i load the page the languages are out of order (english has taken the place of russian)

Without saving first? That's not surprising then. As it would just grab the content of the database again.

comment:72 in reply to: ↑ 68 Changed 6 years ago by dima42

Replying to crumbking:

Replying to dima42:

also, on alpha.bewelcome.org, if the browser is not wide enough the language dropdown goes on the second row, not sure if you want that or not.

@dim42: Which dropdown? Footer or header? Which language? I can't reproduce that.

I can't reproduce it anymore either. It used to be the header one, but I've tried all my browsers/platforms and it works fine now.

Changed 6 years ago by dima42

@shevek: go to alpha.bewelcome.org, switch language to russian. now english is hard to find.

comment:73 in reply to: ↑ 71 Changed 6 years ago by dima42

Replying to shevek:

if i switch the language in "my preferences" from english to russian, the next time i load the page the languages are out of order (english has taken the place of russian)

Without saving first? That's not surprising then. As it would just grab the content of the database again.

seems to be not just in preferences (see above attachment). and it persists even if you do save.

comment:74 Changed 6 years ago by dima42

just looked at this a little more; the issue will go away if the translations are done. (it's due to the fact that we're using two different alphabets.)

at the least, we should sort the native alphabet above the english one (since the common language's names are more likely to have translations)

comment:75 Changed 6 years ago by shevek

I was about to post that but couldn't as you updated the ticket at the same time.

Regarding sorting: I have no idea how to determine that.

comment:76 in reply to: ↑ 67 Changed 6 years ago by crumbking

Replying to crumbking:

  • No html for translators please. They are not geeks like we are ;-) So "Help us translate" ->Add 2 paramters for the link to the wordcode. Check Dutch - translators don't expect to write html and simply ignore it.

After checking the code: English version was wrong. Fixed that in admin words ;-)

comment:77 Changed 6 years ago by shevek

  • Status changed from testing to needs_work

There was an issue with the language dropdown in the footer when you used it to switch on a members page (and likely every page other than main).

Commit: https://gitorious.org/bewelcome/rox/commit/aae354f2282e84fc82e63348b4ffcda159922bbf

comment:78 Changed 6 years ago by shevek

  • Status changed from needs_work to to_alpha

comment:79 Changed 6 years ago by shevek

  • Status changed from to_alpha to testing

comment:80 Changed 6 years ago by midsch

alpha / Chromium (Ubuntu) -> switched to all kind of languages on different pages and it works for me.

comment:81 Changed 6 years ago by shevek

  • Resolution set to fixed
  • Status changed from testing to closed

Closed as fixed then.

Last edited 6 years ago by shevek (previous) (diff)
Note: See TracTickets for help on using tickets.