Securedrop: i8n language menu

[toast]

i8n language menu

Description

A dropdown menu defaulted to the language set by the journalist org on installation. This keeps the main content area free from the switching language info; it remains focused on a single task - submitting documents.

This should simplify the interface for the majority of sources; assuming that most sources use a journalist org in their own language. For the situation where I'm an English speaking source submitting documents to Süddeutsche Zeitung then it will be a little harder to find the language switcher since it will say 'Deutsch'. The flag helps with this - makes it more findable.

Mobile mockup EN

Mobile mockup DE

Desktop mockup

[redshiftzero]

@toast this is awesome! :clap:. This selector is much cleaner and I love the flag to help sources find their preferred language.

[ghost]

Great ! So happy to have a nice display :-) Do you know where to find a list of two letter codes for countries ? Or do you propose we use the sandart ISO codes ? I wonder if that would be good for chinese and arabic because they would show as AR and CN. Maybe people are used to that already ? I honestly never paid attention to this aspect when visiting web sites in the past.

[toast]

Yes, good point. Languages have their own 2 letter ISO codes so we should use those rather than the country codes. For example, EN instead of US, ZH instead of CN (or ideally 中文 if it's possible to make an exception in that case; since it is two characters length anyway).

https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes

Sadly language flags don't exist so we get into the somewhat contentious territory of e.g. choosing a country flag for a language or another representative symbol, or even creating/adapting a symbol to represent that language. For example, in #2569 , for Arabic I actually used the flag of Islam which is also not right since there are plenty of Christians and others who speak arabic, but it is possibly most recognisable as an association. The tradeoff I've made is that scannability of the flag is more important than upsetting people politically or religiously, this may be a mistake. It would be good to get feedback from arabic speakers. I'll try to do a bit more reading around this subject. Thankfully changing the flag later is pretty straightforward, so we can iterate on this.

[huertanix]

I also would prefer to see country codes instead of flags.

[ghost]

@toast these flags look good and it would be a pity to not use them. I get the the point about using country flags to represent a language. No doubt people from Quebec and all other french speaking countries would at least be slightly disappointed to see the flag of France used instead of theirs.

[toast]

@huertanix and why is that? I'm not being rude, just genuinely interested to have another data point and concerned that I might have missed an important perspective e.g. security or something else.

I think that from a UX point of view both language code (not country code) and some kind of symbol are needed.

Whether that symbol is a flag or another symbol such as a globe is arguable. My feeling is that a flag is more findable than alternatives even if it risks irritating people.

Here's my attempt to empathise...as a source you're in this stressful situation:

• You're trying to minimise the time you spend out in public (in an internet cafe or library) because you're worrying about visual identification and other risks
• You're using tails from a USB you've brought or using other unfamiliar tools like Tor, and encrypting files on the terminal
• You possibly have other storage devices that you're going to try to plug in to the computer without the internet cafe owner asking you what you're up to

...all of that is on your mind and more. And then you launch Tor and type the onion link of the news agency securedrop instance. Let's say you're an Arabic speaker and you're submitting to Süddeutsche Zeitung but you don't speak German. The whole screen makes no sense, so whilst feeling stressed and with your mind on multiple things, you try to quickly identify the language picker from all the strange text on the page. You see a flag (the german flag) and you click on it to investigate if this is a language picker. You _see a number of different flags in there and feel more confident_ that this is indeed a language picker. You find Arabic by scanning the flags and text in the list. The the fact that it has the flag of Islam next to the word العربية and you're a Christian will probably not upset you very much at this point given how stressed you are about completing your task and submitting the documents.

[ghost]

@toast this makes sense and you have me convinced. Unless our kind leader @redshiftzero objects let's keep flags and deal with irritated users when and if they complain.

[huertanix]

@toast No worries, glad to share my thoughts in detail.

From an accessibility standpoint:

My colleague from a11nyc (an accessibility meetup group here in NYC) recommends just having a whole language name spelled out (not codes, as I originally was thinking would be preferable) in a list, minus the need to use a menu. This is easier to immediately spot and click on and faster on screen-readers (although I'm not sure how accessibility factors into the source use cases, and this might be part of a larger separate discussion). Mobile screens present a bit of a challenge since eventually there will be more translations and screen space may become more of an issue.

From a geopolitics standpoint:

As was mentioned elsewhere in the discussion, there's a lot of baggage in the history behind between the differences of a language's origin and which countries end up speaking it. e.g. someone in India or Ireland having to poke around for a UK flag, having every Canadian by royal decree make snarky comments about a US flag representing English, and some of the other examples discussed. This sort of consideration tends to matter much more in design elements around branding but worth taking into consideration in the little details too once our user base expands beyond the US, Canada, Norway and the UK.

Aside from cultural sensibilities, languages can have different dialects which can complicate how they're represented. e.g. if we were to get a Creole or Navajo translation, a regional dialect of a language from elsewhere or include a number of languages only spoken within one country. We don't have this problem yet, but it may pop up in the future, so I figure it's something to keep in mind.

[ghost]

@huertanix we are at a very interesting point in the discussion and it would be great that it continues. I am going to merge @toast pull request but I would like to clarify that this is not to be interpreted as an abrupt conclusion from someone who knows little about UX (that's me ;-). The merge is intended to move the technical part of the change into the code and the actual display is (and will always be) open for discussion.