Suggested UX improvements for forum site

[Stevie-O]

At the beginning of this year (2020), I read an article called Doing Things That Scale. This article put a lot of things into perspective for me.  Also related here is Solving the wrong problem.  (In fact, the author of Solving the Wrong Problem has a LOT of good articles; I recommend reading through his archives.)

These all seem like little things, but little things add up. They confuse and mislead people, causing them to make mistakes and waste their time and others'. And in a website, that wasted time is multiplied by multiple people, because rarely does a poor UI design choice affect just one person.

A Complete Waste of Space

This site makes terrible use of available space. Here's a (marked-up) screenshot of what I see what I click the "rules" link:



Here are some numbers for you:

NOTE: All of these numbers are 25% larger than nominal due to screen scaling, because I'm looking at this site on a 15.6" screen at 1920x1080.

• The actual display area for the page itself is 941px high (there's also 89px above for the tab list + address bar, and 50px below for my taskbar.)
  
  
• 274px of that height -- nearly 30% of the available screen space, and an excess of half a million pixels -- is space that communicates only one thing: That the website I'm on is related to PINE64.  It doesn't even communicate that this is the forums.
  
  
•  The actual useful information -- the word PINE64 -- is only 35px high, one eighth of this section.
  
  
• At 83px, the pinecone logo is over twice the size of the name. (Also, it's got a Raspberry Pi in its background, so it has poor contrast, especially at the top.)
  
  
• Next comes a 208px-high section.  That's over 20% of the available screen space.  That's right, we've now used up more than 50% of the available screen space.
  
  It gets better, though: this part can't be scrolled past.  This entire region is forced to be displayed on the screen at all times.  Therefore, at any given time, more than one fifth of the available screen space has been spent on this section.
  
  (EVEN BETTER: I discovered that this region interferes with the post editor under some circumstances. More on this later.)
  
  
• The blue area is 80px high, the black area is 40px high, the light-grey area is 48px high.
  
  
• Below that is 48px of blank space (I got tired of drawing arrows)
  
  
• Below that, the blue breadcrumb box (which has an inexplicable 1-pixel-thick green border) is 63px high.
  
  
• Then there's another 42px of blank space
  
  
• And a 43px "Thread Closed" indicator
  
  
• And finally a 70px thread title, before the rules start.
  
  
• Oh, I'm sorry, no.  Below that is 184px of mostly blank space.  At least I know a lot about the person who posted the rules.  And the date the rules were last updated.  Oh, wait, no I don't, that's when he joined.
  

To reiterate: I clicked the "Rules" link and absolutely nothing pertaining to the rules showed up on my screen.

I understand how this happened.  I've watched it happen, a lot.  Building a cohesive website is hard.  Because it's hard, nobody did that; nobody said "Okay, we're going to create a website where users of our products can communicate with us and one another.  What is that going to look like?"  Instead ten different people worked on ten different parts of the system, and then number eleven combined all of those parts onto a single page.

Here are some ways that space could be used more efficiently:

• Get rid of the enormous image at the top.  Yes, it's very pretty, but it communicates no useful information.  Instantly reclaim nearly one third of the available display space!
  
  
• Drop the word "View" from "View New Posts" and "View Today's Posts".  That's implicit.  (The blue bar doesn't say "View Main Website" "View Rules" "View Getting Started" "View Wiki" "View News Blog" "View Help")
  
  
• Drop the word "Open" from "Open Buddy List".  Better yet, gather some statistics; find out how many people use this "Buddy List" feature at all.  It might be worth banishing to the submenu that pops up when you click your name.
  
  
• Drop the "User CP" link.  You can already access it from the dropdown menu when you click on your username in the black region.
  
  
• Drop the explicit "Private Messages". Or abbreviate it to "PM".
  
  
• Now the total horizontal space occupied by the blue, black, and grey areas is less than the total screen width.  They can thus be placed side-by-side.
  
  At this point, you should be able to fit the entire header region into 64px at the top of the screen.
  
  
• Eliminate the 38px of vertical padding in the "content" div
  
  
• The breadcrumb trail can be merged into the topic heading.
  
     (Also, I have no idea what that dropdown triangle next to the second "General" does.  It just displays a list of numbers.)
  
  
• The "Thread Closed" box can be moved down into the topic header.
  
  
• Also, it has much more padding than is needed.
  
     And it can be given a negative margin so the internal padding can overlaps with the padding of its containing box.
  
  (I've noticed a lot of poorly chosen margin/padding settings in the stylesheet.)
  
  
• That gravatar is 120x120 (150x150 with DPI scaling.) It's enormous and it doesn't need to be.
  
  
• Get rid of the useless padding around the author's name, description, and Yelp rating
  
  
• Cut the line spacing on the stats box from 1.4x to 1.1x, and put a negative margin so its internal padding overlaps the padding of the containing box.
  
  
• Get rid of the &nbsp; floats and the <br>
  
  
• Put a 4px margin-top on the main HTML table since we just deleted all the spacing in the last step
  
  

I think the results speak for themselves:



Look! You can see some of the rules! They take up more than 50% of the screen!

I must stress that the above image is a screenshot of a browser window.  All I did was add some new CSS rules and make some minor changes to the HTML.  It is absolutely possible for the forum to really look like this.

I have a number of additional thoughts on the forum software, but I have already spent several hours putting together this part.  If you're a forum user and you think we should do this, make your voice known.  If you're one of the forum admins and you think we should do this, let me know.  If nobody's interested, I can expend my energy elsewhere: there's a lot of other open-source projects out there that I can focus on.