Noto
Noto copied to clipboard
alialbaali
Redesign settings screen
The current settings screen is too bloated, and ugly. The new settings screen will be customized by categories (sub-settings), it will include a description for some properties, and it will show currently set value for properties that has various states such as themes, languages, and icons.
I just wanted to add a thing since I've got a suggestion that kinda falls in this one.
How about credit translators in its page that doesn't need translations (e.g. like Infinity)?
For reference, in the "Info" section of the settings:
(Sorry, couldn't change from Italian to English, but i'll translate the important parts)
There's a section "Traduzione [...] Grazie a tutti i contributori" (Translation [...] Thanks to all contributors) where it has a simple list with the translators inside with associated language flag:
This way is much easier to update it and doesn't require a new translation each time a language is added (and less possible string length problems).
This is what I've managed to do. Thoughts? And which version do you like more? I personally like the last one.
I think the first one is better, but with the language written in its appropriate language.
The reason is that with the second one "Language" would then be needed to be translated in their respective language, while with the first one there no need (after all, you are inside the translation info, the meaning should be obvious).
For example, instead of:
- Turkish
- German
- Spanish
- French
It should be (hope I didn't fuck up something):
- Türkçe
- Deutsch
- Español
- Français
And I would add the respective nation flag near the name of the language, just to make it a bit less monotone and/or easier to read (I guess even emoji flags could do the trick).
This is what I've managed to do. Thoughts? And which version do you like more? I personally like the last one.
The last one looks good yeah
Personally having not any categories is not a huge deal since i often dont touch the settings menu i only went through once (sometimes updating vault password but thats it really) i feel like a list worked nicely just going through one by one
I could see it looking fantastic and a new refreshing settings menu sounds great
Any thoughts [...] @uli-on [...]
Re "Redesign of the Settings screen"? I don't see such a bad need. Yes, there's this group of "miscellaneous" stuff at the bottom that still comes labeled as "Settings", but on that whole page there's topical order by groups of themes, there's optical structure by dividers, there's icons as bullet points to not make the whole look like a desert of letters. Honestly: I've seen worse (Fair Email, I'm looking at you).
Re Translators page? I support @SimoneG97's proposal:
- Türkçe: names here
- Deutsch: names here
- Español: names here
- Français: names here etc.
I guess even emoji flags could do the trick
Here's the bad counter-example (too little distance between lines, making the background colour between flags look like additional horizontal stripes of the flags themselves):
Your favorite, Ali, (see below) is too repetitive, IMHO (DRY ;)
@uli-on Just because it isn't that bad, doesn't mean it's good. None of the previous redesigns were actually a "redesign", they were barely any design improvements (adding dividers, changing background color). This redesign will feature some really good changes, such as, Translators, Reading Mode, Vault, etc… will have their own page.
The reasons I'm doing it like this is because:
- Each translator will have their own role.
- Clicking on the translator name, would direct the user to the translator's website.
- There can be multiple translators for a language at the same time.
There will be a beta release, so you can see it in action, before it gets published.
One more thing I'd like to discuss is whether using sentence case or Title Case when displaying text in different layouts.
I don't think so. If it is Title Case for one language, then all the languages should be like that. That way, it is more consistent.
OK, so I understood you properly still. Enforced title case would produce orthographic faults in e.g. German and French languages, while it's appropriate for English. Just my 2 cents.
Which sounds better "Main interface", "Start destination", or something else?
I've been pondering, too, for quite a while how to name it in German. Not an easy one.
From these two I'd prefer "Main interface". What do you think of "Default folder"?
The thing with "Default folder" is that it doesn't signal what it does. Meaning, it could be used for anything. For example, I have already used "Quick note folder", as it is more expressive this way. See #64.
How about this?
Also, should I keep the flag aligned to the end (like in the screenshot), or next to the language?
Instead of the flag, I suggest adding the translation percentage in place of the flag for each language as in Crowdin and including the incomplete languages as Russian, I think this method will motivate users to complete translations into their own languages
Looks good to me, probably better if the flag is aligned next to the language as you suggested.
This is how the General Settings screen looks like on my device.
I see the following issues:
- Wrapped lines cause vertical misalignment if the counterpart on the other column consists of only one line
- Wrapped lines in column 2 become left-aligned
- No hyphenation, existing hyphens are not used as break points, in-word-wrapping on orthographically wrong places
- Distance between columns is too small in case strings would take full column width
- Distance between option switch and its text label is quite tight (can be tested with the "Remember scrolling position" switch in English)
- Repositioned/reused string for theme selection (dark/light etc) repeats the term from column 1 (all languages concerned)
- Don't you think the value should be vertically centered when the option (in first column) is multiline?
- Is right alignment better, or should I move the value to the bottom of the option?
- Hyphenation isn't possible in the UI kit I'm using (Compose). Check this and this.
As for the others, I'm working on them.
1 No, honestly not. Unfortunately, the current implementation creates clutter and visual confusion, because it doesn't take advantage of viewing and reading habits. A line of text serves the eye also as a visual guide from one column to the next one. This should be utilised and it would even remove some visual clutter, as a bonus.
2 That right alignment is one more means that creates clutter. In my last post above I didn't want to bitch about everything that's opposed to reading habits but you explicitly ask me about right-alignment. So: No, please, if you want by all means to stick with a two column arrangement, which is not ideal for small screens in my POV, then please set both columns to be left-aligned, it's much more readable in LTR languages and it can be skimmed quicker. That combined with top(!) alignment (not bottom) creates visual calming. Sorry, the graphic designer in me.
3 Thanks for these links, they make clearer what might be going on and why.
In the line for "Main Interface", the minimum gap between col1 and col2 is (can become) almost as tight as a blank character:
Else: no issues, rather design consistency, where you place icon-sized logos and flags right aligned, but have icons left aligned in the previous screen. The logos/flags might also serve as bullet points and help guiding the eye, while currently the view is constantly jumping from left to right.
The thing is about icons being left/right aligned, is that, some options might not have an icon (such as version, license, credits, etc...).
If I move the icons to the left, the text moves to the right a bit, while the ones without icons would stay to the right. Which is definitely inconsistent.
Take for example this image from the Sync app:
Due to that, there are two possible solutions:
- Make them right aligned. Like how they're currently implemented.
- Make them left aligned, while leaving an empty space in the beginning of the option when it doesn't have an icon.
* Türkçe * Deutsch * Español * Français
From where do I get the translations of the languages like the ones above? Or should I just Google Translate it? Or make the languages translatable and access their localized values from code.
@uli-on @SimoneG97