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:
![[Image: xI3cni0.png]](https://i.imgur.com/xI3cni0.png)
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 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:
![[Image: VwjISHv.png]](https://i.imgur.com/VwjISHv.png)
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.
(05-29-2020, 04:23 PM)Stevie-O Wrote: 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 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.
A little harsh maybe, but I have noticed you have to do a lot of scrolling on this forum. I think it's a good idea, if it can be implemented easily.
Hi, forum admin here -- I've put quite a lot of time trying to refine this theme.
I'll start off with a statement that I do agree with most of what you said. This theme is not especially efficient (and the recent 3-bar change up top doesn't make me happy -- but I'll get to the reason for it). However, there's several issues here, and they mostly revolve around two factors:
1. MyBB themes are ridiculous
If MyBB used just a few linear template files that go together for the overall design, many of these changes would be much easier, and could be implemented just like you did. However, the Powers That Be decided to split them up into a ridiculous number of tiny files. They are called with spaghetti code, with hard coded variables for what each chunk of the website should be. There is not much room for creativity in design. Edits that are more than minor changes to text take hours to implement (such as the one I'm about to get to).
2. The design you made will completely fall apart on mobile devices
Yes, the design you made is efficient and effective -- on landscape orientation screens. If you tried to view it on a smartphone, I can promise you it would break and become unusable.
Case in point: that 3 bar (blue-black-silver) header up there? I did it just a few days ago, and don't like how it looks either. Previously, the text/links in the top two bars were in one. But on mobile devices, the links (Main, Rules, Getting Started, etc) completely disappeared -- because there was no room for them! People started complaining about not being able to access those links when on mobile, so I had to split them into two bars in order to fix that.
Now, I'm sure at this point you're yelling at me about Responsive Design. And sure, in a perfect world, you would be right. However, myBB has zero consideration for Responsive Design in mind! There are some themes out there which try to be mobile friendly, but they don't work very well. There also once were plugins which try to remedy this in some fashion, but they're now extremely out of date and have no chance of working properly.
With immense amounts of time, this theme might be able to be hacked apart to be presentable on mobile, and meet your requests for screen real estate. However, I don't know anyone with immense amounts of time and the desire to deal with this.
In the end, the ultimate solution is to move to a different forum platform. Because trust me -- at this point I feel no love for myBB, to put it mildly. But many of the "modern" free/FOSS choices have UX choices that infuriate me (placing all threads into a giant pile and forcing everyone to use stupid filters to narrow the results down). We'd also be at the mercy of some likely dysfunctional database export tool, else lose 4 years of forum posts.
In the coming days, I might try to narrow some of the margins and shrink some elements, but unfortunately your desire for a super slim layout is a pipe dream. Also, I really like the pretty header image, thank you very much. 
Community administrator and sysadmin for PINE64
(Translation: If something breaks on the website, forum, or chat network, I'm a good person to yell at about it)
05-29-2020, 07:00 PM
(This post was last modified: 05-29-2020, 07:01 PM by pfeerick.)
Bootstrap 3 via BootBB? Seems well maintained enough since it was last updated three days ago. Although for that to happen, it would be nice if all the work was not all dumped on Matthew!
(05-29-2020, 04:23 PM)Stevie-O Wrote: A Complete Waste of Space
Look! You can see some of the rules! They take up more than 50% of the screen!
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.
I can only agree with you fully on this issue, I also feel I'm wearing mouse-wheel out on this forum. Especially on that big banner on top.
@ fire219: that said, I do agree with you, it is nice looking and representing Pine64 - and as
such I welcome it on all the normal web pages on this site. However - a forum is page that
you might visit even several times a day, and therefore something you want to be more efficient
05-30-2020, 08:59 PM
(This post was last modified: 05-30-2020, 09:02 PM by Dendrocalamus64.)
(05-30-2020, 03:58 PM)Alho Wrote: I also feel I'm wearing mouse-wheel out on this forum. Especially on that big banner on top.
That sort of thing is easy to customize on your end. Install uBlock Origin, right click on it -> Block element -> Done!
Code: ! 5/31/2020 https://forum.pine64.org
||forum.pine64.org/images/forum_header2.png$image
forum.pine64.org###logo
Also works great on other forums for nuking that one user's fscking annoying avatar.
uh... the header goes away at first scroll. search is a bit hard to find, but it's there. we have "today's posts" and "new posts" (i'd prefer active posts). seems fine to me, and works great on the pbp! 
what i would enjoy would be active posts per subforum. occasionally i find myself wading into uncharted territory with a thread title that is interesting, but a subforum that i have no business in...
Lets give @ fire219 a hand for tidying up the layout further the new thin bars are indeed much nicer.
Let me just get this one out of the way...
(05-30-2020, 08:59 PM)Dendrocalamus64 Wrote: That sort of thing is easy to customize on your end. Install uBlock Origin, right click on it -> Block element -> Done!
That's the exact sort of thing that is called out on the "Doing Things That Scale" article I linked at the very top of my post. Requiring every user of the forum to do something special in order to get a good experience means that most people won't get a good experience.
(05-29-2020, 05:16 PM)fire219 Wrote: Hi, forum admin here -- I've put quite a lot of time trying to refine this theme.
<snip>
In the end, the ultimate solution is to move to a different forum platform. Because trust me -- at this point I feel no love for myBB, to put it mildly. But many of the "modern" free/FOSS choices have UX choices that infuriate me (placing all threads into a giant pile and forcing everyone to use stupid filters to narrow the results down). We'd also be at the mercy of some likely dysfunctional database export tool, else lose 4 years of forum posts.
@ fire219 Thank you for your response! I freely admit that when I was putting all this together, I expected that something different would have to be done for mobile. (Note that, on my phone, the current theme still doesn't work so well; the headings at the top are so tiny they're pretty much unreadable without zooming.)
If you think it's appropriate to move to a different forum software, then I'm not going to argue. Like I said, I had about a dozen other issues with the forum software; even if we fix the responsiveness issue, there's still everything else wrong with it.
So let's focus on what the replacement software needs:
- Some way to import all of the important data from the current software, somehow. Since it'd be a one-time conversion, then it's acceptable to require a custom-written import/export process, so long as someone is willing to implement that process. (I have experience with this sort of thing, so unless the schema is super-crazy, I should be able to do it myself.)
- Proper subforums and threads.
- Easy theming/skinning
- Good mobile support (whatever form that may take)
- Private messages, presumably
- Upstream should be amenable to accepting patches for bugfixes and UX improvements
- Anything else?
You're absolutely right about the "dump all threads into one bucket and use tags to group things". While it's definitely more flexible, it falls clearly into the Things That Don't Scale category.
The Wikipedia page "List of Internet forum software" lists 18 products. I eliminated 6 outright because they have non-FOSS licenses.
I've started a spreadsheet where I can track which requirements are met by each option.
Here's what I've put together (anybody with the link should be able to view the page):
https://docs.google.com/spreadsheets/d/1...sp=sharing
It's not requiring every user of the forum to do it. It's personal taste. The header doesn't bother me, so I don't block it.
|
