Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
Just a thought: Infinitely nested comment structures aren't all that user friendly to begin with--regardless of the UI. –  DA01 Oct 10 '13 at 17:58

10 Answers 10

up vote 10 down vote accepted

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:

Twitter for iPad

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.

share|improve this answer
1  
+1 - The z-index idea is an interesting one. Earlier tonight I was thinking of something similar, but instead of using z, the comment in focus would slide to the top and the replies to that comment would slide in beneath it from the right. The focused comment would gain something similar to a back button where you could navigate horizontally through the threads (without a scroll bar). Each comment with replies would have a 'View Replies' button, which would then give that comment the focus. –  Virtuosi Media Sep 29 '10 at 6:48
    
Something like that would probably work okay. You should prototype it! –  Rahul Sep 29 '10 at 7:34
    
@VirtuosiMedia Only realized it after the fact, but I think my answer is similar to what you're thinking here. –  Patrick McElhaney Sep 30 '10 at 3:56

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. alt text

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.

alt text

share|improve this answer
1  
+1 for suggesting more possibilities. It would seem that the font size solution runs into the same problem as indenting, though. After a certain amount of nesting, it becomes problematic because the font will grow too small. Could you explain the grouping panels approach a little more? How are the parent and child comments differentiated? What happens for multiple levels of nesting? –  Virtuosi Media Sep 28 '10 at 23:02
    
I edited my answer for this. I mean just a couple of colors in the panels solution, of course, otherwise it would be complete madness after a few levels. I hope you find it useful. –  Pam Rdz Sep 29 '10 at 3:35
    
+1 for deviantArt mention. Those guys have some really slick UI stuff going on in places. –  Rahul Sep 29 '10 at 7:26
    
I know, there's a lot of stuff they're doing right, and I particularly like the way they manage comments –  Pam Rdz Sep 29 '10 at 14:23

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.

share|improve this answer
1  
That's a valid point, Julian. I'm treating this question as thought exercise more than necessarily meaning to implement infinite nesting. Given the infinite nesting constraint, can we come up with a good UI paradigm? –  Virtuosi Media Sep 28 '10 at 23:57
    
@VirtuosiMedia Yay for constraints! google.com/search?q=constraints+creativity –  Patrick McElhaney Sep 29 '10 at 19:11
    
I think the biggest reason things end up with absurd nesting is that an inability to distinguish between "continue thread" and "start new thread". In the situation where there's been one post and one reply, there are at least three things one may wish to do: start a new thread talking about the original post, which has nothing to do with the reply, continue the thread started by the first reply, or start a new thread talking just about some aspect of the first reply. Trying to represent three intentions with just two choices (reply to original, or reply to first comment)... –  supercat Mar 7 at 20:14
    
...will make it impossible for the system to know which things should really be shown at the same level. Letting commenters specify whether they're continuing a thread or starting a new one would make it easier to keep nesting under control. –  supercat Mar 7 at 20:16

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)

share|improve this answer

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:


Indicating which comment replies to which comment, via arrows


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 )

share|improve this answer
    
Wow, great idea, I really like this! –  fhucho Feb 14 at 14:06

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.

share|improve this answer
    
+1 - That is indeed very similar to what I was describing above. The only thing that I'm trying to figure out now is how it would look (and work) with JavaScript disabled. I think that for that, it might make sense to limit the nesting and to only load replies via AJAX. –  Virtuosi Media Sep 30 '10 at 4:52
    
I think it should work the same way with JavaScript disabled. You'd just have to load a new page rather than pulling in content dynamically. It might make sense to reverse the order in which comments are displayed (deepest first). –  Patrick McElhaney Sep 30 '10 at 12:23

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.

share|improve this answer

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.

share|improve this answer

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?

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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