Add translation status to language selection screen

[1280px]

Transferred from elementary/greeter#743 (misclicked the repo, I am sorry)

Problem

Sometimes users complain about certain locales being incomplete, thinking of them as system-level flaws developers failed to handle (see Reddit). Furthermore, currently the only way for a user to check whether a locale is complete is to use it in Demonstration mode, which some might either only take a brief look at, or skip altogether.

Proposal

1. Store translation status percentage for each supported locale, update once per eOS release
2. When user selects a locale:
   • If translation status for this locale if 90+% finished, do nothing
   • Show light explanatory warning if the locale is <90% finished
   • If the locale is <70% finished, show more severe warning text
   • (the numbers are picked from Weblate colouring scheme and are subject to change)
3. Indicating translation status for locale selection list items too might be a good idea as well, however I can't think of a good design for this

The point of this feature is:

• Preventively warn users about largely incomplete/abandoned locales
• Make sure users understand unfinished system translation does not affect the system performance or stability, and might improve after updating the system
• Potentially engage users in helping translate elementary OS in the chosen language

Prior Art (Optional)

Coming soon!

[seifeldinio]

I took this approach that aims to prevent confusion and enhance the visibility of the system's status.

Mockups

User Feedback Mechanism:

1. Color Coding: Each locale will have a corresponding color-coded icon to indicate the level of translation completeness.
2. Warning Messages: When a user selects a locale, a warning message will be displayed based on the translation status.

👉 Green: 90%+ translated

👉 Yellow: 70%-90% translated

👉 Red: <70% translated

Additionally, the status can be displayed in the selected language for locales that require a second level of selection (e.g., French).

Design Highlights:

• Clear Indicator: The warning icon and text are noticeable but not intrusive.
• Concise Messaging: The message provides clear and essential information.
• Visual Hierarchy: Maintains a clear hierarchy, making the warning easy to notice and understand.
• System Status Visibility: By clearly indicating translation status, we enhance the visibility of the system’s current state, helping users understand and trust the system's performance.

I'd love to hear your thoughts!

[1280px]

@seifeldinio looks good!

What I initially thought of is two pop-ups, one for <90% finished locales and one for <70% finished ones (if the locale is 90%+ finished, just let the user go without additional hesitations), appearing after the locale just was selected (via double-cliking or pressing "Next").

Like this (1 - <70% translated dialog, 2 - <90% translated dialog):

IMO your design is less intrusive and more reactive, but also includes less information (on the other hand, do we need that information, at least shown immediately and not inside some additional information chevron, in the first place?)

[seifeldinio]

@1280px

I like the idea of using dialogs, but I'm just a bit concerned they might interrupt the installation flow.

Since this isn't a critical warning or an irreversible action, we might then just inform users about the system status without disrupting their process.

Regarding the information to display:

1. Maybe there's no need to mention that incomplete translations won’t affect performance. Users initially thought it's a system issue when they saw English words in their selected locale. But if we inform them upfront that the language isn't fully translated, they'll understand it's just incomplete translation, not a system problem.
2. Also maybe no need to include a link to contribute in the installer view. This might further deviate users away from the installation flow and users might not be ready to contribute until they’ve decided to install or try the OS.

Also, we could use a pop-over on hover to display information about specific locales. We can display more information if needed in a dialog when we click on the "Learn more" button. This way the user prompts the dialog actively to learn more, but even if they didn't they also know the status of the locale by just hovering.

Here’s a quick prototype:

demo.mp4

would love to hear your thoughts!