Discussion list revamp

Digital

@Toby As per my suggestion, i am very glad that we have the same view on this. This really makes the layout very clean.

Toby 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!

About this:

Toby 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!

Are you talking about reply sidebar on the right side? If so, will "follow" and "post scroll" remain on that side? Please correct me if i didn't understood it right.

Or is the the reply below post? If so, then i agree. But that function has "quoting" ability, how will that function work if "reply" will be eliminated?

Also, these huge and great changes will lead me back to my suggestion: https://discuss.flarum.org/d/2680-topic-title-and-tag-redesign

I see this as an issue where tags are not showing the right color (2nd and more tags). Please read my issue about that topic on the above link.

Overall changes are clever and very smart! Flarum looks very clean and neat which makes it easy for users to digest.

New post, reply count indicator are a must, great update. And sticky post (On & Off) -- everyone should have the ability to dismiss it, awesome!, These main changes are huge and super helpful for users specially new ones.

And please do not put a lot of buttons (which Discourse have) it messes up everything. Too much functions/buttons are not good, it confuses users.

Great job Flarum team!

jordanjay29

I love this. The one visual design alteration I would make is to switch the position of the [NEW]/[# Unread] icon with the discussion title. This makes for a more uniform appearance, and adds accessibility to colorblind or low contrast users (for whom the [NEW] icon may be invisible or difficult to discern) by adding a visual indentation for new topics that can be easily noticed without reading all the way to the end of the line.

Digital Are you talking about reply sidebar on the right side? If so, will "follow" and "post scroll" remain on that side? Please correct me if i didn't understood it right.

Or is the the reply below post? If so, then i agree. But that function has "quoting" ability, how will that function work if "reply" will be eliminated?

The reply icon Toby is talking about is this one.

I believe you're mistaking his suggestions for the Discussion View page instead of the Discussion List.

Digital

Toby 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.

I am also thinking the same way as @Kakifrucht.

This can be implemented globally not just for followed topics.
Followed topics has star badge so it will not affect how user navigate the forum or for them to know which is which.

Also, post count for the topics you are not following shouldn't be in the same space with tags. We don't want user's to confused it as tag. (This assumption is my understanding based on the layout you provided):

Can you please explain what +3 means:

Correct me if i am wrong if my assumption is wrong.

Edit:
Deleted last part

Dominion

Overall, it looks great ... I think the black titles will be distinctive enough without adding the extra bulk of boldface, but I'd like to see it in action to be sure. And the badges-to-icons change is the approach I was hoping for!

Offhand I can think of only two small concerns:

I think it might be nice to see a new post count even for threads I'm not following. Would it be possible to show them in all unread threads, and signal the difference between followed and not-followed in some other way? For example, fill the box with yellow for followed threads? Or something like that ...
Like Digital I found it hard to guess what the +3 means, in part because it puts the second addend in front of the first addend. I also fear it would make a small target to hover on. Perhaps it could be made a bit longer and more explicit, such as +3 tags or 3 more or something.

Beyond those two small things, I like the direction you're going in ... more information, yet still clean and simple.

Digital

jordanjay29 Thanks for making it clear.

So that means only tags will be shown on the right side of the list? Is that correct?

jordanjay29 I love this. The one visual design alteration I would make is to switch the position of the [NEW]/[# Unread] icon with the discussion title. This makes for a more uniform appearance, and adds accessibility to colorblind or low contrast users (for whom the [NEW] icon may be invisible or difficult to discern) by adding a visual indentation for new topics that can be easily noticed without reading all the way to the end of the line.

I suggest, replace red with colorblind-friendly color.

jordanjay29

Digital So that means only tags will be shown on the right side of the list? Is that correct?

I believe it simply means the absence of functionality in the reply icon and changing the unread/total replies number to straight totals. See the second image in Toby's post if Imgur isn't blocked, you can see what he hopes to accomplish.

Digital I suggest, replace red with colorblind-friendly color.

Right, but that can get overridden by a site admin changing the theme colors. It's not a bad consideration, just that we can't always rely on the default colors staying true.

Prosperous

I love it @Toby. Well done on the updates. My comments are all positive and I have nothing to particularly single out or critique. Flarum is just getting better and better with all the work that you and your team are putting in. Keep it up mate.

Digital

Dominion i have the same in mind. It is a good idea to implement reply count globally.

Here's what i have in mind.

Unfollowed topics can be primary color.
Followed topics can be neutral color or customizable color.

Digital

I also noticed that followed topics doesn't have star badge. Star badge helps user easily identify which topics are being followed.

Was that intentional or a mistake?

P.S.

Secondary tags will not be shown as well?

csf

Still trying to digest it all so take this with a generous dose of salt, but some thoughts off the top of my head...

I disagree with @jordanjay29's suggestion (no offense) to move new indicator to front of title. I think it's fine (after title). (Keep only the "sticky pin" icon in front of a title so it's easy to see what's sticky.)
I like that you dropped the gold start in discussion lists. I think that was too busy before. A person can simply look at their /following list or at the Following button (right sidebar) in context of a given discussion, if they want to know what threads they're following. Easy-peasy.
Although controversial, you could drop the total reply counts from far right of item and the associated speech bubble icon too. This would give you room to include both the primary and secondary category labels. Seeing both is useful because it helps teach users what the hierarchy associations are. By contrast, I don't see much value in knowing the total replies to every thread, and especially threads I'm not following. More important is the latest replies since last log in, which would be shown on discussions one is following (as the concept indicates).
You could eliminate the need for "new" text by combining the new indicator and reply count indicator into a single system like this:
- A new discussion since last login has a solid fill square, meaning you've never seen the title before.
- If there are also replies to that new discussion, then a reply count shows on top of the filled square.
- When a discussion is no longer new, and you're following it, but have new replies since last visit, the filled square changes to an empty square with the new reply count indicated. (As depicted.)
- When a discussion is no longer new, you're not following it, and you've never opened it, the title remains in regular black text but without square or reply count.

Also, I would expect all new discussions to appear at the top of the list together, not separated like they are depicted in the concept image at top. I don't quite understand how or why that would happen. For example, the discussion titled, "Welcome Banner" is labeled as new but is the fifth item in the list. I would only expect it to be fifth if the other four items before it were also new.

Dominion

csf Also, I would expect all new discussions to appear at the top of the list together, not separated like they are depicted in the concept image at top. I don't quite understand how or why that would happen. For example, the discussion titled, "Welcome Banner" is labeled as new but is the fifth item in the list. I would only expect it to be fifth if the other four items before it were also new.

It happens because "Latest" is selected as the sort order. The other four items have new posts made more recently than the last post in the new "Welcome Banner" discussion.

You can achieve the effect you want by selecting "Newest" as the sort order.

jordanjay29

csf
4. You could eliminate the need for "new" text by combining the new indicator and reply count indicator into a single system like this:

A new discussion since last login has a solid fill square, meaning you've never seen the title before.

If there are also replies to that new discussion, then a reply count shows on top of the filled square.

When a discussion is no longer new, and you're following it, but have new replies since last visit, the filled square changes to an empty square with the new reply count indicated. (As depicted.)

When a discussion is no longer new, you're not following it, and you've never opened it, the title remains in regular black text but without square or reply count.

This honestly reminds me of all the little icons that boards used to have to tell you what was hot, what was locked, what you replied to, etc, etc. It was so convoluted that you had to frequently reference the legend to figure out what meant what.

This sounds like a better extension than it does a Core design feature. A new user should be able to almost immediately understand what they're looking at as soon as they join a Flarum, we shouldn't subject them to a learning curve. If I were a user, I wouldn't have the faintest clue what a box meant. [NEW] means something, and [6] or [3] I could figure out without too much pondering.

csf

Dominion Oh, right. ? If it was a snake...

csf

Self-edited: (mockup lacked thread starter identity. Overlooked that. So, lucky you, no mockup.)

jordanjay29 This honestly reminds me of all the little icons that boards used to have to tell you what was hot, what was locked, what you replied to, etc, etc.

You're right, the colored square idea wasn't good.

Better might be to color the background of the entire list item containing div a faint yellow (or whatever default you wanted). Then there wouldn't be a need for any additional UI gizmo at all. You would only see the "new item" color when logged in, for the personalized effect, and it would go away when you opened the thread.

But we (CSF) will wait for the stable release and be happy when it gets there.

Btw, I would think UI changes like this would be on the stable v2 roadmap, not v1. Especially as the design is working decent as a V1. I know nobody is giving dates, but can we say a stable release will happen before 2017? I have people chomping at the bit to get enrolled now.

vargmal

the comments. should look and make more sense with smth like this and not on the side of the title but near the comments icon...

42 (+8) x

42 the total nr of comments, +8 the new ones unread in the topic that if clicked send you to the first one of the 8... and the x if you don't care enough for the topic to read it so you can dismiss it by clicking on it

Dominion

vargmal the comments. should look and make more sense with smth like this and not on the side of the title but near the comments icon...

I agree that it would make sense to keep that information together, if it can be done stylishly.

datitisev

vargmal That's a good idea...
It would probably be too much, though.

Trying to get it simple here ?
Not a lot should be going on ?
Not saying it's a bad idea, of course ?

Digital

@Toby

Do you think this is much better?

My issue is the current mockup makes me a little bit confused. At first glance it makes me think that the avatar was from the user who currently replied. Doesn't really occur to me that it was from the topic starter.

I don't know if it's just me or not?

Another issue is, i think there's too much noise on the left side of the list, which contains the following: (topic title, reply, reply time, badge, avatar, reply count, new topic icon).

So i separate things a little bit. As you can see the list is more balance and easy to understand.
Plus, badges is more visible and not overshadowed by the avatar

EDIT:

Just to clarify, i moved the topic starter avatar from left side to right side.

Davis

Digital You're not the only one. I find it a bit confusing as well.

I'm not sure how i feel about your solution though...

Dominion

Digital Davis meetdilip I have a hunch Toby might wish to limit the present discussion to the changes that he proposed in the OP. Regarding the relationship between the avatar and username that's displayed with below the discussion title, I'd like to direct your attention to this older thread.

There you will find a lengthy discussion of the very same issue, including Toby's thinking behind the original design, plus a variety proposals for alternate approaches that resulted in the current layout. It's required reading, if only to avoid a rehashing of ideas that have been discussed before.

amdad

Digital Do you think this is much better?

Toby said before, avatar has a role to topic as identifier. When they are on right you need to jump from left to right. You lost direct/close link between avatar and topic name.

@Toby Your latest changes bring back many ideas from old forum scripts I know. Icons as topic features indicators. NEW, and numbers of unread. So those are all very welcome.

Hiding labels also is great move on All discussion list and other general lists. But when you enter specific Category, like "Support". I don't see any reason to display obvious label information for each topic [ Support ]. Instead of main Category repeated, (child) Tags should appear. Displaying the same information in loop is against economy of simplicity I think.

meetdilip

Normally people would take the avatar as last poster's.