System Settings inconsistency in page design and how to fix it

Brainstorm
1

Yes, this is another topic on the design in KDE apps, but unlike many others, I would like to bring up concrete examples and start a discussion on the way to solve this.

Of course, maybe the solution to the following already exists and is being implemented. But I am not aware of it at the point of writing this.

Ok, so the main issue I have with consistency in System Settings app is the way pages and options in it are aligned (or misaligned) and how they scale with the window size. It is all over the place, so lets look at some examples.

Example #1

This is a quick settings page, which is one of the more recently designed pages. Overall, its a nice looking design, with Top Horizontal alignment, and a Middle vertical alignment. Additionally its aligned vertically so that the buttons (options) all begin at the same point, and has a clear right margin where all the buttons, sliders and text end. Its visually quite appealing. The only problem with this page (any most others in the System Settings) is when you put System Settings in fullscreen mode. The UI does not scale, so you get something like this:

Screenshot_20251017_131518
Screenshot_20251017_1315182278×1357 105 KB

Now, I hope everyone would agree that this is anything but appealing. The entire functional part of the page is around 10% of the page, with 90% being empty space.

Proposed fix #1
Is it possible to scale the UI elements (and font) to the window size, so the ration of usable to empty space remains the same? Im not sure its the best fix, but cant be worse than this :slight_smile:

Example #2
Accessibility subpages are kind of a mess of alignment. Its a bit difficult to show here with pictures, so I would recommend you go to the Accessibility page and just quickly change between subpages, and take note of where the alignment is. Unfortunately as new user here, I can only embed 1 figure, so I would ask you to go check it out yourself.

These kind of inconsistencies are appearing in the entire System Settings, not just Accessibility page. But Accessibility page does give a good example as every subpage has its own alignment :slight_smile:

Proposed Fix #2
Align all the pages to Middle Vertical. More precisely, align to the button beginning. So that all buttons begin at the same vertical position. Additionally, add a clear right margin so that all the text, slides and buttons end at the same time.

Some other questions for discussion:
Would it maybe be better to switch to Middle Horizontal Alignment, instead of Top? This would make it more symmetrical. The only problem are pages with only 1 option like Screen Reader and Shake Cursos subpages. Could these not be moved somewhere to avoid having an entire subpage just for 1 option?

There are more stuff to talk about when it comes to System Settings UI design, but I would like to keep this discussion limited to Alignment and Scaling of the pages, so we dont lose focus.

2

Trying to add some figures in the comments, as I couldnt in the main post.

image
image766×942 70 KB

3

image
image750×919 74.2 KB

4

Screenshot_20251017_132146
Screenshot_20251017_1321461057×645 27.6 KB

This one is not even aligned vertically middle :slight_smile:

5

The position of that middle section actually is supposed to change IIRC.

That is a Kirigami.FormLayout. It adjusts its column widths to match the text while making it centered so that you have text in full in most cases, which is important for languages with longer lines like Portuguese or German.

If you pay close attention you’ll notice that all pages using that layout lack any ellision and rarely ever wrap, even when you open System Settings with LANGUAGE=pt_BR.UTF-8 or LANGUAGE=de_DE.UTF-8 (maybe it was LANG, I don’t recall).

6

That one is actually an oversight :grinning_cat: should be easy to fix even.

7

Honestly, I didnt consider problems with other languages. Still, I think there should be a better solution than what is currently in place. Maybe text wrapping is not such a bad idea in those cases?

Or, what would take a lot more work, change the way these options are displayed. Something similar to what is used in Sound page or in Desktop Effects. So the entire row is a “button”. This would scale much better with the fullscreen as well. But again, this is a lot more work.

Screenshot_20251017_173105
Screenshot_20251017_173105863×607 62.1 KB

8

Even if you were to align the divide between labels and controls to a guide line that’s always in the same place no matter the page, you’d have two other problems in addition to ellision/wrapping:

  • it would look really off when resizing the window or under smaller resolutions, as one side would clearly have more margins than the other
  • you’d end up with two columns which always have inconsistent sizes anyway

That is just a custom QtQuick ListView. It requires a model (which you really don’t want to do for every single configuration page) and it reproduces the same control repeatedly with different contents. It’s not suited for configuration pages since those usually have different controls that are adapted to the task at hand, so it’s only used for, well, actual lists with optional extra checkboxes/buttons.

There’s some discussion on whether it would be beneficial to move away from FormLayout for System Settings elsewhere on Invent (maybe someone from the VDG will chime in and mention it). In the end it’s a matter of balancing whether it is actually worth the effort to switch the HIG and the entirety of the configuration pages out there to something else (and have someone do the work), doing that purely because “columns in different pages are not aligned to each other” doesn’t seem like enough reason IMHO.

The design that is most likely to supersede it is probably the Kirigami Addons FormCard, as that is already being used by some KDE applications.

9

Lots of accessibility pages are not even translated into German (Plasma 6.3.6).

But what I got into mind:
Currently it takes the whole entry and place it in the mid, no matter where the middle-line would be. That is fine as long as there is not enough space left and right. But you can make the window larger and at some point you have enough space to align the middle line.

I agree that switching between pages look kinda strange with jumping lines to left and right. Maybe the better approach would be to align everything as long as there is enough space and once space is too little, the box moves into the direction where it has more space to not wrap it. Wrapping is still available at the end, if there is really no space left (which also “breaks” the design, because not all pages get wrapped at same point).