[UX] Added vertical tabs to clean up the user account edit form.

[laryn]

Description of the need
The current account/user edit page feels rather cluttered.

Proposed solution
Would this be better with vertical tabs rather than a long list of fieldsets?

---

PR by @BWPanda: backdrop/backdrop#2753

[docwilmot]

Yes!

[klonos]

Definitely yes. ...if decided otherwise, just noting that we do support fieldset summaries, so we can collapse those by default, and add those summaries.

[ghost]

Yes please! Consistency FTW 😊

[ghost]

I've made an initial PR that adds existing fieldsets to vertical tabs:

Let me know if I've missed any.

[laryn]

Great @BWPanda!

If you activate a language, the Language Settings could also be a tab:

Personally I think it would be nice to have Status and Roles in the first/open vertical tab as well -- anyone else agree?

[ghost]

Aww, did you choose Estonian just for me? 😊

What should the first vertical tab be called?

[laryn]

Yep, specially for you. 😺

Good question. To get a little bit radical here, what about putting everything else (username, password, email, status, roles, etc.) into a first/default tab called "Account settings"? Is that bad UI for some reason I'm not thinking of? (It seems like it would pull everything up nice and tight on the page).

[klonos]

I am making this a UX task, and proposing next bug release.

[klonos]

...while we're on it, can we please also make the blocked/active radio set more compact (so that there's even less scrolling on that page)? I was thinking either of the following:

• align the 2 options horizontally:
  
• convert them to a single "Active" checkbox (experimented with also changing the label to "Account status" instead of just "Status")
  

Also, merge the "Signature settings" and "Picture" tabs into a single "Personalization" tab. That's what we call these in admin/config/people/settings:

We can also merge "Locale settings" and "Language settings" into a "Language and regional settings" tab:

[ghost]

@klonos Your personalisation and language suggestions are good, but not sure I agree with the blocked/active ones...

If we add those options to a tab as @laryn suggested, that'll mean less vertical space anyway. And I think having a specified 'blocked' option means its obvious what it does, as opposed to simply un-checking 'active' which could be ambiguous...

As for @laryn's suggestion about putting all fields in vertical tabs, I think this has been suggested before/elsewhere (maybe even by me), but rejected as that's not how the UI's supposed to work. I'll see if I can find that issue.

[ghost]

Here you go. @klonos in #3171:

I recall that @jenlampton has serious objections about moving important things into vertical tabs.

He then referenced https://www.drupal.org/docs/develop/user-interface-standards/vertical-tabs which says:

Use when

• You have a group of form elements that are often ignored by the user
  • Metadata elements
  • Elements with good defaults

Don't use it for the main interaction in the form.

[ghost]

#3894 will need to happen before we can add the Status and Roles settings to a fieldset/vertical tab.

[docwilmot]

As for @laryn's suggestion about putting all fields in vertical tabs, I think this has been suggested before/elsewhere (maybe even by me), but rejected as that's not how the UI's supposed to work.
He then referenced https://www.drupal.org/docs/develop/user-interface-standards/vertical-tabs which says:

I think vertical tabs are perfect here for those same reasons in that article: everything there is often ignored and has defaults.

#3894 will need to happen before we can add the Status and Roles settings to a fieldset/vertical tab.

Why group them, why not just give them their own tab each?

I like this issue because then the user edit page wont be that horrible mishmash of fields and pseudo fields. It'll be just custom fields and the vertical fieldset group.

[ghost]

@docwilmot I disagree about putting everything into vertical tabs. For sites without custom User fields, that'll mean there's nothing on the form but vertical tabs, and my understanding of that Drupal docs page is that that's not the idea.

As for making Status and Roles separate tabs, I think that'll make too many tabs, especially with very few form elements in each.

[stpaultim]

I think it's fine if those two concerns are not blockers. We can deal with them in follow-up issues.

[quicksketch]

I left a few comments in the PR: backdrop/backdrop#2753

[quicksketch]

This is the last issue remaining in the 1.23.0 milestone. With the addition of #5747, the situation where only a single fieldset is unnecessarily converted to a vertical tab is now avoided. We still have one more day (end of day, September 1); I think this might still be achievable.

[ghost]

I've committed @herbdool's suggestions (without really looking at them too much, so trusting others to review/approve).

[herbdool]

This looks good to me now. I tested again and still works the same. @quicksketch do you think it could squeak into this release still?

[quicksketch]

@klonos brought up that because this is a UX fix, it's potentially exempt from feature freeze entirely. Either way, I think this is also ready to go and I haven't made the preview release yet, so let's go ahead and pull it in. I merged backdrop/backdrop#2753 into 1.x for 1.23.0! Yay!

backdrop/backdrop@0d6dd2e by @BWPanda, @herbdool, @bugfolder, @laryn, @klonos, @docwilmot, @indigoxela, @olafgrabienski, @stpaultim, @jenlampton, and @quicksketch.

[jenlampton]

Just noting here that this is the first instance of adding vertical tabs to core that break our rule that "everything in a vertical tab can be safely ignored". Path aliases and URL redirects definitely belong in vertical tabs, but by putting things in these tabs that shouldn't be ignored (like the user picture, in particular, but perhaps other things like language setting, and timezone), we'll be breaking people's trust in our interfaces.

I still think this is an improvement for the account page, but we're now on the slippery slope to module_filter madness! wheee.

[klonos]

@jenlampton I have always ignored user account pictures in all Backdrop/Drupal installations - I don't think that it's a feature that shouldn't be ignored. Same for timezone and language. These things are either set-and-forget, or never-set-to-begin-with most of the time.

The only important things in the user profile form are the username/email/password - the rest can be safely ignored, and they are OK to be in vertical tabs I believe.

[docwilmot]

Hey, why dont we use Telemetry to see who's using user pictures?

[klonos]

Hey, why dont we use Telemetry to see who's using user pictures?

😄 😛 ...we could. We can. Is this blocking any issues in our queue currently, where we are stuck on debates of what the current usage is and how a potentially BC-breaking change could affect existing sites?