Forem Creators and Builders 🌱

Cover image for Discussions, Comments, Replies, Threads, Conversations...
Paweł Ludwiczak for Forem Core Team

Posted on

Discussions, Comments, Replies, Threads, Conversations...

There are many names for Discussion section under posts. Well, naming is hard. Even though these are just comments, we try to engage people to have more meaningful conversations about posts - and I think using right language is one way to do so.

Couple weeks ago, we've shipped updated design for post view. But the one area we've haven't really touched was "Discussion". And today I wanna show you some design ideas for it.

Threads

So I mentioned meaningful conversations - I think this is really great thing about Forem communities. You know - it's much more interesting to see longer conversations rather than short comments like "Cool!" or "Thanks" or whatever. On DEV I often learn much more from Discussion section rather than the post itself. So the concept of "threads" is something I really appreciate and try to encourage.

I wanted to introduce the visual language that would be in-line with "threading" and would make it easier to follow specific conversation within Discussion. And here it is:

Threads

Having this kind of a linear layout should make it a little bit easier to follow the thread.

Join the discussion

Now the commenting form. It's a simple textarea - it doesn't need much love. But there are few things to make it less overwhelming and at the same time more welcoming to join the discussion. How? Get rid of what's not necessary. All the controls are not really needed until you start typing. So let's hide it and make the entire form a simple call-to-action that would expand itself AFTER you start interacting with it.

Comments form

Touch of love

So above you could see an overview of how the new "Discussion" section could look like. But there's much more details that would go into it.

Personal branding

Users can define own "branding" in settings by picking some colors they like. We want to subtly bring that branding into comments, so on desktop, when you hover specific comment we gonna highlight its thread line with user's color (btw. this area will be also used to collapse comments).

Personal branding

Who is who?

And one more thing I wanted to show is ,ore visual way to recognize type of users - whether it's an admin or post author or moderator. Specific roles will now have an icon representing that role.

Flair

Latest comments (5)

Collapse
 
lisasy profile image
Lisa Sy

LOVE LOVE LOVE

Collapse
 
cesc1989 profile image
Francisco Quintero

I had to come to the comments box to see it in comparison to the design and the design proposal looks way cooler.

this area will be also used to collapse comments

I'd like to see that. Just like in Reddit with can collapse long threads.

Collapse
 
ildi profile image
Ildi

Really like the hiding/expanding of controls! The badges are also a very nice touch.

Collapse
 
link2twenty profile image
Andrew Bone • Edited

A very welcome change. Your mock up looks, as always, perfect.

I wonder if it would be nice to have some sort of emoji keyboard or even giphy support to allow you to pick a gif and embed it from within the discussion input.

imagination

Collapse
 
thomasbnt profile image
Thomas Bnt

Nice design and presentation ! 👌