What is a good way to display infinite nested comments?

Question

Is there a way to do infinite nested comment threads in a way that doesn't look horrible? I realize that one could simply restrict the levels of nesting, but perhaps there's a better way of indicating some comments are replies to other comments than simply indenting the comments. After a certain level of nesting, indenting fails.

Some ideas to play with: color, size, progressive disclosure, numbers (1.1, 1.2, 1.2.1, etc), modal windows, a comment reply stream (like Facebook or Twitter), something like SeaDragon, etc.

Has anyone solved this problem? What did you do? Out-of-the-box suggestions and visual examples are welcome too.

Answer 1

It's not so hard if you treat the "infinite nested comments" as another dimension in your design. Most comment threads just have two dimensions: the comment (X = 1) and the number of comments (Y = N). But now you have nested comments, adding Z = M to the mix.

From a UI design point of view this shouldn't represent much of a challenge as there are plenty of paradigms for dealing with extra dimensions, such as the ones Pam describes, as well as tabs, panels, etc. The problem we run into in the real world is that there isn't infinite screen space or infinite richness available. That's where things become complicated: web user don't want to scroll to the right, and most comment boxes are subjected to the parent page's scroll bar without being self-contained.

Twitter for iPad

Twitter for iPad recently gave me some inspiration in this area. There, the Z dimension is interactively presented as an overlaid pane on top of X,Y:

Because you're using an iPad, you have full control of whether or not to bring that extra pane in for full view or flick it away. So reading tweets (a 2-dimensional X,Y list) is fine: just scroll up and down. Most Twitter apps stumble when trying to add the 3rd dimension, which is zooming into a tweet to see its context.

For instance, a tweet could be a reply to someone else, and in those cases you want to see the full conversation. Most web based twitter clients will load a new page. Most apps won't really support it. But Twitter for iPad just brings over that right-hand pane again and highlights the selected tweet in the original pane. Now you can read through an vertically scrolled list of whatever's in the context. At this point, Z=1. If you click on an item in this list, another pane comes in from the right and you're in Z=2.

This can, theoretically, continue for Z=M, although I'm not sure what the Twitter client itself does (probably crashes!). This model looks inviting, however.

Answer 2

You're right, indenting does fail after a certain amount of levels, but you can always go for a solution as what deviantArt does (after about 10 levels, they redirect you to a different page with the whole reply stream).

I'd rather go for changes in font size or grouping panels, though. Here's an image on what I'm talking about. It's simpler and I think it gets the job done. Facebook actually does a mixture of both on the News Feed page. The main idea is to show them apart clearly, and at the same time show which was the main comment that started the chain of replies.

