Language selection more prominent (native/mobile)

[clarabracklo]

Problem

We got feedback that the language selection is not prominent enough while being one of the most important features in the app. We don't really know which is the best solution here so we want to do a user testing.

Possible ideas

• Display additional information in the header (less space, more prominent):
  • Flag (e.g. Germany for German) -> no clear matching for all languages, e.g. German also spoken in Austria and Switzerland
  • Language code (e.g. de for German, ckb for Sorani) -> do all users now the codes? 2 vs. 3 letter codes, special codes such as German simple
  • Full language name (e.g. German) -> less space
  • Just the icon (perhaps replaced by the google translate icon) -> do all users understand it?
• Keep it in the overflow menu/kebab menu -> not prompinent

Related issues

Desktop issue: #2831.

Additional information

See discussion below. Possible designs are shown here

Old Description

I have received feedback from the project "Digital Active Women": Changing the language is one of the most important technical functionalities of our Web App (maybe not so much for the Integreat App as languages are saved?). The button, however, can be a little hard to find and/or identify as the language change button. Not neccesarily a change we need to make, but at least should think about: Could we use text here or any other visible distinguisher to emphasize the language change more?

[dkehne]

We have received a similar feedback from municipality survey #2656

[nikolahoff]

@dkehne @clarabracklo this only concerns the web app, right? Because in the old ticket #2656 Daniel mentioned the same problem in the "app". I don't know if you mean native or web. Because for native the language is presetted from the device settings. So language change is a rare use case normally.

[clarabracklo]

@nikolahoff Initially this feedback came up regarding the mobile app. I have observed that there are quite a few people using their phones in English/German (device settings). I am not sure why that is - maybe wanting to improve the language skills. But they still want to access Integreat in their own language.

[nikolahoff]

Here are the design proposals for Desktop and Mobile Please review @steffenkleinle @dkehne

[dkehne]

I like v2 more than v1. Good drafts!

[steffenkleinle]

I think this is a good proposal for Desktop. Sadly I am not that sure about mobile/native, as space in the header is very limited... Especially if we have long city names, I don't think there is enough space to show the language icon and a two to three letter code. Also I am not sure if everybody knows what less common codes like ckb stand for :see_no_evil:

[nikolahoff]

ok, good point about the limited space. Another option would be to use a flag, because it's also a common and known way to change language. Maybe it's more obvious than the worls icon. See design here

[steffenkleinle]

Thanks for your thoughts and designs. I think the web design v2 (but with an icon and not the flag) is nice and we can implement it. Problems with flags: Languages do not always match with countries and I think its quite hard to use flags for languages without fretting someone. For German this is still relatively easy (even though there is also Switzerland and Austria) but for other languages this gets a lot harder. Probably there is even countries where two languages are mainly spoken...

We talked about this and we thought that maybe another icon could solve this problem to some extent? E.g. youtube, google translate and wikipedia use this icon: Since google translate is probably really well known among our user base, this could make it clearer.

I am not sure if we want to move the icon on mobile out of the sidebar/kebap menu as this issue is mostly about desktop. Maybe we should do a user testing here though.

To summarize:

• Web is fine (I prefer v2 without flags and perhaps the other icon)
• I think we should not use flags
• We can think of changing the icon
• We should evaluate whether the language change needs to be more prominent on mobile (since we have limited space and we don't have real feedback for either)

Perhaps @hauf-toni has another idea here?

[hauf-toni]

@steffenkleinle your considerations are important and sensible, the proposed icon corresponds to best practice in other applications. if the icon is to correspond to the respective language, I would alternatively recommend Language Initials (DE for german, EN for english, etc.) in Bold (font style). both options are great.

[steffenkleinle]

@steffenkleinle your considerations are important and sensible, the proposed icon corresponds to best practice in other applications. if the icon is to correspond to the respective language, I would alternatively recommend Language Initials (DE for german, EN for english, etc.) in Bold (font style). both options are great.

Thanks! Do we know whether the initials of lesser known languages are well known of users, e.g. ckb (Sorani). Maybe this would be a question to be asked in the target group.

[nikolahoff]

I guess this is not really a problem, because when you have chosen the language you know what it stands for. And the menu that pops open for selecting the language has the whole word written.

[hauf-toni]

@nikolahoff @steffenkleinle I agree, it would definitely be necessary to provide both the initials of the language and the written out language.

[steffenkleinle]

I guess this is not really a problem, because when you have chosen the language you know what it stands for.

Hmm not sure about that:

1. Users don't have to "choose" a language, it is initialized from their system language. So it might just be ckb from the start without them knowing what it means.
2. I think the connection from selecting Sorani to it showing ckb is not necessarily clear, I am not sure if we can assume that everybody who selects Sorani knows that ckb is its language code. Especially because there are different languages codes, e.g. for Farsi there is fa and per... https://iso639-3.sil.org/code/per

Therefore my opinion is atm to either a) not change anything for mobile/native except the icon or b) put the (changed) language icon back in the header and out of the overflow menu.

And the menu that pops open for selecting the language has the whole word written.

Agreed, no problem there.

[nikolahoff]

Let's discuss this in our meeting today if we have time or we schedule another meeting.

[nikolahoff]

As discussed in our meeting we develop first the desktop version, which you can find here The mobile version needs a testing before implementing a new solution.

[steffenkleinle]

As discussed in our meeting we develop first the desktop version, which you can find here The mobile version needs a testing before implementing a new solution.

@nikolahoff so we want to keep the current globe icon?

[nikolahoff]

Yes for now until we did the user testing with new icon versions. On desktop there is the language written besides the icon, so it is understandable. Thats why we wanted to develop desktop already and wait with the mobile version after the testing.

[nikolahoff]

FYI: The user testing, Julia and Leonie did showed that 15 of 17 users were able to change language. @steffenkleinle