Experimental user sidebar navigation

AI-generated summary

This announcement introduces an experimental user sidebar navigation for Discourse, designed to replace the traditional horizontal profile links with a collapsible, filterable vertical sidebar. awesomerobot explains that this change aims to improve organization and discoverability, noting it can be enabled via /admin/config/upcoming-changes or by joining the design experiments group. Initial feedback highlights several issues: Lilly and twofoursixeight reported missing notification filters (reactions, votes), which were subsequently fixed by awesomerobot.

Criticism primarily focuses on mobile usability, with Jagster and kddkd describing the experience as confusing due to hamburger menu behavior. awesomerobot acknowledges these drawbacks, stating a different approach is needed for small screens. Users also requested UX improvements: one1 suggested reordering “Badges” to the end, while satonotdead advocated for unifying redundant settings submenus. NateDhaliwal proposed a toggle to switch back to the standard sidebar, a feature MDNJ supports as a better alternative to ambiguous “Back” buttons.

Additionally, per1234 questioned the meaning of “experimental,” leading chapoi to clarify that such features may be scrapped if not successful. southpaw requested that custom main sidebar sections remain accessible within Private Messages, and Luna_Mora noted compatibility issues for sites using dropdown navigation rather than sidebars.

We use contextual navigation in various parts of Discourse now (admin, documentation categories, chat, AI conversations)… one place with a lot of navigation we haven’t applied this yet is user profiles.

This is an area where we have quite a few links and the existing horizontal formatting has some downsides. There’s a lot going on here!

The sidebar can help organize this, you can collapse sections, you can filter the links…

Using the sidebar this way isn’t without its own downsides, as it becomes less discoverable on small screens for example… but this is where your feedback can help!

This will become available as an experimental change when you update your Discourse site. An admin can enable it for everyone or for specific groups by visiting /admin/config/upcoming-changes and searching for sidebar user navigation

You can join the design experiments group to try it out here on Meta. Let us know what you think!

17 Likes

reactions seems to be missing when viewing my own notifications

2 Likes

Want to also add i cannot see votes or solved topics in my notifications either due to not being in my sidebar

1 Like

I like it! I’m really against horizontal scrolling interfaces. Far too easy to miss things off screen.

To me, “Filter Links” doesn’t make much sense.

I don’t really think of those as “links”. They are more like menu items. It’s too bad you can’t have a full search/filter for all user settings, but maybe people don’t tweak settings enough to make it worth it.

Personally, I feel like “Badges” are the least important part of a profile, so I’d prefer if it was at the end of the list.

Thanks for working on this. It’s a big improvement.

1 Like

The plugin-added links are back now!

1 Like

Pure pain in mobiles. And in desktops, if/when a user isn’t using the sidebar — like I’m here.

3 Likes

I tweaked the order a bit using the order: X CSS class and it is working here :ok_hand:

I think this attempt is really good. Displaying the categories in the sidebar makes the user profile look very clean and tidy, and grouping the features into a single sidebar is very convenient to use.

However, the mobile experience feels a bit odd, possibly because the same button icons in the same location perform two different functions on different pages.

I can’t quite put my finger on it, but maybe it’s just that I’m not used to it since it’s the first time trying this out.

4 Likes

Yes, agree that these sidebars aren’t great on mobile… it’s an odd experience to replace the hamburger menu contents without seeing the change, I think we’re going to need a different approach to pull the navs together specifically for small screens.

7 Likes

I quite like this new sidebar. Especially the link in the invites section for the redeemed invites, which otherwise can never be found unless you have a direct link.

Is it possible for like a ‘Show normal sidebar’ toggle in there to switch to the normal one so the user can navigate to other pages? Or does that not make much UX sense?

2 Likes

I’ve thought a lot about the general “back” button that has confused our less experienced users, and for now, the only thing I’ve come up with is to improve and unify as much as I can the styles of those “back” buttons (which vary depending on whether they are shown in Docs, Profile, or Chats).

Hopefully, a definitive and more robust solution will come along. I think it’s the only major pending improvement needed in Discourse’s UI/UX at a general level, so it can be used by “the average user” with no friction anymore.

2 Likes

The only thing I don’t like about this is it’s a worse UX experience for those of us who have forums using the dropdown navigation menu rather than the sidebar. :pensive_face: To be able to utilize this effectively we’d need a theme component that creates a separate sidebar, otherwise the content will always be hidden behind a second click/tap on the hamburger menu and we’ve already had some confusion with the Chat sidebar being hidden in that manner. I’d love if there was an option added natively to have a separate sidebar if you’re using the dropdown menu, like how the admin panel’s sidebar is still there and functional regardless of what navigation menu you’re using.

1 Like

I like it, I just hope it will be complemented by a unification of the options shown as submenus. Several of them overlap: profile, profile preferences, profile settings, account.

It is not clear, for both users and administrators, where each option is located. And I think there is a lot of redundancy that could be simplified.

Different options can be unified into more extensive lists (notifications + tracking + ignored; UI + chats + sidebar + emails; account + profile + security + calendar) to avoid so many clicks or taps by seeing the same options on fewer pages.

One thing that continues to complicate our users is that the public view of their profile is different from the one they must access to update it. It’s common for one to be able to update their profile when viewing it, without needing to navigate beyond the list itself (enabled for editing only for the user accessing it and not for others).

1 Like

This may be a fairly unique use case related to our workflow. My role requires that I spend a lot of time in PMs, where the experimental user sidebar is present. I’m finding that I am frequently reaching for links that I’ve added to the customized sections of the main navigation sidebar, and they aren’t there. I need to access the links without navigating away from the PM I’m viewing.

Would it be possible to include the users’ custom sidebar sections below this contextual user sidebar, so someone in a PM could simply scroll down the sidebar to get to their custom links?

2 Likes

I’m wondering what the “experimental” description means.

I’ve been trying to immediately enable the “upcoming changes” (either universally, or initially for a dedicated group depending on the nature of the change) in order to test the change during the period where we still have the option of disabling it if we discover an impactful bug.

And of course I like to make minor contributions to the Discourse project by getting in reports for any bugs we discover during this “early adopter” period of the change’s lifecycle.

However, “experiment” implies to me that the change is not guaranteed to be “upcoming”, but rather has the chance of being scrapped. Experiments are of course great, but I only want to subject my community to changes that are definitely going to be hard rolled out to my forum at some point in the future.

1 Like

That is indeed what it means

2 Likes

In that case, it seems best to experiment with those changes here on Meta and share your experience, so as to only enable experiments that move forward and are decided to be kept or made permanent.

Discussing this in the dedicated topics with the development team and following their progress on GitHub can be revealing in this regard. And thus you could only accept those changes that already appear in alpha or beta, not everyone.

1 Like

The ‘obvious’ solution to me is to have the main preferences page show something like category groups for settings, either like cards with icons, or as as list.

Added to that: a breadcrumb navigation bar on top to always show your position and provide an easy way back whether you’re on mobile or desktop.

1 Like

I’ve been struggling with how to translate this “Back to forum”, as that is not always in line with what’s happening, or what users actually want. Which is to “just show me my normal sidebar please!”. I do like this toggle solution.

1 Like