search

nextcloud / server

☁️ Nextcloud server, a safe home for all your data
https://nextcloud.com
GNU Affero General Public License v3.0
26.69k stars 4k forks source link

[UI/UX] Theming / Appearance and Accessibility management #39278

Open joshtrichards opened 1 year ago

joshtrichards commented 1 year ago

Also known as: Global Theming, Appearance and accessibility, and User Theming

The Theming versus the User Appearance/Accessibility + User Theming stuff is a bit confusing. I mean in terms of:

In the UI we have...

...the Administration->"Theming": (/settings/admin/theming) page:

I'd say the Admin page is actually pretty solid, with only minor potential tweaks (more on that in my proposal list).

Then we have also in the UI...

...the Personal->"Appearance and accessibility" (/settings/user/theming) page:

I have some ideas to make the Personal page clearer (more on that in my proposal list).

Then in the system config.php we have:

I propose we:

The above are some mid-morning thoughts that came together while looking into #39199 and attempting to clarify some of my longstanding confusion over theming/appearance/accessibility management/configuration. I reserve the right to revise this brain dump, but at least now it's recorded (for another time when I - or anyone else - has a better opportunity to dig deeper into actual implementation bits) . :-)

xBelladonna commented 11 months ago

While you are at it, the dyslexia font is helpful and very appreciated, but the font size... it's so much bigger than the regular font that some text get cut off and ellipsized, for example in the navigation sidebar on the left: image

Just... not great: image

The original font size is much more reasonable. OpenDyslexia (if that's what is in use) is Just Bigger than other fonts so toggling the dyslexia font on should also decrease the global font size such that it most closely matches the original size without sacrificing readability. I guess we want to aim for text not to be ellipsized.

Original font for reference: image

jancborchardt commented 3 days ago

@joshtrichards thanks for looking into this! Feedback from my side:

  • Strike the word "theme" from the various "Color/Contrast Modes" included under "Appearance and accessibility" (/settings/user/theming)" page since "theme" is a misnomer there
  • Add a heading above the list of "Color/Contrast Modes" that says... "Color/Contrast Modes" since that's what they really are and since they're entirely independent (from the user's perspective) from the actual admin configured theme

Sounds good, but I would probably still use the individual settings with "mode". So that it says "Dark mode" instead of just "Dark" as that’s nicer when scanning through.

The section heading can be "Color and contrast".

  • Add the heading "User Theming" just above the "Background" section on the *"Appearance and accessibility" (/settings/user/theming)"** page to clarify that's where the user adjustable (if permitted) theme overrides are

I’d say these sections are actually fine. We could add some clarifying info that it will overwrite the admin theming just for you, but I don’t think there is any confusion. But we should move "Primary color" below "Background", since the background sets the primary color automatically initially.

  • Add some clarifying language to the enforce_theme parameter if it is indeed essentially depreciated or, at the very least, equivalent to the theming app's toggle for "Disable user theming"

@juliushaertl @skjnldsv regarding this?

  • Add the ability for the admin to specify a default "Color/Contrast Mode" in the global Theming (with the same set of modes available to choose from that individual users already have)

I disagree on this, as this should be completely up to the individual person, with "Follow system" being the default. If someone prefers to use dark mode everywhere, they should not need to look at Nextcloud in light mode, even if it’s just for the short time to change the setting.

  • Possibly clarify what we mean by "system" when we say "System default theme" on the Personal "Appearance and accessibility" page (I think at the moment "system" here effectively means the user's system not the server since there's no truly globally configurable mode for this... at least until the prior bullet point is also implemented). And, as already noted, this might be better renamed entirely to something along the lines "System default Color/Contrast mode"

Maybe "Follow device setting" instead of "System default theme"? This is more specific and clarifies "device" rather than "system". Technically the last deciding instance is your browser, but I would rather call it "Device" for simplicity.

  • Add a divider between the "Dyslexia font" toggle and the "Color/contrast modes"

Sure!

  • Place a sub-heading like "Additional Accessibility Settings" above the "Dyslexia front" and "Keyboard shortcuts" toggles

Yes, sounds good to group those. They should also be below the modes and above the background picker so it’s very quick to see them.

  • Rename "Administration->Theming" to "Administration->Theming and appearance"

Since I disagree with the proposal of Add the ability for the admin to specify a default "Color/Contrast Mode", I would also keep the simpler language of "Theming" here. Also it is less risk of ellipsizing of the nav in various languages.

@joshtrichards would you like to contribute these things via pull request? :)

jancborchardt commented 3 days ago

While you are at it, the dyslexia font is helpful and very appreciated, but the font size... it's so much bigger than the regular font that some text get cut off and ellipsized, for example in the navigation sidebar on the left:

@xBelladonna sounds very good! Since you already analyzed the issue and probably have a better font size in mind which works well, would you like to open a pull request to fix it? I know @nickvergessen sometimes (or often?) uses the dyslexia font as well, so he might have input too.

nickvergessen commented 3 days ago

I know nickvergessen sometimes (or often?) uses the dyslexia font as well, so he might have input too.

I miss it since I use the Talk desktop client mostly nowadays and we don't have it there yet. But I can confirm, that especially since the last dyslexia font upgrade which brought bigger in-between words spacing, it's a pain. It's also noticable on their homepage: https://opendyslexic.org/ A space is longer than the word "is" which just makes text ellipse sooo much more often. Less a problem for "longer texts" like Talk messages, files comments, text files, etc. But especially in sidebars, tab headers and drop down menus.

I wondered if we should "narrow the spacing" in same areas manually with CSS when Dyslexia is used.

jancborchardt commented 2 days ago

@nickvergessen regarding the spacing I can imagine this is intentional to make it easier to read? So except adjusting the font size to fit that of our general font, I wouldn’t necessarily do anything to change it.

nickvergessen commented 1 day ago