I’m tackling one of the last items on our 1.8 task list: breaking up the user preferences page into tabs.
Some goals:
Here are some screenshots of what I have so far:
That last section “Site” could probably have a better name. I’m trying to avoid a word like “Other” or “Misc”…
Thoughts? Things you’d like to see?
That looks awesome 
Maybe “interface”?
Any chance of getting either a “plugins” section in the user preferences? Or even better some easy hooks for plugins to register new pages?
I’m personally not against “other” or “misc”. Many sites and programs have an “other” section, and there are some settings that truly do not fit into a category.
This might be out of scope, but has there been any thoughts on adding a search bar like site settings? It would make it easier for site staff to help link someone to the correct preference, and also deal with the fact that using Ctrl+F to find a preference no longer works with the individual tabs.
I’d say it’s out of scope. You’ll be able to give people links to individual tabs in their preferences.
Sounds good, I’ll write up a separate topic with the idea later.
To double check, is this the entire scope of the task? There are many previous topics that had an idea for a user preference, but were rejected (that’s a harsh word, but I’m failing to find a better one) out of concern that they would add to the long list. Are any new preferences part of this work, or will they have to come later?
I’m not adding new preferences as part of this work. We want to break up what we have into small sections.
Looking at the above screenshots, Title does not appear in Account, so I’m assuming it was put in Profile. If so, why is Name part of Account and not Profile?
Would you be able to provide a list of which preferences are on each tab?
It’s getting easier to find the settings! I feel the indentation is a little bit weird. Labels in the main section is right aligned but the section menu is left aligned and have indentation.
Will the Account section be hidden if SSO is enabled and the appropriate SSO overrides X settings are enabled?
Agreed. Labels above input fields could look better.
Good point. Empty sections will need to be hidden.
Mailing list mode (which is suppressed by default on a typical install, isn’t it?) should have some text explaining that the site will email you for every single new post except those you have muted.
We’ll probably tweak copy in a few places here as we go, too. All feedback is welcome at this stage.
A hook for plugins to register new tabs, plus plugin outlets on each of the existing tabs would be 
Just deployed this to one of my sites: thoughts incoming…
On the account tab there is no note regarding SSO. While it should be obvious, it may not be to all users that their email/password isn’t changeable due to that. I’d love something explicit. Having email appear at all seems odd without a SSO note - it’s not an editable field…
Having a lengthy About me causes the Profile tab to become quite lengthy due to the preview. Could the preview be hidden behind a button, or have an “expand me” option? Alternately, About me could open a “normal” dual-pane composer window.
The Dropdown custom field has different sizing that other fields. Text custom fields seem OK:
No header on the Notifications tab:
If there is only one (or zero) Themes, the field should be hidden.
Please avoid numbered lists, or lists in general, it is needless complication in feedback…
Is there a css or other way to exclude one of these tabs? It’s not pressing but the ACCOUNT tab only has one item on it which is the username, not needed in my SSO setup.
Agreeing with @jomaxro about SSO confusion - maybe it would be possible to link across to the sso prefs page (in our case in wordpress) from the ACCOUNTS tab? Or with css display some custom text explaining here where to change the email address and password?
Seems a bit odd that TABS and CATEGORIES is indented. Perhaps a bug that will be fixed?
I’m sure they can be hidden by CSS, but I’m on mobile so I can’t look up the classes.
The indent is intentional as both the tabs and categories “tabs” are for notifications.
this seems weird to me and I am not following. are there other places in discourse where menus are indented like this?
Looks great
Given that we’re no longer bombarding members with long lists of preferences, please take the opportunity to add occasional explanatory text under any options that aren’t obvious.
“Mailing List Mode” - for example - the grey text underneath it explains that it “overrides the activity summary,” but doesn’t actually explain what “Mailing List Mode” is, in practice. [edit: I see @codinghorror also mentions this specific point]
Even as an admin and long-time Discourse user, I’m a bit unclear on the exact implications of some of our settings.
Yes, under Messages, you will have Archive for admins, moderators, and staff that are indented.
There is for all pages:
.user-navigation .preferences-nav .nav-account { display: none; } /* Account */
.user-navigation .preferences-nav .nav-profile { display: none; } /* Profile */
.user-navigation .preferences-nav .nav-emails { display: none; } /* Emails */
.user-navigation .preferences-nav .nav-notifications { display: none; } /* Notifications */
.user-navigation .preferences-nav .nav-categories { display: none; } /* Notiication -> Categories */
.user-navigation .preferences-nav .nav-tags { display: none; } /* Notiication -> Tags */
.user-navigation .preferences-nav .nav-interface { display: none; } /* Interface */
These are good thoughts. We actually use a plugin-outlet above-user-preferences in a plugin. I see this outlet is still there. Here is a way to add text to it (note: it appears in all Profile Preference areas, so you will want to word it accordingly)
You can create a theme component that does the following (in </head>):
<script type='text/x-handlebars' data-template-name='/connectors/above-user-preferences/sso_notice'>
modified contents of connectors/above-user-preferences/sso_notice.hbs file goes here
</script>
I’ve exported it for convenience:
sso-customization.dcstyle.json (596 Bytes)