Improve personal settings layout

[marcoambrosini]

• Resolves: #

Summary

One column layout regardless of the width, like in other settings sections. Currently, it's centered, but it can also be moved to the left like in other sections. I just thought it looked better centered.
I think that this is a massive improvement in clarity and usability of this page, and a very low-hanging fruit too.
There's still a lot that can be done, but I think this is a step in the right direction.

Before

Screencast.from.2023-11-24.10-45-10.webm

After

Screencast.from.2023-11-24.11-58-26.webm

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[marcoambrosini]

/compile amend /

[szaimen]

I like it and looks good from the screenrecording 👍
But didnt test

[jancborchardt]

This seems a bit extreme towards the other side, no? The information density is very low and the input fields / selects are uncharacteristically wide.

It would make sense to have a 2-column interface, with avatar, profile and groups in the left column (like now) and all the input field things in the right column. That would be more condensed while at the same time not strangely wide.

(Another issue with the layout or rather the UX is this whole "Profile visibility" section on the bottom which basically duplicates all the fields above. It would be great if we can combine that as well – but should be a separate concern of course.)

[marcoambrosini]

@jancborchardt how would the left column behave on scroll?

If the concern is the width of the input, we can narrow the columns. Most other settings pages are one column too.
As per the density, I think that the problem in the screenshot above is the avatar size: reducing it will also improve things a lot.

[nimishavijay]

Agreed that the width is a lot. I found a possibly useful (but very old) wireframe from when we were thinking about profile and its settings:

Some ideas to reduce the width based on that screenshot:

• Moving the scope from being an button next to the label to the end of the input field reduces the width of the input fields.
• We could also make that icon-only button to an icon+text button, which also makes the meaning clearer
• If we find a way to also move the profile visibility setting for the relevant fields to the end, the input field would be even smaller

[marcoambrosini]

I like the idea of having everything in one line, but I think that since this already improves things a lot, we should merge and then iterate over the actual design.
We can arbitrarily reduce the width as we see fit without having to justify the empty space, as long as the layout improves the user experience.

Ref: google settings

[jancborchardt]

I think that since this already improves things a lot, we should merge and then iterate over the actual design.

@marcoambrosini I disagree on this – as said this goes too far in the other extreme direction. 2 columns would be the proper fix.

how would the left column behave on scroll?

It can just scroll up and out of view, no need for stickyness there for now.

@nimishavijay nice on the mockup indeed! Great also since this is the start of a new cycle, this could go in as an immediate follow-up for this.

[marcoambrosini]

@jancborchardt do you mean like this? I think it's worse than 1 column, especially given that when we scrolled down it's still 1 column, just awkwardly placed on the screen.

Screencast.from.2023-12-19.10-59-57.webm

[marcoambrosini]

--> invert and align to the left

[jancborchardt]

@marcoambrosini another point: "Language" and "Locale" can move to the other column as they are personal (more like group memberships and quota usage) and don’t really fit with the others which are profile fields.

[marcoambrosini]

Current screenshot

Solved

[marcoambrosini]

/compile amend/

[Fenn-CS]

In this two column design suggested:

• It would make sense if the column that contains the profile picture is left aligned like in the original design while the rest of the columns is used to hold the other inputs. (20:80 percent ratio)
• The left column should not scroll? (on large screens)

REF:

Screencast.from.2023-12-19.10-59-57.webm

---

My thoughts

[marcoambrosini]

@Fenn-CS it needs to scroll because with everything we added it's unlikely to fit in the height of the screen. The profile picture is on the right because otherwise when that column is scrolled away, the other column would be in an odd position: not at the center of the screen and not left aligned either.

Changed

[szaimen]

Great, looks much better layout-wise :)
Though I wonder is it expected that each section has a different width and aligning now?
See