New sidebar experiment (Sidebar Feng Shui)

We are running an experiment on meta that applies some tweaks to the sidebar design to create a more spacious and serene layout. By increasing the spacing between elements, and optimising padding and margins, we’re aiming for a cleaner and more organised appearance, however at the cost of more elements potentially disappearing beneath the fold.

Before

After

Nothing functional has changed, only visually you might need a minute to adjust.

25 Likes

Liking this a lot.


Though, what this makes evident in chat on desktop is that if you’re part of many channels, it’s quite a bit of scrolling to see any new :large_blue_circle: unread messages.

5 Likes

Yes for sure, at some point it starts to make sense to use the forum/chat switcher when using fullscreen chat I think. This design def brings you to that point faster.

2 Likes

Too spacy. Matter of taste, though.

7 Likes

It’s not only a matter of taste, but probably also of screen size.

On my tablet, I usually collapse most of the sections, so I can still see when the person to whom I have sent a chat message is online in chat. Therefore, the DMs section has to be visible. But I also use the top section a lot, so scrolling to the bottom once does not fix it.

As you can see, even if all sections are collapsed, it doesn’t work to see DMs and the top section with the additional space, whereas I was had space to open some sections before.

That is also the reason why I don’t use the chat sidebar. The chat button needs a lot of space

9 Likes

Love this :heart: :pray:

Especially the all around padding. The bg highlight to the right edge was indeed cutting some flow of energy :innocent:

That being said, could the scrollbar stay at the right edge? Right now it blends in left of the padding:

Agree about the space… why not drop the button actually and use the same contextual switch as the admin menu or Documentation on meta?

With respect to the length of the sidebar in general, it seems it’s falling victim to it’s own success already? There’s just so much stuff to put there… it often makes sense to have a custom section (or several), members can also put their own sections, then there’s the lists of categories, tags, messages, chat… And you have that menu that doesn’t stop scrolling, no matter the screen estate.

Maybe just have contextual menus all over? To me they have a much nicer flow than collapsing sections.

4 Likes

It does look cleaner, but I share the concern about screen space, especially on tablets and smartphones. From a gut feeling: maybe something right in the middle between the current and the proposed design.

Also: when the sidebar is updated that way, it immediately makes the list of posts on the right side look too crowded. I think these two would need to be aligned (there is already more mismatch than I personally like since the increase of the base font size).

5 Likes

Going to nitpick a bit:

  • why is there so much extra space at the bottom of a section? sometimes more space at the bottom makes sense, but this feels too uneven

  • Is the smaller “all categories” “all tags” intentional? those are fairly important links IMO

  • Generally heading text feels tiny, especially when collapsed

  • Not a fan of the carets on the right, I guess this is meant to differentiate headings, but it feels like we’re wasting space when we’ve already got a sidebar column for icons

  • The right padding should be removed from the sidebar container so the scrollbar is flush right like Manuel mentioned

  • We lost the background hover effect on headings… this combined with the smaller size makes the clickable area feel a lot more ambiguous than the main links

Yes, tbh this feels so padded that it feels out of place with the rest of Discourse… for this to be default I think we’d need to commit to adding more padding everywhere (not opposed to this, but it’s a big effort)

yeah we’re considering adding a sidebar to the sidebar, kind of like what slack does… this could switch contexts and sidebar content, right now we have a few diverging approaches to how sidebars work and need to tie them together one way or another. We could also move messages and “about” content to their own sections to make the main sidebar shorter.

19 Likes

What would help me the most is if the section header stuck to the top while scrolling. I have many categories and chat channels in my sidebar and with this change it’s harder to quickly understand where I am, because often the heading is scrolled off the page.

If we implemented sticky section headers (like we do for user avatars on post on scroll) I think I’d like this a lot more :slight_smile:

7 Likes

Can you give this another go, see how it feels. We’re on V2 already :wink:

Oversight on my part, thank you – should be fixed.

On purpose. I wanted the headings, which only collapse, to be distinct from the other elements, which navigate somewhere. I found the full hover effect on a collapsable header to be a bit unusual. Plus, there are 2 actions for most rows: the collapse and the secondary action (edit or add for messages). Highlighting the whole row, including the secondary action, felt off.

1 Like

Because the docs link was removed, I can now see two DM chats :tada:

2 Likes

Personally I am much happier with dense tight text with very little white space. Even the before layout seems wasteful of space. After is worse. Too bad it can’t be a user setting.

Yesterday night I was quite ready to bed and I did the last sightseeing tour. I found myself trying to pinch it tighter :stuck_out_tongue_winking_eye:

1 Like

Vastly prefer the tighter spacing “before” version

2 Likes

We decided to merge the current status of the design experiment into core.

There already are some easy-to-use variables in place to modify this to your liking (notable --d-sidebar-row-height) and it’s easy to further strip away spacing, for those who prefer that; however we find this to be a better default to offer to the range of users we have at Discourse.

3 Likes