Language selection more prominent (native/mobile)

clarabracklo commented 8 months ago

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 commented 5 months ago

We have received a similar feedback from municipality survey #2656

nikolahoff commented 2 months ago

@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 commented 2 months ago

@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 commented 1 month ago

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

dkehne commented 1 month ago

I like v2 more than v1. Good drafts!

steffenkleinle commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

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

steffenkleinle commented 1 month ago

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:

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.
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 commented 1 month ago

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

nikolahoff commented 3 weeks ago

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 commented 3 weeks ago

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 commented 2 weeks ago

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.

digitalfabrik / integreat-app