Custom scrollbar with sticky sidebar (necessitates slight UX rethink)


(Erlend Sogge Heggen) #1

This topic collects ideas from various topics and attempts to pull them all together into a redesign of some longstanding UX defaults in Discourse.

I’ve attempted to combine a series of previously debated features:

Custom Scrollbar Sidebar

esoTalk/Flarum is an obvious inspiration here.

Sidebar breakdown

  • Sidebar now takes precedence over “Reply as new topic” which has been moved into the Editor.

Body breakdown

  • Incoming link has been de-emphasised again (smaller text size, grey color, lower opacity when not hovered over). I think the biggest value of incoming links is the notification you receive if you’re tracking a topic that gets linked to.

  • I figure with more than one incoming link, which is very rare for a reply, a separate “3 more” link on the same line could be added.


Change right gutter to vertical timeline + topic controls
Alternative to blue colors for coldmapping
Move "Reply as new topic" to Link pop-up
Possible "take me back to where I was" button on progress bar
#2

This is a great idea, and would be a huge improvement for UI. The only shortfall I see is that it only benefits the desktop layout. Then you end up with two very different experiences on mobile and desktop, and it no longer feels like the same site, which is generally contrary to your goal.

I suppose it could be made to work with the mobile layout if it were placed in a slideout tray, but then it ends up hidden and you lose the benefit of the custom scrollbar.


(Erlend Sogge Heggen) #3

Actually I think this brings the two designs closer together.

Right now, Mobile simply excludes the sidebar altogether. There’s no way to get to it even if you wanted to. At least if it’s available via a slideout tray, it’s within reach, even if it’s not as accessible as on desktop. But that’s just the price you pay for a smaller screen.

Here’s one way to do it. Replace the large logo with the small and use that space for the page tracker. Clicking on the tracker would slide in the sidebar.

There’s room for further minimisation here, like merging the profile, hamburger and notifications button into one.

… but, that might warrant its own discussion, and would benefit from the revamped hamburger slide-out being properly specced out.


Material Design for Discourse
Full height, slide out hamburger menu
(Erick Guan) #4
  • How would “3 more” link expand?
  • Tracking status on the upper right is too strong to me.

This topic is generally cool!


(Erlend Sogge Heggen) #5

I changed my mind about it a little bit as I tinkered with it just now. I figure in the rare instance when there’s more than one incoming link for a Reply, you can just hide them all behind a “show all” type action.

Pre-click:

Post-click:


(Erick Guan) #6

It’s interesting. However it may be the most controversial part of this mockup. Incoming links are helpful. It maybe used more than suggested topics as my observation. I think it should still be in the gutter.


#7

That sounds like a perfect way to implement my half idea.

I can kind of see that. Let’s look at it this way, controls in the sidebar should really be organized in a sort of hierarchy, based on how important they are or how often you would expect them to be used. So we have three controls:

  • Reply to topic
  • Tracking status
  • Custom scroll bar

All of the controls have a fairly high importance, which is why they would be in the sidebar, so frequency of use is probably the better metric to use. Reply to topic and the scrollbar are probably going to be used the most frequently, with the tracking status being the least frequently used. I think this is fairly well signified by the size of the controls. However, I would make two changes:

  1. Move the Reply to topic and tracking status controls below the scrollbar.
  2. Make the Reply to topic and tracking status controls less bright.

This would help to signify that the tracking status control is less frequently used and make the Reply to topic button less eye catching in relation to the Reply to post buttons.

The problem is that to implement the sidebar, the gutter space really needs to be cleared, so the links have to be moved. They aren’t really part of the post, they’re more meta information regarding the post, so the location that @erlend_sh has selected really makes a lot of sense.


(Erlend Sogge Heggen) #8

I agree with those changes. Furthermore, the Reply&Tracking-section of the sidebar could follow the same level-of-visibility pattern that the current Reply button does:

  1. No-hover: Transparent
  2. Hover over area: No transparency
  3. Hover over button: Highlight

(Jacob Chapel) #9

On my forum I have the gutter removed, posts are full width, so you don’t even see the incoming links.

I’d say the feature is not as important as proper navigation, but something like this would mean I could use them on my site. Taking up all of that whitespace to the right is a waste considering for the majority of posts and even threads, there is never an incoming link.

I think the UX on the proposed scrollbar needs to be leaner, and more of a scroll bar that exposes more information. Only when hovering or doing an action that would require the UI should it expand out into its full UI state. Think of the Youtube track bar, by default it is a thin red line, but if you hover, it grows and allows you to hover over to see a preview of the time you’re looking at. I could see that being very useful when hovering over the scroll bar. But by default it is subdued and out of the way.


(Erlend Sogge Heggen) #10

I know you’ve got some UX chops; would love it if you could contribute some mockups to the discussion :blush:

My starting point was quite simply to rip off the Flarum sidebar, so obviously there are plenty of other paths worth exploring.


(Jeff Atwood) #11

It’s debatable what the gutter should be used for, but posts should not be full width, as that’s bad for readability. See plenty of examples screenshotted here.


(Jacob Chapel) #12

I know and understand your reasons. I disagree with them for my forum and
I’m not advocating the default layout be full width. It’s wasted space the
majority of the time.


(Jeff Atwood) #13

Ok since the spec topic is up, we can continue any tweak conversations here unless @erlend_sh thinks a new topic is necessary.

I suspect once we get minimum viable versions of this up on meta to use, courtesy of @eviltrout, it will be better to have a new topic…


(Erlend Sogge Heggen) #14