For any given forum, let's say there are two types of users.
Users who care about all discussions. On small forums, this is going to be mostly everyone. But as a forum grows larger, it gets more time consuming to track every discussion, so only very active users (like moderators) will be able to. The rest will be...
Users who only care about a few discussions. Whether it's one or a handful, there will be certain discussions which pertain to a user's interests more than others.
In recent weeks, I've had a lot less time to read this forum. I've transitioned from user #1 into user #2. And I've noticed that Flarum's discussion list is less than ideal for this use-case.
With lots of unread topics, the discussion list gets quite visually noisy. It becomes hard to filter out the discussions that you actually care about — they get lost in the crowd or pushed down the page, escaping your glance. So much bold!
The problem lies with the fact that a discussion is either read or unread — and all unread discussions appear the same, in bold, whether there's one new post, or a hundred, or it's a discussion you've never even opened before, or it's a discussion you're following, or not... The only meaningful differentiator is the title. And with the current styling, the titles aren't particularly easy to scan.
This has been bugging me for a while. So I sat down the other day and came up with this alternative. There are a few other collateral changes too. I'll go through them one-by-one.
The discussion list styles are cleaner and simpler.
- Unread discussions are no longer bold, to reduce noise and give the discussion list a lighter, less overwhelming feel.
- Read discussions are a lighter gray, to make sure the difference between read and unread is still obvious.
- Discussion titles are slightly larger, to make them easier to read/scan.
- Last post information is a light gray so that it doesn't overpower anything, including read discussion titles. The username is no longer bold, again to reduce noise.
- The "reply" icon is gone, also to reduce noise and repetition. This has been niggling at me ever since we put it in. For goodness sake, let's just make the avatar reflect that of the last poster!
- Avatars are slightly smaller to improve balance.
The unread post count no longer replaces the reply count on an unread discussion. This is more intuitive/consistent – the reply count is the reply count, regardless of the discussion's state. It also reduces the noise generated by that solid black comment icon. The ability to mark an individual discussion as read instead manifests as a menu item in the discussion controls.
The unread post count is displayed in orange (or whatever the primary color is) just next to the title, but only for followed discussions. This is the key change, because it allows you to specify which discussions you care about by following them, and then they stand out to you in the discussion list. Discussions you haven't followed are still distinguishable as unread if you want to read them, but they're also easy to ignore if you don't.
Discussions you've never read before a marked with "NEW". Once you visit the discussion once, the "NEW" mark will disappear.
So the overall effect is to make both types of users happy:
Users who care about all discussions can easily spot discussions with unread posts (black instead of gray title), amongst which brand new discussion stand out (orange "NEW" mark). If there are particular discussions which they care about more than others, they can follow them and they'll gain some extra prominence in the discussion list (orange unread post counts).
Users who only care about a few discussions can follow those discussions so that they stand out in the discussion list when they're unread (orange unread post counts). They can also see which discussions are brand new to them (orange "NEW" mark), so they can take a look and decide whether or not to follow them. The rest of the discussions they can safely ignore without having to worry about having a noisy discussion list.
This is actually very similar to how Discourse works. I think they did well with this. One notable difference, though, is that where we have three "subscription" states for a discussion (muted/normal/following), Discourse has a fourth called "tracking". In this state, discussions gain an unread post count on the discussion list, but unlike "following", you don't receive web/email notifications about new posts. Although it may have some application, I would really like to avoid having a fourth state, because as someone new to the concept, I found it exponentially more confusing. I have a feeling we might be able to get away with three states since we have a user setting to turn off both web and email notifications for followed discussions.
But wait, there's more!
Mark all as read is gone. At least in the traditional sense of "making everything gray". Since unread discussions are no longer an eyesore, we can concede defeat to the flaws of the current implementation and not waste energy trying to solve this.
The sort-by menu is moved into the sidebar. I think it's hard to justify pushing the whole discussion list down (and thus fitting one less discussion on the screen) for a lonesome sort-by menu. Since it's not a very common action, this has been moved into a dropdown menu next to the currently-selected filter (i.e. the caret to the right of "All Discussions"). I think it's lovely to have the discussion list start right at the top of the page!
Taxonomy is more compact. Only the category is displayed (probably the child-most one — Installation rather than Support), and everything else is shown in a tooltip when hovering over the +n box.
Badges are no longer badges. They're just icons. Monochrome icons, because color attracts too much attention/noise. They're already in a very prominent position. (Thanks MirHamid for the inspiration!)
Sticky behaviour is changed. The current behaviour (only stick if there are unread posts) makes some sense, but it's a little counterintuitive and inflexible. Instead:
- When a moderator stickies a discussion, they can optionally choose to make it a "global" sticky.
- Global stickies appear at the top of the All Discussions list, regardless of whether or not they contain unread posts.
- Non-global stickies only stick to the top when filtering by a tag, and they behave like normal discussions in the All Discussions list.
- A user can dismiss a sticky for him or herself by clicking its sticky badge, after which it will behave like any other non-sticky discussion. He or she can reverse this action by clicking the sticky badge once more.