The Right Gutter - Other Uses and Mental Tricks

(mountain) #1

I admit something was bugging me about the ui when I first took notice to discourse.

On my browsing here I noticed a link to the Sitepoint Forums.

Now I was happy. I noticed how the conversation spanned farther across the screen. The links to other threads referenced in the gutter (is that the correct term?) were instead at the bottom of each post. Example:

(The red square is mine and for emphasis)

I realized what really made me uncomfortable was all that white space on the right hand side of the default ui.

The current design as it is feels like the conversation is being pushed for the sake of an element that is not always going to appear for the end user that is not a mod or admin (I don’t know if moderator controls are also using this gutter).

Then I saw this quote from @sam:

I am unsure what ‘orthogonal’ means in context of what I see with the current ui. Still, I felt there was a big white space situation, now not in the traditional spot.

After @codinghorror’s subsequent reply below, I took it upon myself to research the things he mentioned. Google provided a to-the-point reply. Okay, I can live with that; it’s sound. But it still didn’t excuse it for me.

So being my usual Hunter/ADHD self, I did some quick research into white space. The disconnect for me was that I saw white space as white. It took a bit of searching to find out white space is a web design and print term for negative space. As an art major, that I can understand fully. So now I applied what I know in terms of art.

The Quick Fix (Brain Trick)

The trick is to make a very simple change to fool the brain that the contrast and ‘presence’ exists with the conversation text of the left hand side with Discourse’s UI, so the brain doesn’t yearn to fill the white space. Both The New York Times and Baymard Institute use different sizing and scaling CSS for their fonts and thus makes them more prominent on the end user’s screen. The New York Times uses rem and from sight alone their font is one iota larger than the 14px here on the Discourse UI. Baymard to me is the winner here, because they upped the size to a very firm 18px. And if you check their site, you can see how the text has definite presence amid all the white space on the left and right. My brain can cope with that, nay, even enjoy it and the white space.

This is a change that can happen with each Discourse admin-user. Use the custom CSS feature and change the font to something more prominent where your brain can ‘cope’ with the white space. That is, if you had the same mental disjointedness as I did on first blush.

Other tricks exist. They change background colors and use background seamless patterns and other designs to turn white space into negative space, which to me is easier for the brain to accept.

The Right Gutter as a Meta Utility Gutter

This is more intensive and requires editing the source, or at the least, a plugin. My suggestion is to use the right gutter for more things other than related/linked threads. I could even be so bold and suggest the OP meta bar at the bottom can be removed and the content goes over to the right gutter instead. But this is just a suggestion and I am not heavily pushing for it. It is up to the devs and community to decide.

For plugin territory, I was thinking of reference links, footnotes or pretty much any new meta that can be procured from the post’s text. This is my humble request for plugin authors to utilize the right gutter when able. This is why sidebars feel ‘okay’ with a lot of people. If we cannot see prominence in the main text with our eyeballs (see the trick above) then subconsciously we can instead say “well, the sidebar is there, so this gutter has a firm reason for existing”. As I explained further above, the right gutter for related/linked threads and only threads doesn’t give enough credence to the right gutter’s existence. Not every post has linked threads and sometimes it goes completely underutilized as a result. This is why I opened my initial thread to point this out. The New York Times uses their right gutter for related coverage but also recent comments. In other articles, it is also used for extra images with captions. Baymard has a sidebar, but not always spanning full length. But a sidebar is a sidebar and the collective consciousness is “sidebars have utility and reasonable meaning” so most tend to be okay with the white space below them.

Optimal line length
Wrench is misplaced for wide screens
(Jeff Atwood) #2

Covered in other topics – too wide of a line length hurts readability, feel free to read the research and data on this.

Example, here is a screenshot of the NY Times I just took. Notice “too much white space”

Custom scrollbar with sticky sidebar (necessitates slight UX rethink)
(Jeff Atwood) #5

In the screenshot you quoted there is a tiny post, maybe 2 lines. That tiny post takes up 15+ vertical ines in the UI. That is what it was referring to though I agree @sam was not totally clear in the way he stated it. Here is a visual representation of the problem:

As for line length, that is addressed above and there is plenty of science to back it up.

Could there be more varied use of the right gutter? Perhaps!

(NomNuggetNom ) #6

Maybe the post stats could be moved there? These guys:

Collapsed into a nice, slim, vertical display? Just throwing out ideas ;D. It could also have the bottom action buttons, these guys:

(mountain) #7

Yes, exactly. That is what I was thinking of. I think it would put less extra noise in the conversation and keep the meta off in the right gutter.

And also, my full edits for my OP now showed up. For some reason they didn’t show at first. Hopefully it gives more clarification to my little research after @codinghorror’s first reply.

(Jeff Atwood) #8

Some other things I was just reading


Note line lengths, use of white space…

(mountain) #9

The Aeon example I dig. The text stakes territory in that. The second…not so much. Less is more really is key here. You see all those characters in just one line and the text is flat in prominence. It needs numbers instead of ‘beef’ to try and stand out and to me that’s why the white space is making me feel a tiny bit uncomfortable and I want to fill it.

First example also has that nice popular stories element in the right gutter.

(Mittineague) #10

I think that is a key consideration. I envision that at some point the space will be occupied by something. Whether adverts, read mores or whatever.

Personally, though I agree with in theory that longer lines of text are harder to read than shorter, I have no trouble jumping to the next with our forum’s rendering

(cpradio) #11

Isn’t this a flawed example? As you are on an iPad. Discourse suppresses the gutter on iPads… so the content takes up the full width (unless you are looking to change that – maybe that isn’t true for landscape view… which I don’t have the ability to test :frowning: )

BTW, I don’t mind the white-space. I don’t miss it at our instance either. So call me indifferent on this as a whole, I can live with whatever way it is implemented.

(Jeff Atwood) #12

Well the line length is the same whether you are in portrait or landscape.

(Jeff Atwood) #13

Right gutter has been completely rebuilt. Warning, too long of a line length can still be problematic for reading, though.

(Jeff Atwood) #14