Broadening the subject of panels (since I think you're right about the font size issue), you can differentiate the groups of comments with color. It still needs indenting, but it needs a lot less of it, which gives you room for a lot more levels of nesting and still keeps it clear. You might want to rethink that link leading to a different page after 6 levels or so, though.

Answer 3

The UE in me has to ask: What kind of conversation requires infinitely nested comments?

Do they really need to be infinitely nested? Consider Gmail's conversation mode -- it simply groups all replies to the conversation in chronological order. Seems to work pretty well -- it's not changed for years. The only complaint people have is some want an 'unthreaded view' but this is even further away from what you suggest.

Answer 4

I've approached this problem, by not indenting, in some situations, and using arrows to indicate which comment replies to which comment.

Here's an example, from an open source discussion system I'm developing:

Here's a link to the above example, in real life: http://www.debiki.com/-71cs1#post-116979

(I also wrote a blog article about this: http://www.debiki.com/-01jn7-solving-problem-nested-replies-indentation )

Answer 5

I thought about one somewhat inspired by MS Outlook 2010 - grouping conversations:

Show just the "LEAF" comments, each containing all the previous comments in that conversation line.

For example, consider the following "real life" structure:

Post
 - Comment1
 - Comment2
   - Comment2.1
   - Comment2.2
     - Comment2.2.1

What the user would see is:

Post
  - Comment1
  - Comment2.1
  - Comment2.2.1

When looking at Comment2.2.1, for example, the user would see:

Comment2.2.1 by UserX 

     I agree!

Comment2.2 by UserY

     I think this should be done so and so

Comment2 by UserZ

     This post has a call for action, what do you think?

(While Comment2.1 would also contain Comment2)

Answer 6

I think @Dan's suggestion of showing only one comment and its ancestors makes a lot of sense. It allows one to see a message in the context of the conversation that lead up to it without the distraction of irrelevant branches.

Initially a post might be displayed like this:

+-------------------------------+
| The Design of Everyday Things |
| by Don Norman                 |
|                               | 
|                   [3 comments]| 
+-------------------------------+

Clicking [3 comments] or the pressing the down arrow key would open the first comment beneath the post.

+-------------------------------+
| The Design of Everyday Things |
| by Don Norman                 |
|                               |
|                               | 
+-------------------------------+
|                     1 of 3 [x]| 
|                               |
|< That's a great book!        >|     
|                               |
+-------------------------------+                     

From this point, you could cycle through all of the comments that were written about the post, using either the arrow buttons or right and left arrow keys. (BTW, whenever I say arrow keys, it's easy to imagine the same with a touchscreen swipe, accelerometer tilt, joystick, trackball, etc.)

Let's say you go right to read the next comment:

+-------------------------------+
| The Design of Everyday Things |
| by Don Norman                 |
|                               |
|                               | 
+-------------------------------+
|                     2 of 3 [x]| 
|                               |
|  I want to read this one.     |
|< I've read his other two.    >|     
|                               |
|                   [8 comments]|
+-------------------------------+  

At this point, you're on a comment that itself has eight comments. You can go down a level and read those comments.

+-------------------------------+
| The Design of Everyday Things |
| by Don Norman                 |
|                               |
|                               | 
+-------------------------------+
|                     2 of 3 [x]| 
|                               |
|  I want to read this one.     |
|  I've read his other two.     |     
|                               |
+-------------------------------+  
|                     1 of 8 [x]| 
|                               |
|  I enjoyed this one and       |
|< Emotional Design. I didn't  >|
|  know there was a third.      |
|                               |     
|                   [2 comments]|
+-------------------------------+

And so on. In theory, it would be easy to follow all of the branches (or just the interesting ones) without running out of space, zooming in and out like a yo-yo, trying to keep the conversation stack in your head, or forgetting what branches have already been visited.

It would also be trivial to save, bookmark, or print a particular comment; its context would automatically be included.

Answer 7

At some point you have to limit users to a nesting level. If you allow users to infinitely nest, at a certain point (usually about 3-4 levels), the content of the original comment is no longer relevant to what's going on at the more deeply-nested levels.

It's also worth noting that if nesting is manually restricted to a certain number of levels, people will still figure out ways to nest artificially, such as using @replies and quoting people further up the conversation chain.

Answer 8

This is a hard problem to solve, which also makes for a interesting puzzle. If you're not limiting levels of nesting, you need something that will loop without breaking the nesting. Positioning (indenting) when looped will mess up the context of hierarchy.

I've experimented with color, and I think a solution is to be found there, maybe.

It's hard, because the looping solution can't have any hierarchy status, because when looped it will 'reset' and you'll lose context. So the solution will need to have a temporarily hierarchal status.

Any takers?

Answer 9

Look at slashdot.org. Reddit.com as well. Their commenting system goes quite deep (once you remove filtering).

How? I assume, would be something along the same approach taken when expanding a folder system in an OS. Parent->Child relationships. I haven't ran across a limit to how deep the folder structure in windows can go, but it's not real complicated when ya think about it.

Display "top reply" (First, most recent, best rated, whatever). Display reply to Top. Does Reply to top have a reply?

I also think Phonescoop.com (Click for example with replies) has an interesting model: Replies get hidden after a certain point, but you can dig deeper into conversations and keep the hierarchy.

When you compare Slashdot to Phonescoop, it's easier to lose sight of the hierarchy on Slashdot, but you have to do a lot more clicking on Phonescoop. Slashdot also uses less and less room as you get deeper (I'm sure it stops at some point and they all squish together or just plain line up)..

Some sites don't need deep nesting. This site for example. The layout negates it. Sites that rely on commenting on other comments beg for it. The question is, how much activity do you honestly forsee? And how can you get it presented in a meaningful manner.

Answer 10

It is a NP-hard problem.

You can solve this problem, but can't never know (or say) for sure that if it is efficient or not.

Answer 11

I'd like to offer another suggestion: Use indented tree, but let the user customize the indentation level, and allow them to set the visual cue for it.

For example:

The following leftmost tree doesn't fit the screen boundaries. Hence, the user shifts it once (middle tree) then again (rightmost tree), using different colors (which can be set by the user) to visually cue the nesting level:

Another option I had in mind (which I like less) is to use guiding lines, so that when a shift is performed, the leftmost guiding line becomes dashed, and each nesting level is enumerated with regards to the root:

Any suggestions for improvement are welcome.