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.


4 Answers 4


Reddit case study

Let's look at a typical threaded commenting system, such as Reddit. It has the following problems:

  • It's hard to tell what's the parent of a comment when the tree is very deep.
  • If the tree is fully expanded, sometimes the parent comment can be off the screen.
  • There's no indication of which comments are new.

Reddit old

Now let's look at my suggested design for addressing all three problems:

reddit improved

Finding parent comment

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.

Parent comment is off the screen

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.

New comments

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

  • 1
    It's hard to not to lose intendation/vertical line from this particular comment when you have to scroll a several screens top. But button will work, I think. Commented Mar 3, 2011 at 15:12

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.

  • 1
    I can go both ways on this. I've used both hierarchical (www.digg.com) and flat (almost everywhere). Both are very usable to me. The better question is when to use one over the other. This I don't know.
    – JoJo
    Commented Mar 21, 2011 at 20:45
  • 1
    Well, it’s much easier to read long discussions in hier mode. Flat mode make such discussions almost impossible, both for reader and for writers. Commented Mar 21, 2011 at 20:48
  • Do Both, use threaded comments but only use two tiers. So so a thread can be started under a comment but you cant start another thread under an already threaded comment
    – HarveyZA
    Commented Mar 5, 2013 at 10:09
  • Much like stackexchange! Good call...
    – Pete
    Commented Mar 12, 2013 at 1:52

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 :)

  • Sorry, I haven't found the toggle switch. And you completely lose your context when switching, don't you? Commented Mar 3, 2011 at 15:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.