For blog, what are best practices to implement topic’s hierarchical comments?
How to help users to find yet unread comments when they may appear anywhere in the tree? How to show what parent comment is, when it can not be even visible on the screen in the long discussion trees?
Ideas and live examples (better) are welcome.
Let's look at a typical threaded commenting system, such as Reddit. It has the following problems:
Now let's look at my suggested design for addressing all three problems:
The faint gray vertical lines on Reddit are not enough for matching a child comment with its parent comment. The eye has to do a lot of work scanning up and down the lines. I suggest, in addition to the faint lines, we color code each level of comment with a different color. We use the colors of the rainbow (ROYGBIV), where red is the first level and violet is the maximum allowed level. Now it's easy to find your parent comment because we have another visual cue in addition to the spacial cue. For example, to find the parent of a blue comment, we scan upwards to the nearest green comment.
When the conversations become long, the parent comment may be off the screen. This can be solved with + / - buttons. You can contract more and more branches until the parent becomes visible. I chose to redesign Reddit's + / - button because I found it weird that they put them next to the poster's name. The button is supposed to act on the branch, not perform an action on a user. Also, their button is not really a button. It's just text in an anchor tag. It looks lame and doesn't look as clickable as a graphical button.
You can highlight new comments with a yellow background and a "new" label. What you highlight as new depends on your policy. I would probably only highlight comments that are 1 or 2 hours old.
Unread comments - you can have a floating element that contains the number of unread comments and if you click on it, takes you to the next one (similar to the functionality of the "Find" dialog in Word). It doesn't even have to float, it can appear on hover on a comment, or even be static next to existing comments (an icon for "take me to the next unread comment").
Regarding displaying the parents - you can do what Gmail did - when you're viewing long email discussions, next to the bottom right corner of the screen there's a tiny indication of the author of the next comment. And when you're scrolling up, there's a similar indication next to the top right corner.
You can also indicate this with a small indentation and a subtle vertical line descending from the parent. Also, the text of the parent comment can be available on demand (again, an icon with hover on it).
Don't use a threaded, hierarchical style. Just have a flat list. This is much better for users. You think you need the threaded style but you don't.
In my web app you can just switch from hierarchical view (for wide discussions) to ordering by date (to find the last posts). You can find this solution on my website http://chemica.ru - sorry, it is in Russian only. I could even post a translated screenshot if needed :)
